A simple battleship game
This is a simpler version of the popular game battleship, where the positions of the battleships must be determined before the lifelines expire.Game primitives
Lives :
7
Ships :
4 x 1
4 x 1
3 x 1
2 x 1
2 x 1
The code gist for the above is as follows, which is hopefully quite self explanatory.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Data Mapper tooling</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.js"></script> | |
| <style> | |
| .container{ | |
| border:1px solid #c9c9c9; | |
| border-radius: 10px; | |
| padding:10px; | |
| margin: 10px; | |
| display: block; | |
| } | |
| .primitive-label{ | |
| display: block; | |
| padding: 10px; | |
| } | |
| .label{ | |
| border:1px solid #e9e9e9; | |
| border-radius: 7px; | |
| padding: 7px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header container"> | |
| <h1>A simple battleship game</h1> | |
| <p>This is a simpler version of the popular game battleship, where the positions of the battleships must be determined before the lifelines expire.</p> | |
| </div> | |
| <div class="container" id="primitives"> | |
| <h2>Game primitives </h2> | |
| <div class="primitive-label" id="life-count">Lives : </div> | |
| <div class="primitive-label" >Ships : | |
| <span class="label">4 x 1</span> | |
| <span class="label">4 x 1</span> | |
| <span class="label">3 x 1</span> | |
| <span class="label">2 x 1</span> | |
| <span class="label">2 x 1</span> | |
| </div> | |
| </div> | |
| <div class="container" id="game-grid"> </div> | |
| <script> | |
| //set lifecount | |
| var lifeCount = 7; | |
| //set successcount | |
| var successCount = 4 + 4 + 3 + 2 + 2; | |
| var trials = 0; | |
| //update the lifeCount variable | |
| d3.select("#life-count").append("span").attr("class", "label").text(lifeCount); | |
| //draw an svg-canvas on selected div | |
| var svg = d3.select("#game-grid").append("svg").attr("width", 500).attr("height", 500); | |
| //get an array of coordinates of ships | |
| var layout = getLayout(); | |
| //draw the grid of similar squares | |
| drawGrid(svg, 10, 10, "#E3FBF3"); | |
| //set click function to the rectangles - this basically is the logic | |
| svg.selectAll(".node").on("click", function () { | |
| for (var i in layout) { | |
| //check if the clicked node is a hit | |
| if (layout[i].toString() === [d3.select(this).attr("xCode"), d3.select(this).attr("yCode")].toString()) { | |
| d3.select(this).attr("fill", "#6EE387"); | |
| trials++; | |
| if(trials===successCount){ | |
| alert("You won!"); | |
| } | |
| return; | |
| } | |
| } | |
| //if not a hit | |
| lifeCount--; | |
| d3.select("#life-count").select("span").text(lifeCount); | |
| d3.select(this).attr("fill", "#E37A77"); | |
| if (lifeCount === 0) { | |
| alert("Game Over"); | |
| } | |
| }); | |
| function drawGrid(parent, xCount, yCount, color) { | |
| var length = 50; | |
| for (var i = 0; i < yCount; i++) { | |
| for (var j = 0; j < xCount; j++) { | |
| parent.append("rect").attr("class", "node") | |
| .attr("x", i * length) | |
| .attr("y", j * length) | |
| .attr("fill", color) | |
| .attr("stroke", "black") | |
| .attr("stroke-width", 1) | |
| .attr("width", length) | |
| .attr("height", length) | |
| .attr("rx", 8) | |
| .attr("ry", 8) | |
| .attr("xCode", i) | |
| .attr("yCode", j); | |
| } | |
| } | |
| } | |
| function getLayout() { | |
| //some algorithm to get the layout of the ships | |
| return [[0, 0], [0, 1], [0, 2], [0, 3], [5, 1], [6, 1], [7, 1], [8, 1], [8, 3], [8, 4], [1, 7], [1, 8], [4, 7], [5, 7], [6, 7]]; | |
| } | |
| </script> | |
| </body> | |
| </html> |
0 comments:
Post a Comment