| <?xml version="1.0" standalone="no"?> |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" |
| "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> |
| |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <!-- ====================================================================== --> |
| <!-- Minesweeper in SVG --> |
| <!-- --> |
| <!-- @author thomas.deweese@kodak.com --> |
| <!-- @version $Id$ --> |
| <!-- ====================================================================== --> |
| |
| <svg width="450" height="500" viewBox="0 0 450 500" |
| xmlns="http://www.w3.org/2000/svg" |
| xmlns:xlink="http://www.w3.org/1999/xlink"> |
| |
| <script type="text/ecmascript"> |
| <![CDATA[ |
| // |
| // Global declarations |
| // |
| var mines0 = 8; |
| var mines1 = 40; |
| var mines2 = 99; |
| |
| var boardSize = 1; |
| var numAcross = 16; |
| var numDown = 16; |
| var numMines = 40; |
| |
| var correctFlags = 0; |
| var incorrectFlags = 0; |
| var minesLeft; |
| var board = document.getElementById("board") |
| var cover = document.getElementById("cover") |
| |
| var boardArray = new Array(numAcross*numDown); |
| var shownArray = new Array(numAcross*numDown); |
| var flagArray = new Array(numAcross*numDown); |
| var isGameOver = true; |
| var xlinkNS = "http://www.w3.org/1999/xlink"; |
| var svgNS = "http://www.w3.org/2000/svg"; |
| |
| function initBoard(evt) { |
| isGameOver = false; |
| minesLeft = numMines; |
| correctFlags = 0; |
| |
| updateText("mines", "Mines Left: "+minesLeft); |
| updateText("boardsz", "Board Size: "+numAcross+"x"+numDown); |
| updateText("title", ""); |
| updateText("working", "Working"); |
| |
| for(var y=0; y<numDown; y++) { |
| for(var x=0; x<numAcross; x++) { |
| boardArray[x+y*numAcross] = 0; |
| shownArray[x+y*numAcross] = false; |
| flagArray [x+y*numAcross] = false; |
| } |
| } |
| while (cover.lastChild != null) { |
| cover.removeChild(cover.lastChild); |
| } |
| while (board.lastChild != null) { |
| board.removeChild(board.lastChild); |
| } |
| |
| for (var i=0; i<numMines; i++) { |
| var index = Math.round(Math.random()*(numDown*numAcross)); |
| if ((index >= (numDown*numAcross)) || |
| (boardArray[index]!=0)) { |
| i--; |
| } else { |
| boardArray[index] = -1; |
| } |
| } |
| |
| for(var y=0; y<numDown; y++) { |
| |
| var coverRow = document.createElementNS(svgNS, "g"); |
| var boardRow = document.createElementNS(svgNS, "g"); |
| |
| var sum=0; |
| for (y1=y-1; y1<=y+1; y1++) { |
| if ((y1 >= 0) && |
| (y1 < numDown) && |
| (boardArray[y1*numAcross] == -1)) |
| sum++; |
| } |
| |
| for(var x=0; x<numAcross; x++) { |
| if (x-2 >= 0) { |
| for (y1=y-1; y1<=y+1; y1++) { |
| if ((y1 >= 0) && |
| (y1 < numDown) && |
| (boardArray[x-2+y1*numAcross] == -1)) |
| sum--; |
| } |
| } |
| if (x+1 < numAcross) { |
| for (y1=y-1; y1<=y+1; y1++) { |
| if ((y1 >= 0) && |
| (y1 < numDown) && |
| (boardArray[x+1+y1*numAcross] == -1)) |
| sum++; |
| } |
| } |
| |
| if (boardArray[x+y*numAcross] == 0) |
| boardArray[x+y*numAcross] = sum; |
| |
| var square = document.createElementNS(svgNS, "use"); |
| square.setAttributeNS(null, "x", ""+(x*10)); |
| square.setAttributeNS(null, "y", ""+(y*10)); |
| square.setAttributeNS(null, "onclick", |
| "handleClick(evt, "+x+","+y+")"); |
| |
| var cov = square.cloneNode(true); |
| cov.setAttributeNS(null, "id", "cover"+x+"-"+y); |
| cov.setAttributeNS(xlinkNS, "href", "#blank"); |
| var g = document.createElementNS(svgNS, "g"); |
| g.appendChild(cov); |
| coverRow.appendChild(g); |
| |
| square.setAttributeNS(null, "id", "square"+x+"-"+y); |
| if (boardArray[x+y*numAcross] == -1) |
| square.setAttributeNS(xlinkNS, "href", "#bomb"); |
| else |
| square.setAttributeNS(xlinkNS, "href", "#square"+sum); |
| var g = document.createElementNS(svgNS, "g"); |
| g.appendChild(square); |
| boardRow.appendChild(g); |
| } |
| cover.appendChild(coverRow); |
| board.appendChild(boardRow); |
| } |
| |
| updateText("working", ""); |
| updateText("title", "SVG Mines"); |
| } |
| |
| function handleClick(evt, x, y) { |
| if (isGameOver) return; |
| if ((evt.button == 1) || |
| (evt.shiftKey)) { |
| placeFlag(x, y); |
| } |
| else if ((evt.button == 2) || |
| (evt.ctrlKey)) { |
| showConnected(x, y); |
| } |
| else if (evt.button == 0) { |
| showSpot(x, y) |
| } |
| } |
| |
| function placeFlag(x ,y) { |
| var idx = x + y*numAcross; |
| if (shownArray[idx]) return; |
| var elt = document.getElementById("cover"+x+"-"+y); |
| var nelt = elt.cloneNode(true); |
| if (flagArray[idx]) { |
| nelt.setAttributeNS(xlinkNS, "href", "#blank"); |
| flagArray[idx] = false; |
| if (boardArray[idx] == -1) correctFlags--; |
| else incorrectFlags--; |
| minesLeft++; |
| } else { |
| nelt.setAttributeNS(xlinkNS, "href", "#flag"); |
| flagArray[idx] = true; |
| if (boardArray[idx] == -1) correctFlags++; |
| else incorrectFlags++; |
| minesLeft--; |
| } |
| |
| elt.parentNode.replaceChild(nelt, elt); |
| updateText("mines", "Mines Left: "+minesLeft); |
| |
| if ((correctFlags == numMines) && (incorrectFlags == 0)) { |
| youWin(); |
| } |
| } |
| |
| function showSpot(x, y) { |
| var idx = x + y*numAcross; |
| if (shownArray[idx]) return; |
| |
| var elt = document.getElementById("cover"+x+"-"+y); |
| elt.parentNode.parentNode.removeChild(elt.parentNode); |
| shownArray[idx] = true; |
| |
| var val = boardArray[idx]; |
| if (val == -1) { |
| gameOver(); |
| } else if (val == 0) { |
| showConnected(x, y); |
| } |
| } |
| |
| function showConnected(x, y) { |
| for (var dy=-1; dy<=1; dy++) { |
| if (y+dy < 0) continue; |
| if (y+dy >= numDown ) continue; |
| for (var dx=-1; dx<=1; dx++) { |
| if (x+dx < 0) continue; |
| if (x+dx >= numDown ) continue; |
| var idx = x+dx + (y+dy)*numAcross; |
| if (shownArray[idx]) continue; |
| if (flagArray[idx]) continue; |
| |
| var elt = document.getElementById("cover"+(x+dx)+"-"+(y+dy)); |
| elt.parentNode.parentNode.removeChild(elt.parentNode); |
| shownArray[idx] = true; |
| |
| var val = boardArray[idx]; |
| if (val == -1) { |
| gameOver(); |
| } else if (val == 0) { |
| showConnected(x+dx, y+dy); |
| } |
| } |
| } |
| } |
| |
| function gameOver() { |
| isGameOver=true; |
| updateText("title", "Game Over"); |
| showBoard(); |
| } |
| |
| function showBoard() { |
| while (cover.lastChild != null) { |
| cover.removeChild(cover.lastChild); |
| } |
| var nc = numAcross*numDown; |
| for (var i=0; i<nc; i++) |
| shownArray[i] = true; |
| } |
| |
| function youWin() { |
| isGameOver=true; |
| updateText("title", "You Win"); |
| } |
| |
| function updateText(id, lbl) { |
| var elt = document.getElementById(id); |
| var grp = elt.parentNode; |
| var newelt = elt.cloneNode(true); |
| |
| if (newelt.firstChild == null) { |
| newelt.appendChild(document.createTextNode(lbl)); |
| } else { |
| newelt.replaceChild(document.createTextNode(lbl), newelt.firstChild); |
| } |
| grp.replaceChild(newelt, elt); |
| } |
| |
| function largerBoard(evt) { |
| if (boardSize == 1) return; |
| boardSize++; |
| if (boardSize == 1) { |
| numAcross = 16; |
| numDown = 16; |
| numMines = mines1; |
| } |
| else if (boardSize == 2) { |
| numAcross = 30; |
| numDown = 16; |
| numMines = mines2; |
| } |
| updateText("boardsz", "Board Size: "+numAcross+"x"+numDown); |
| updateText("title", ""); |
| updateText("working", "Working"); |
| setTimeout("initBoard()", 50); |
| } |
| |
| function smallerBoard(evt) { |
| if (boardSize == 0) return; |
| boardSize--; |
| if (boardSize == 0) { |
| numAcross = 8; |
| numDown = 8; |
| numMines = mines0; |
| } |
| else if (boardSize == 1) { |
| numAcross = 16; |
| numDown = 16; |
| numMines = mines1; |
| } |
| updateText("boardsz", "Board Size: "+numAcross+"x"+numDown); |
| updateText("title", ""); |
| updateText("working", "Working"); |
| setTimeout("initBoard()", 50); |
| } |
| |
| function newGame(evt) { |
| updateText("title", ""); |
| updateText("working", "Working"); |
| setTimeout("initBoard()", 50); |
| } |
| |
| ]]> |
| </script> |
| |
| <defs> |
| <radialGradient id="bombGrad" gradientUnits="userSpaceOnUse" |
| cx="5" cy="6.5" fx="4" fy="5" r="2.5"> |
| <stop offset="0%" stop-color="#FFF"/> |
| <stop offset="20%" stop-color="#888"/> |
| <stop offset="100%" stop-color="#000"/> |
| </radialGradient> |
| <path id="empty" style="fill:#AAA; stroke:#DDD; stroke-width:0.5;" |
| d="M0.25,0.25 h9.5 v9.5 h-9.5 v-9.5"/> |
| |
| <g id="blank" |
| ><rect style="fill:#AAA" width="10" height="10" |
| /><path style="fill:#DDD" |
| d="M0,0 h10 l-1,1 h-8 v8 l-1,1 v-10" |
| /><path style="fill:#888" |
| d="M10,10 h-10 l1,-1 h8 v-8 l1,-1 v10" |
| /></g> |
| |
| <use id="square0" xlink:href="#empty"/> |
| <g id="square1" style="text-anchor:middle; font-size:8;" |
| ><use xlink:href="#empty" |
| /><text x="5" y="8" fill="#008" pointer-events="none">1</text></g> |
| <g id="square2" style="text-anchor:middle; font-size:8;" |
| ><use xlink:href="#empty" |
| /><text x="5" y="8" fill="#00C" pointer-events="none">2</text></g> |
| <g id="square3" style="text-anchor:middle; font-size:8;" |
| ><use xlink:href="#empty" |
| /><text x="5" y="8" fill="#40F" pointer-events="none">3</text></g> |
| <g id="square4" style="text-anchor:middle; font-size:8;" |
| ><use xlink:href="#empty" |
| /><text x="5" y="8" fill="#80C" pointer-events="none">4</text></g> |
| <g id="square5" style="text-anchor:middle; font-size:8;" |
| ><use xlink:href="#empty" |
| /><text x="5" y="8" fill="#C0C" pointer-events="none">5</text></g> |
| <g id="square6" style="text-anchor:middle; font-size:8;" |
| ><use xlink:href="#empty" |
| /><text x="5" y="8" fill="#F08" pointer-events="none">6</text></g> |
| <g id="square7" style="text-anchor:middle; font-size:8;" |
| ><use xlink:href="#empty" |
| /><text x="5" y="8" fill="#F04" pointer-events="none">7</text></g> |
| <g id="square8" style="text-anchor:middle; font-size:8;" |
| ><use xlink:href="#empty" |
| /><text x="5" y="8" fill="#F00" pointer-events="none">8</text></g> |
| |
| <g id="bomb" |
| ><use xlink:href="#empty" |
| /><rect fill="#000" x="4" y="3" width="2" height="2" |
| /><circle fill="url(#bombGrad)" cx="5" cy="6.5" r="2.5" |
| /><path fill="none" stroke="#000" stroke-width="0.3" |
| d="M5,3 c0,-1.5 1.5,-1.5 1.5,0 c0,1.5 1.5,1.5 1.5,0" |
| /></g> |
| |
| <g id="flag" |
| ><use xlink:href="#blank" |
| /><path d="M3.5,2 h.5 v6.5 h-1 l.5,-6.5" |
| /><path fill="crimson" d="M4,2 l4,1.5 l-4,1.5 z" |
| /></g> |
| </defs> |
| |
| <g id="body"> |
| <text id="title" x="25" y="60" font-size="40" |
| pointer-events="none">SVG Mines</text> |
| <text id="mines" x="250" y="30" font-size="20" |
| pointer-events="none">Mines Left: </text> |
| |
| <text id="boardsz" x="250" y="54" font-size="20" |
| pointer-events="none">Board Size: </text> |
| <g transform="translate(242, 38)" fill="black"> |
| <path onclick="largerBoard(evt)" |
| d="M2.5,0 l-2.5,7 h5 z"/> |
| <path onclick="smallerBoard(evt)" |
| d="M0,9 h5 l-2.5,7 z"/> |
| </g> |
| |
| <g text-anchor="middle" > |
| <g id="help" > |
| <desc xml:space="preserve" |
| >Left: show |
| Right or Shift: place flag |
| Middle or Control: show surround</desc> |
| <circle cx="430" cy="18" r="12" |
| fill="grey" stroke="lightgrey" stroke-width="2" /> |
| <text font-size="15" fill="blue" x="430" y="25" |
| pointer-events="none">?</text> |
| </g> |
| |
| <g onclick="newGame()"> |
| <desc xml:space="preserve">Start new game</desc> |
| <circle cx="430" cy="48" r="12" |
| fill="grey" stroke="lightgrey" stroke-width="2" /> |
| <text font-size="10" fill="blue" x="430" y="53" |
| pointer-events="none">NG</text> |
| </g> |
| </g> |
| |
| <g id="field" transform="translate(25,75) scale(2)" |
| onload="initBoard(evt)"> |
| <g id="board"> |
| </g> |
| |
| <g id="cover"> |
| </g> |
| </g> |
| <text id="working" fill="green" x="25" y="60" font-size="40" |
| pointer-events="none">Working</text> |
| </g> |
| |
| <!-- ============================================================= --> |
| <!-- Batik sample mark --> |
| <!-- ============================================================= --> |
| <use xlink:href="batikLogo.svg#Batik_Tag_Box" /> |
| </svg> |
