*{ font-family: calibri; font-size: 16px; } canvas { background-color: #101820ff; } button{ background: black; color: white; margin: 5px; height: 25px; width: 25px; border: none; font-weight: bold; border-radius: 3px; box-shadow: 4px 4px 2px gray } button:hover{ color: #3DCC03; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5), 0 3px 6px 0 rgba(0, 0, 0, 0.5); transition: 0.3s; }

Maze 1

Menu
Go to Green line
to Won
using the controller below

/\
< >
\/

Warning! ! !

Avoid to Crash
to the RED obstacle!

var myGameArea; var myGamePiece; var obs_1;var obs_2;var obs_3;var obs_4;var obs_5;var obs_6;var obs_7;var obs_8;var obs_9;var obs_10;var obs_11;var obs_12;var obs_13;var obs_14;var obs_15;var obs_16;var obs_17;var obs_18;var obs_19;var obs_20;var obs_21;var obs_22;var obs_23;var obs_24;var obs_25;var obs_26;var obs_27;var obs_28;var obs_29;var obs_30;var obs_31;var obs_32;var obs_33;var obs_34;var obs_35;var obs_36;var obs_37;var obs_38; var finish; function startGame() { myGameArea = new gamearea(); myGamePiece = new component(27, 27, &quot;#33AA02&quot;, 50, 35);/<em>size,size,color,margin-left,margin-top</em>/ obs_1 = new component(10, 438, &quot;darkred&quot;, 2, 0);/<em>long-left</em>/ obs_2 = new component(12, 438, &quot;darkred&quot;, 788, 0);/<em>long-right</em>/ obs_3 = new component(800, 11, &quot;darkred&quot;, 2, 0);/<em>long-top</em>/ obs_4 = new component(800, 11, &quot;darkred&quot;, 2, 428);/<em>long-bottom</em>/ obs_5 = new component(12, 149, &quot;darkred&quot;, 58, 98);/<em>vertical left-Right-top-bottom 1</em>/ obs_6 = new component(12, 192, &quot;darkred&quot;, 114, 0);/<em>vertical left-Right-top-bottom 2</em>/ obs_7 = new component(12, 380, &quot;darkred&quot;, 171, 48);/<em>vertical left-Right-top-bottom 3</em>/ obs_8 = new component(12, 105, &quot;darkred&quot;, 228, 45);/<em>vertical left-Right-top-bottom 4</em>/ obs_9 = new component(12, 150, &quot;darkred&quot;, 228, 236);/<em>vertical left-Right-top-bottom 5</em>/ obs_10 = new component(12, 153, &quot;darkred&quot;, 394, 141);/<em>vertical left-Right-top-bottom 6</em>/ obs_11 = new component(12, 339, &quot;darkred&quot;, 451, 0);/<em>vertical left-Right-top-bottom 7</em>/ obs_12 = new component(12, 338, &quot;darkred&quot;, 508, 48);/<em>vertical left-Right-top-bottom 8</em>/ obs_13 = new component(12, 338, &quot;darkred&quot;, 565, 97);/<em>vertical left-Right-top-bottom 9</em>/ obs_14 = new component(12, 338, &quot;darkred&quot;, 622, 48);/<em>vertical left-Right-top-bottom 10</em>/ obs_15 = new component(12, 239, &quot;darkred&quot;, 675, 46);/<em>vertical left-Right-top-bottom 11</em>/ obs_16 = new component(12, 100, &quot;darkred&quot;, 675, 331);/<em>vertica left-Rightl-top-bottom 12</em>/ obs_17 = new component(12, 108, &quot;darkred&quot;, 731, 237);/<em>vertical left-Right-top-bottom 13</em>/ obs_18 = new component(120, 12, &quot;darkred&quot;, 58, 236);/<em>horizontal left-Right-top-bottom 1</em>/ obs_19 = new component(116, 12, &quot;darkred&quot;, 2, 285);/<em>horizontal left-Right-top-bottom 2</em>/ obs_20 = new component(116, 12, &quot;darkred&quot;, 61, 331);/<em>horizontal left-Right-top-bottom 3</em>/ obs_21 = new component(116, 12, &quot;darkred&quot;, 2, 379);/<em>horizontal left-Right-top-bottom 4</em>/ obs_22 = new component(176, 12, &quot;darkred&quot;, 230, 45);/<em>horizontal left-Right-top-bottom 5</em>/ obs_23 = new component(176, 12, &quot;darkred&quot;, 283, 96);/<em>horizontal left-Right-top-bottom 6</em>/ obs_24 = new component(176, 12, &quot;darkred&quot;, 228, 141);/<em>horizontal left-Right-top-bottom 7</em>/ obs_25 = new component(165, 12, &quot;darkred&quot;, 181, 188);/<em>horizontal left-Right-top-bottom 8</em>/ obs_26 = new component(115, 12, &quot;darkred&quot;, 230, 236);/<em>horizontal left-Right-top-bottom 9</em>/ obs_27 = new component(121, 12, &quot;darkred&quot;, 285, 284);/<em>horizontal left-Right-top-bottom 10</em>/ obs_28 = new component(12, 55, &quot;darkred&quot;, 285, 284);/<em>vertical 6 nalipatan</em>/ obs_29 = new component(167, 12, &quot;darkred&quot;, 295, 327);/<em>horizontal left-Right-top-bottom 11</em>/ obs_30 = new component(292, 12, &quot;darkred&quot;, 228, 375);/<em>horizontal left-Right-top-bottom 12</em>/ obs_31 = new component(126, 12, &quot;darkred&quot;, 508, 47);/<em>horizontal left-Right-top-bottom 13</em>/ obs_32 = new component(50, 12, &quot;darkred&quot;, 630, 331);/<em>horizontal left-Right-top-bottom 14</em>/ obs_33 = new component(60, 12, &quot;darkred&quot;, 680, 46);/<em>horizontal left-Right-top-bottom 15</em>/ obs_34 = new component(60, 12, &quot;darkred&quot;, 735, 96);/<em>horizontal left-Right-top-bottom 16</em>/ obs_35 = new component(60, 12, &quot;darkred&quot;, 680, 140);/<em>horizontal left-Right-top-bottom 17</em>/ obs_36 = new component(60, 12, &quot;darkred&quot;, 735, 188);/<em>horizontal left-Right-top-bottom 18</em>/ obs_37 = new component(60, 12, &quot;darkred&quot;, 680, 237);/<em>horizontal left-Right-top-bottom 19</em>/ obs_38 = new component(60, 12, &quot;darkred&quot;, 731, 336);/<em>horizontal left-Right-top-bottom 20</em>/ finish = new component(89, 10, &quot;green&quot;, 693, 380);/<em>finish line</em>/</p> <pre class="language-nolang"><code>myGameArea.start(); </code></pre> <p>} function gamearea() { this.canvas = document.createElement(&quot;canvas&quot;); this.canvas.width = 800;/<em>width</em>/ this.canvas.height = 440;/<em>height</em>/ document.getElementById(&quot;canvascontainer&quot;).appendChild(this.canvas); this.context = this.canvas.getContext(&quot;2d&quot;); this.start = function() { this.interval = setInterval(updateGameArea, 18); } this.clear = function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); }<br> } function component(width, height, color, x, y) { this.width = width; this.height = height; this.x = x; this.y = y; this.speedX = 0; this.speedY = 0;<br> this.update = function() { ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); } this.crashWith = function(otherobj) { var myleft = this.x; var myright = this.x + (this.width); var mytop = this.y; var mybottom = this.y + (this.height); var otherleft = otherobj.x; var otherright = otherobj.x + (otherobj.width); var othertop = otherobj.y; var otherbottom = otherobj.y + (otherobj.height); var crash = true; if ((mybottom &lt; othertop) || (mytop &gt; otherbottom) || (myright &lt; otherleft) || (myleft &gt; otherright)) { crash = false; } return crash; } } function updateGameArea() { if (myGamePiece.crashWith(obs_1) || myGamePiece.crashWith(obs_2) || myGamePiece.crashWith(obs_3) || myGamePiece.crashWith(obs_4) || myGamePiece.crashWith(obs_5) || myGamePiece.crashWith(obs_6) || myGamePiece.crashWith(obs_7) || myGamePiece.crashWith(obs_8) || myGamePiece.crashWith(obs_9) || myGamePiece.crashWith(obs_10) || myGamePiece.crashWith(obs_11) || myGamePiece.crashWith(obs_12) || myGamePiece.crashWith(obs_13) || myGamePiece.crashWith(obs_14) || myGamePiece.crashWith(obs_15) || myGamePiece.crashWith(obs_16) || myGamePiece.crashWith(obs_17) || myGamePiece.crashWith(obs_18) || myGamePiece.crashWith(obs_19) || myGamePiece.crashWith(obs_20) || myGamePiece.crashWith(obs_21) || myGamePiece.crashWith(obs_22) || myGamePiece.crashWith(obs_23) || myGamePiece.crashWith(obs_24) || myGamePiece.crashWith(obs_25) || myGamePiece.crashWith(obs_26) || myGamePiece.crashWith(obs_27) || myGamePiece.crashWith(obs_28) || myGamePiece.crashWith(obs_29) || myGamePiece.crashWith(obs_30) || myGamePiece.crashWith(obs_31) || myGamePiece.crashWith(obs_32) || myGamePiece.crashWith(obs_33) || myGamePiece.crashWith(obs_34) || myGamePiece.crashWith(obs_35) || myGamePiece.crashWith(obs_36) || myGamePiece.crashWith(obs_37) || myGamePiece.crashWith(obs_38) ) { window.location = &quot;lvl1.html&quot;; alert(&quot;Penalty!&quot;); } else if (myGamePiece.crashWith(finish)) { window.location = &quot;lvl2.html&quot;; alert(&quot;Congratulation!!!&quot;); } else { myGameArea.clear(); obs_1.update();obs_2.update();obs_3.update();obs_4.update();obs_5.update();obs_6.update();obs_7.update();obs_8.update();obs_9.update();obs_10.update();obs_11.update();obs_12.update();obs_13.update();obs_14.update();obs_15.update();obs_16.update();obs_17.update();obs_18.update();obs_19.update();obs_20.update();obs_21.update();obs_22.update();obs_23.update();obs_24.update();obs_25.update();obs_26.update();obs_27.update();obs_28.update();obs_29.update();obs_30.update();obs_31.update();obs_32.update();obs_33.update();obs_34.update();obs_35.update();obs_36.update();obs_37.update();obs_38.update(); finish.update(); myGamePiece.x += myGamePiece.speedX; myGamePiece.y += myGamePiece.speedY;<br> myGamePiece.update(); } } function moveup(e) { myGamePiece.speedY = -1; } function movedown() { myGamePiece.speedY = 1; } function moveleft() { myGamePiece.speedX = -1; } function moveright() { myGamePiece.speedX = 1; } function clearmove(e) { myGamePiece.speedX = 0; myGamePiece.speedY = 0; } startGame();

Built With

Share this project:
×

Updates