Create basic images

dot.svg

@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   sodipodi:docname="dot.svg"
+   inkscape:export-ydpi="5.0500002"
+   inkscape:export-xdpi="5.0500002"
+   inkscape:export-filename="C:\Users\sigon\OneDrive\Documents\ProjectM\ProjectM\dot.png"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 210 297"
+   height="297mm"
+   width="210mm">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     inkscape:window-maximized="0"
+     inkscape:window-y="0"
+     inkscape:window-x="1946"
+     inkscape:window-height="1074"
+     inkscape:window-width="1274"
+     showgrid="false"
+     inkscape:document-rotation="0"
+     inkscape:current-layer="layer3"
+     inkscape:document-units="mm"
+     inkscape:cy="881.92457"
+     inkscape:cx="514.30548"
+     inkscape:zoom="0.49497475"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     style="display:none"
+     inkscape:label="Writer"
+     id="layer2"
+     inkscape:groupmode="layer">
+    <rect
+       inkscape:export-ydpi="4.0677924"
+       inkscape:export-xdpi="4.0677924"
+       ry="0"
+       y="52.919369"
+       x="83.388092"
+       height="198.84853"
+       width="44.901279"
+       id="rect1010"
+       style="fill:#206476;fill-opacity:1;fill-rule:evenodd;stroke:#bcbcbc;stroke-width:0.964999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       inkscape:export-ydpi="4.0677924"
+       inkscape:export-xdpi="4.0677924"
+       transform="rotate(90)"
+       style="fill:#206476;fill-opacity:1;fill-rule:evenodd;stroke:#bcbcbc;stroke-width:0.964999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1010-9"
+       width="44.901279"
+       height="198.84853"
+       x="128.82391"
+       y="-205.79753"
+       ry="0" />
+  </g>
+  <g
+     style="display:none"
+     id="layer1"
+     inkscape:groupmode="layer"
+     inkscape:label="Dot">
+    <circle
+       r="34.773811"
+       cy="149.80829"
+       cx="104.04629"
+       id="path889"
+       style="fill:#a1a1a1;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+  <g
+     inkscape:label="Arrow"
+     id="layer3"
+     inkscape:groupmode="layer">
+    <path
+       id="path1032"
+       d="M 130.96875,97.895832 V 234.9122 l 70.96503,-70.96503 -71.15402,-71.154016 z"
+       style="fill:#c0c0c0;fill-opacity:1;stroke:#888888;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
+  </g>
+</svg>

game.js

@@ -1,5 +1,20 @@
 var canvas;
 
