Last active
July 30, 2017 13:17
-
-
Save Esmala/c92f293765d4c799e1fd18e6d218c636 to your computer and use it in GitHub Desktop.
Shep's simplistic city building game
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> | |
| <body> | |
| <center> | |
| <canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #d3d3d3;"> | |
| Your browser does not support the HTML5 canvas tag.</canvas> | |
| <script> | |
| var c = document.getElementById("myCanvas") | |
| var ctx = c.getContext("2d"); | |
| ctx.beginPath(); | |
| ctx.rect(0, 0, 1000, 1000); | |
| ctx.fillStyle = "#1ac600"; | |
| ctx.fill(); | |
| function loadDoc(url) { | |
| var xhttp = new XMLHttpRequest(); | |
| xhttp.onreadystatechange = function() { | |
| if (this.readyState == 4 && this.status == 200) { | |
| return this.responseText; | |
| } | |
| }; | |
| xhttp.open("GET", url, true); | |
| xhttp.send(); | |
| } | |
| var jsonData = '{"Object1": {"Width": "40","Height": "40", "Color": "blue", "Left": "0", "Top": "0"}, "Object2": {"Width": "40", "Height": "40", "Color": "red", "Left": "100", "Top": "100"}}'; | |
| var gameData = JSON.parse(jsonData); | |
| function drawObject(left, top, size1, size2, fillcolour) { | |
| ctx.beginPath(); | |
| ctx.rect(left, top, size1, size2); | |
| ctx.fillStyle = fillcolour; | |
| ctx.fill(); | |
| } | |
| for(var objectData in gameData) { | |
| document.getElementById("myCanvas").innerHTML = drawObject(objectData.Left, objectData.Top, objectData.Width, objectData.Height, objectData.Color); | |
| } | |
| </script> | |
| </center> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment