Skip to content

Instantly share code, notes, and snippets.

@Esmala

Esmala/index.html

Last active July 30, 2017 13:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Esmala/c92f293765d4c799e1fd18e6d218c636 to your computer and use it in GitHub Desktop.
Save Esmala/c92f293765d4c799e1fd18e6d218c636 to your computer and use it in GitHub Desktop.
Download ZIP
Shep's simplistic city building game
Raw
index.html
<!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