+const IMAGE_CONVEYOR = new Image();
+IMAGE_CONVEYOR.src ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAANCAYAAADISGwcAAAACXBIWXMAAADGAAAAxgGwdJvFAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAj5JREFUOI2l1V1IU2Ecx/Hv2dnOfKlIirpRb3xJyJokBFl04bVeF0QvFhKGiImGWzrdUDY0dFik2Jt0YQVGRBJBb2Io5lstMs2yi6LoSgqlbWc753TVbJ0zJfe7/H84D7/n/C8ewTc4pGGQsBzCIlmNaA2TsUiSoRnFFA/mX0/x9O4tQ5sefsbk88eG9mLwHu8mxhIvADDY18vIw/u6uaao9Pu8+EeGdaZEwtzwNPHBP514AU3TGOj2Mfrogc5UReFmu5uZ8VGdheUQV9x2Ft76EysAUFKyn4HLnUwNPYmZS1aJ4uJC+rzNvH81GWNbtqZhs2Vx1W3n8/xsYgWqqw9RWnqA/k4Pb0ZXfrkgCDQ3naJoXz7XWs7H3NZiEWlvqyRvRwY9zjq+fvq4/gKCIFBTc5jNaRu4c/ECocCvqImiCYfjGGZRoN/nRVWUqCUlSTQ2liEHA9zualt/gUhEoaGhl6WlIGUON9bklKiFQjL19m4wmTlR78IkilFbXg5gd/SQsnETR2sb455vXquAy3Wd8YlZyp0esncVROeaqlJbd4m5uS9UtHaQkZ0bNTkUpqqqk2/ff1Dp7WJbesb/F1BVFYCxlzOcdLjJLShcMU1FlsP4/QucdrWRmZMX893i4k+CssKZ1g62p2euesG4K9A0DZMocvyck517i/5FLJKVcqeHrHybzpJTU6lo6SA9K5e1EreAIAgcOVvP7qKDOhPNZsrsLnJse3T2p9jfK1ktQry3QIlEEM3GG1qvGeU3ALjbp7CJK1kAAAAASUVORK5CYII="
+const IMAGE_WRITER = new Image();
+IMAGE_WRITER.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAACgAAAAoAFdfrujAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAOhJREFUWIVjZCARhDX17njy4Ys5NjklYYHlS6rzs0gxj4VUB7z+/J352aevAtjkeDnYSTWOgYlkHVQGow4YdcCoA0YdMOAOYIxtm3T61ddvrETr+P9f6eefv7zYpNhZWN4yMDI8IdYoMW6u3yx337xXwVW2kwGEoZgo8Jnv54cBj4JRB4w6gEVfUmSOojD/f2I1fPv9J+z9tx/y2OREuLkusLMw7SbWLD42VkZGYhXDgGNpy+777z+5YJNTFxOavrOtgqQ24YBHwagDRh0w6oBRBwy4A0juHYvycv79+ffvB6xy3JwkOwAAdhs7qElosC8AAAAASUVORK5CYII="
+const IMAGE_ARROW = new Image();
+IMAGE_ARROW.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAPCAYAAAAoAdW+AAAACXBIWXMAAAC/AAAAvwFipAVzAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQlJREFUGJVdzrGRglAUheEfeD4YjB4WYCQJWILRFgAFODSxySaWsP1sAQQWQEgCZAQwOs7AA5EN3MFxT/rNufcYp9Np7rqONE05n8/85Rv4MtfrNa7rcjgciOMYKeUMfAI/pmVZeJ6HbdvsdjuSJDE2mw3Ah2kYBmEYopRCSolSiuPxiO/7mABCCPb7PUopVqsVUkqiKHoigJRyuSCEAHghgOM4BEGAUgrLshD8i+u6bLdbpml6bwL0fU9Zllwul3fUWpNlGU3ToLV+4TiOZFlG27bc73eqqnriNE0LDMMAQFEUmPM8L6C1Xl4URYH5eDxo25au6xa4Xq/UdY243W70ff+2OM9zAH4BBIduqM7GcJMAAAAASUVORK5CYII="
+const IMAGE_BOT = new Image();
+IMAGE_BOT.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAgCAYAAAD5VeO1AAAACXBIWXMAAABrAAAAawEOX1tRAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAhNJREFUSIntk29IE2Ecx7+3u905162x2IS5cbgj0Ep0w6G9EQshDIwZFRq+7IVQ+NK3e7FXgi/TIAoDX0Rofxn4Ynu34QIXV4Nhb+auEa5DzjxLt/OY1wtx2Fw1ohe9uM+rh9/zPB/4fnkewMDA4P+FaOTQnf7+jh6fj3Pb7cTnrS0tns9nXyQSxb+WR0Ih/kpn5z0nyw57HA6eMpmqe3v7+5WN7e33BVleeiYIDx7G40o9B1lv+HpycvRGMPiSd7kuvxNFx2o+j7MtLaBIEkVFwZNk0mSzWNwD7e2D3a2t1857vak3gvDlj/L74+OBEb//FUNRp6/PziItitgplzGfTGIkEMDgzAwueDx4nEjgbS6H2319zjNW64AsSfMZSdJ+W8tqODzdw3FTAJDK5XCR5wEAu6oKK8NAq1RgJknouo61YhHn3G4AwGI6ffPW3NzScZepVg5d14+WR2IAsDIMAMBMHoYlCKIqBoAD4KBWdUKeWl9/ulMqfTs++66q6A6H0Twxgd5IBGXtp/QQNzezzwVhudZ1ovPlTEYKtrV9dNpsl5pp2goANEXhVFMTfE4nrnZ1wc9xIIjDRkVZ/hDLZsemo9GNWtcvn+LU0JAnFAjcdbHssNtu77DQdDWlUiqpkqKkP8ny4kIs9mghk9mt52joE40Gg95enudJs5nd0zQ5urKyliwUvjZy18DAwOBf8wM6KLN5YP6+kAAAAABJRU5ErkJggg=="
+const IMAGE_BRANCH = new Image();
+IMAGE_BRANCH.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAYAAAB2+A+pAAAACXBIWXMAAAC/AAAAvwFipAVzAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABK5JREFUSIm1ls1rG0cYh59dSdGHv+TdBCRa2wQhhVqy40JIDoHaJK1JQijpISEUCqW3/AG999ZTb6VQeigtPbRpUvqRthAntO4ph1LT4KxsOR+yrdhJrcqKVitZu9rdHlarWIolHIf+QKCdeed9dn4z887C3hQBrgGfAn17zPHcehsoAnbjlwXe+D+BEvC1C5yYmLBjsZgLt4DPgIHdJhN2Gfc68DnwcigUsk+dOiXEYjEAFhcXmZmZsavVqgCsA5eAH14UHAA+AN4HxEQiwfT0NMFgsCVI0zRu3LhBJpNxm75tvMC/ewGngMvAK36/3z558qSQTCa7vmU6nebmzZvu7HPAO8DvO8V6OuR4F/geiA4NDXH+/HlhZGSkKxQgGo0yOjoqFItFCoVCfwO8D/gDZx90BAeAj4APAd+xY8c4c+YMwWCQgYEBarVaV3A4HEYUReLxOOFwmGw2K1iW9RpwGvgNKOwETgDXgTeDwaB97tw5YWJiAo/HgyzLiKJItVrtCu7t7aWnpwdd15FlmUQiITx8+BBN014C3sOx//Z28FvAL8BwNBrlwoULQiQSQRRFJEkiFotRKpXQNK0ruKenh8OHD1MulzFNE5/Px/j4OIIgkMvl9jU4SWDGA3zcsNd/9OhRzp49SyAQaELj8TiyLLO2trYr8NDQEAcOHEBVVQzDwDRNhoeHiUajZLNZ2zCMJHBaBF4FmJqaYnJyElEUm/bG43EkSeoK20k+n4+xsTFkWW4evYMHDzI1NeWeoqwIXAUoFosAeDweJEkikUjsCerK6/UyNjaGJEmEQiEAlpeX3e6fROA7wF5aWkIQBAYHBzl06BDhcHjPUFcej4dUKkUoFMLr9fLgwQNwSuyvIk6Rn9M0jdXVVXRdJ5fLYVlWt5y7kmVZZDIZdF1neXmZSqUC8CewJjZirgIsLS1RKpXY2NhAUZQXgluWRTqdJp/PUyqVuH//vtv1M4ALvgJOwQen9ubzeebn5zFN87mhpmmiKAr5fB5VVQG4d++e230NwNt4yACKqqqjjx49IhKJoGkatm1z584d2mv0rVu3WFlZwe/3c/z4cfbv398CTafTFAoFyuUyAKqqsrGxAc7t9Re0Vq4IMBkKhXDrsmEY1Ot1SqUSpmm6a0QwGOTIkSP09fUxOztLKpUCnHNcKBQoFAotZ15RFNfqy8CP8NRqaNidTqexbbvZWKlU2NzcbLFclmUEQaBWq9Hf398y23YoPF1CnIuHdvBt4O8nT56Qy+VaBlYqFTRNQxCe3qJzc3MoisKJEyeabaqqNl1xVS6X3XybOHfBM2CALwHm5+dp19bWVssuf/z4MdPT0/j9/mabYRjPjFtYWHAdvALoncBfAcbi4iK6rtNNyWSyxYFOWlhYcP9+s729HfwPcN0wDO7evds1Yfu676Riscj6+rqbd7YbGOAL2Nnu7RofHycQCHSNaZttfXuf95loZ7tvrqysDKqqSl/f7r/XTdPEMAwsy0LX9e3gy+2xnRbpE+CSz+fD4+n0WQaiKGJZFvV6nXq93ilsFRjBuRya2mnG4Nh90TCM9p3aC/jaYlUcGzWcXVsFtoAaUMEpkXbbGP4DeoT7jGhhWUQAAAAASUVORK5CYII="
+const IMAGE_QUESTIONMARK = new Image();
+IMAGE_QUESTIONMARK.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAACXBIWXMAAAO7AAADuwGu9yalAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAgtJREFUSInVlM2rMVEAxp8zXqYJsZGPha8hJIqyUFI2KPHf+K9YyV8wxUIiFpY+k4gFM8nn3MVbc++5uIbexX2f3fOcM79z5jlnhpTLZfl0OmGxWGA+n2O1WmG9XkMURRyPR8iyDJZlYTAYYLPZ4PF44PP5wDAMvor4/X55OBzifD5DrfR6PTKZDEKh0CcIgKya8E3RaBTZbBaEEPz5PkgIgcVigdFoBMdxuF6v2G63WCwWN7vu9XrgOA7pdPoviGEYeL1ehMNhuFwusCx7s/rhcECn00Gj0cDlclHyVquFUCgEEolE5GQyCZPJpOp1hsMhqtUqZPmzkXg8Diafz6uGAFBO7avG4zGYB/N/lNPppPxut3sPpNPpbrK3QJIkUV6v178Hmk6nlHc4HK+DlsslRqMRlQUCgddA+/0etVqNOnq73Q6e529v9iNJkoRKpYLNZqNkWq0WuVwOANSBJpMJ6vU6RFFUMo1Gg0KhAIvF8hwkSRIEQUC/36dylmVRKpXgdruV7C7ocrmg3W6j2WzieDxSYzabDcViEWazmcrvggRBQKvVojKdTodUKoV4PA5CyM0zd0HX65XyPM8jm83CYDDcmw5A5c1OJBI/QlSD1Oj3ge6W7XA4qP/zs34egoLBIILB4Es7+k86GgwG2G63irdardR3pRrU7XYxm80UH4vFnoJ+X0f/DPQBTWisRXkNpbwAAAAASUVORK5CYII="
+const IMAGE_WRITER = new Image();
+IMAGE_WRITER.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAACgAAAAoAFdfrujAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAOhJREFUWIVjZCARhDX17njy4Ys5NjklYYHlS6rzs0gxj4VUB7z+/J352aevAtjkeDnYSTWOgYlkHVQGow4YdcCoA0YdMOAOYIxtm3T61ddvrETr+P9f6eefv7zYpNhZWN4yMDI8IdYoMW6u3yx337xXwVW2kwGEoZgo8Jnv54cBj4JRB4w6gEVfUmSOojD/f2I1fPv9J+z9tx/y2OREuLkusLMw7SbWLD42VkZGYhXDgGNpy+777z+5YJNTFxOavrOtgqQ24YBHwagDRh0w6oBRBwy4A0juHYvycv79+ffvB6xy3JwkOwAAdhs7qElosC8AAAAASUVORK5CYII="
+
 const WAITING = 0;
 const RUNNING = 1;
 const REVIEWING = 2;
@@ -45,6 +60,12 @@ var WRITERRIGHT = {type:"WRITER",direction:RIGHT,color:RED}
 var WRITERUP = {type:"WRITER",direction:UP,color:RED}
 
 
+var GRID_W = 32
+var GRID_H = 32
+var GRID_X = 20
+var GRID_Y = 20
+
+
 var lastGameUpdate = 0;
 var gameSpeed = 1000/1;
 
@@ -255,7 +276,7 @@ function runBot(testing) {
 			gameState = REVIEWING
 			BOT_STATE = DEAD
 		}
-		if (!testing){renderGame()}
+		//if (!testing){renderGame()}
 	}
 }
 
@@ -273,11 +294,11 @@ function placeBot(x,y) {
 }
 
 function setupGame() {
-	canvas = document.createElement("CANVAS");
-	canvas.style.width="100%"
-	canvas.style.height="100%"
+	canvas = document.createElement("canvas");
+	canvas.width=568
+	canvas.height=320
 	document.getElementById("game").appendChild(canvas)
-	
+	canvas.addEventListener("mousemove",updateMouse)
 	//gameGrid = [...createGrid(5,5)]
 }
 
@@ -309,23 +330,91 @@ function step() {
 	}
 }
 
+function updateMouse(e) {
+	//console.log(getMousePos(canvas,e))
+}
+
+function getMousePos(canvas, evt) {
+	var rect = canvas.getBoundingClientRect();
+	return {
+	  x: evt.clientX - rect.left,
+	  y: evt.clientY - rect.top
+	};
+}
+
 function renderGame() {
 	var displayGrid = []
 	displayGrid = deepCopy(gameGrid)
 	if (BOT_X!==-1&&BOT_Y!==-1) {
 		displayGrid[BOT_Y][BOT_X]["BOT"]=true
 	}
-	console.log("Tape: "+BOT_TAPE)
-	console.log(displayGrid)
+	/*console.log("Tape: "+BOT_TAPE)
+	console.log(displayGrid)*/
+}
+
+function colorToHex(r,g,b) {
+	function hex(col) {
+		function toHex(val) {
+			switch (Math.floor(val)) {
+				case 10:{
+					return "a";
+				}break;
+				case 11:{
+					return "b";
+				}break;
+				case 12:{
+					return "c";
+				}break;
+				case 13:{
+					return "d";
+				}break;
+				case 14:{
+					return "e";
+				}break;
+				case 15:{
+					return "f";
+				}break;
+				default:{
+					return String(Math.floor(val));
+				}
+			}
+		}
+		var placeValue1=col%16;
+		var placeValue2=col/16;
+		return toHex(placeValue2)+toHex(placeValue1)
+	}
+	return "#"+hex(r)+hex(g)+hex(b);
+}
+
+function drawImage(x,y,img,ctx,degrees){
+    //context.clearRect(0,0,canvas.width,canvas.height);
+    ctx.save();
+    ctx.translate(x,y);
+    ctx.rotate(degrees*Math.PI/180);
+    ctx.drawImage(img,-img.width/2,-img.height/2);
+    ctx.restore();
 }
 
 function draw() {
 	var ctx = canvas.getContext("2d")
-	ctx.fillStyle="#FFF"
+	if (Math.random()<0.01) {
+		ctx.fillStyle="#a3adab"
+	} else {
+		ctx.fillStyle="#b5c4c1"
+	}
 	ctx.fillRect(0,0,canvas.width,canvas.height)
-	ctx.beginPath();
-	
+	renderGame()
+	for (var y=0;y<=gameGrid.length;y++) {
+		ctx.moveTo(GRID_X, GRID_Y+GRID_H*y);
+		ctx.lineTo(GRID_X+GRID_W*gameGrid.length, GRID_Y+GRID_H*y);
+	}
+	for (var x=0;x<=gameGrid.length;x++) {
+		ctx.moveTo(GRID_X+GRID_W*x, GRID_Y);
+		ctx.lineTo(GRID_X+GRID_W*x, GRID_Y+GRID_H*gameGrid.length);
+	}
+	ctx.fillStyle="#000000"
 	ctx.stroke();
+	//drawImage(0,0,IMAGE_CONVEYOR,ctx,0)
 }
 
 function ConsumeTape() {

game.test.js

@@ -15,7 +15,7 @@ var TestSuite;
 class describe {
 	constructor(testname) {
 		this.testname=testname
-		this.beforecb = undefined;
+		this.beforecb = ()=>{};
 		this.cb = undefined;
 		this.totaltests = 0;
 		this.passedtests = 0;
@@ -46,7 +46,7 @@ class describe {
 
 function expect(testval1,testval2,name) {
 	if (testval1!==testval2) {
-		console.log("    Test Failed!"+" ("+(new Date().getTime()-TestSuite.starttime)+"ms)"+((name)?` - ${name}`:""))
+		console.log("    Test Failed! Expected "+testval2+" but got "+testval1+". ("+(new Date().getTime()-TestSuite.starttime)+"ms)"+((name)?` - ${name}`:""))
 		TestSuite.totaltests++
 		testsPass=false
 	} else 
@@ -453,6 +453,15 @@ function runTests() {
 	})
 	.showResults()
 	
+	TestSuite = new describe("Color Hex Conversion")
+	TestSuite
+	.it("converts a color to hex",()=>{
+		expect(colorToHex(0,0,0),"#000000")
+		expect(colorToHex(66, 135, 245),"#4287f5")
+		expect(colorToHex(245, 66, 221),"#f542dd")
+		expect(colorToHex(58, 79, 55),"#3a4f37")
+	}).showResults()
+	
 	if (testsPass===undefined) {
 		testsPass=true
 	}
@@ -469,16 +478,22 @@ function runGame() {
 	console.log("Running")
 }
 
-loadScript("game.js",runTests)
+var RUNTESTS = true;
 
-initializeGame()
+if (RUNTESTS) {
+	loadScript("game.js",runTests)
 
-function initializeGame() {
-	if (testsPass) {
-		runGame()
-	} else {
-		setTimeout(()=>{
-			initializeGame()
-		},1000)
+	initializeGame()
+
+	function initializeGame() {
+		if (testsPass) {
+			runGame()
+		} else {
+			setTimeout(()=>{
+				initializeGame()
+			},1000)
+		}
 	}
-}
+} else {
+	loadScript("game.js",runGame)
+}

index.html

@@ -1,4 +1,10 @@
-<body>
-	<div id="game"></div>
+<body style="background-color:gray;">
+	<center>
+		<div id="game" style="margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);"></div>
+	</center>
 	<script type="text/javascript" src="game.test.js"></script>
 </body>