-
-
level 1
*{
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;
}
Go to Green line
to Won
using the controller below /\
< >
\/
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, "#33AA02", 50, 35);/*size,size,color,margin-left,margin-top*/ obs_1 = new component(10, 438, "darkred", 2, 0);/*long-left*/ obs_2 = new component(12, 438, "darkred", 788, 0);/*long-right*/ obs_3 = new component(800, 11, "darkred", 2, 0);/*long-top*/ obs_4 = new component(800, 11, "darkred", 2, 428);/*long-bottom*/ obs_5 = new component(12, 149, "darkred", 58, 98);/*vertical left-Right-top-bottom 1*/ obs_6 = new component(12, 192, "darkred", 114, 0);/*vertical left-Right-top-bottom 2*/ obs_7 = new component(12, 380, "darkred", 171, 48);/*vertical left-Right-top-bottom 3*/ obs_8 = new component(12, 105, "darkred", 228, 45);/*vertical left-Right-top-bottom 4*/ obs_9 = new component(12, 150, "darkred", 228, 236);/*vertical left-Right-top-bottom 5*/ obs_10 = new component(12, 153, "darkred", 394, 141);/*vertical left-Right-top-bottom 6*/ obs_11 = new component(12, 339, "darkred", 451, 0);/*vertical left-Right-top-bottom 7*/ obs_12 = new component(12, 338, "darkred", 508, 48);/*vertical left-Right-top-bottom 8*/ obs_13 = new component(12, 338, "darkred", 565, 97);/*vertical left-Right-top-bottom 9*/ obs_14 = new component(12, 338, "darkred", 622, 48);/*vertical left-Right-top-bottom 10*/ obs_15 = new component(12, 239, "darkred", 675, 46);/*vertical left-Right-top-bottom 11*/ obs_16 = new component(12, 100, "darkred", 675, 331);/*vertica left-Rightl-top-bottom 12*/ obs_17 = new component(12, 108, "darkred", 731, 237);/*vertical left-Right-top-bottom 13*/ obs_18 = new component(120, 12, "darkred", 58, 236);/*horizontal left-Right-top-bottom 1*/ obs_19 = new component(116, 12, "darkred", 2, 285);/*horizontal left-Right-top-bottom 2*/ obs_20 = new component(116, 12, "darkred", 61, 331);/*horizontal left-Right-top-bottom 3*/ obs_21 = new component(116, 12, "darkred", 2, 379);/*horizontal left-Right-top-bottom 4*/ obs_22 = new component(176, 12, "darkred", 230, 45);/*horizontal left-Right-top-bottom 5*/ obs_23 = new component(176, 12, "darkred", 283, 96);/*horizontal left-Right-top-bottom 6*/ obs_24 = new component(176, 12, "darkred", 228, 141);/*horizontal left-Right-top-bottom 7*/ obs_25 = new component(165, 12, "darkred", 181, 188);/*horizontal left-Right-top-bottom 8*/ obs_26 = new component(115, 12, "darkred", 230, 236);/*horizontal left-Right-top-bottom 9*/ obs_27 = new component(121, 12, "darkred", 285, 284);/*horizontal left-Right-top-bottom 10*/ obs_28 = new component(12, 55, "darkred", 285, 284);/*vertical 6 nalipatan*/ obs_29 = new component(167, 12, "darkred", 295, 327);/*horizontal left-Right-top-bottom 11*/ obs_30 = new component(292, 12, "darkred", 228, 375);/*horizontal left-Right-top-bottom 12*/ obs_31 = new component(126, 12, "darkred", 508, 47);/*horizontal left-Right-top-bottom 13*/ obs_32 = new component(50, 12, "darkred", 630, 331);/*horizontal left-Right-top-bottom 14*/ obs_33 = new component(60, 12, "darkred", 680, 46);/*horizontal left-Right-top-bottom 15*/ obs_34 = new component(60, 12, "darkred", 735, 96);/*horizontal left-Right-top-bottom 16*/ obs_35 = new component(60, 12, "darkred", 680, 140);/*horizontal left-Right-top-bottom 17*/ obs_36 = new component(60, 12, "darkred", 735, 188);/*horizontal left-Right-top-bottom 18*/ obs_37 = new component(60, 12, "darkred", 680, 237);/*horizontal left-Right-top-bottom 19*/ obs_38 = new component(60, 12, "darkred", 731, 336);/*horizontal left-Right-top-bottom 20*/ finish = new component(89, 10, "green", 693, 380);/*finish line*/ myGameArea.start(); } function gamearea() { this.canvas = document.createElement("canvas"); this.canvas.width = 800;/*width*/ this.canvas.height = 440;/*height*/ document.getElementById("canvascontainer").appendChild(this.canvas); this.context = this.canvas.getContext("2d"); this.start = function() { this.interval = setInterval(updateGameArea, 18); } this.clear = function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } 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; 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 < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > 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 = "lvl1.html"; alert("Penalty!"); } else if (myGamePiece.crashWith(finish)) { window.location = "lvl2.html"; alert("Congratulation!!!"); } 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; 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();
Maze 1
MenuGo to Green line
to Won
using the controller below /\
< >
\/
Warning! ! !
Avoid to Crashto 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, "#33AA02", 50, 35);/*size,size,color,margin-left,margin-top*/ obs_1 = new component(10, 438, "darkred", 2, 0);/*long-left*/ obs_2 = new component(12, 438, "darkred", 788, 0);/*long-right*/ obs_3 = new component(800, 11, "darkred", 2, 0);/*long-top*/ obs_4 = new component(800, 11, "darkred", 2, 428);/*long-bottom*/ obs_5 = new component(12, 149, "darkred", 58, 98);/*vertical left-Right-top-bottom 1*/ obs_6 = new component(12, 192, "darkred", 114, 0);/*vertical left-Right-top-bottom 2*/ obs_7 = new component(12, 380, "darkred", 171, 48);/*vertical left-Right-top-bottom 3*/ obs_8 = new component(12, 105, "darkred", 228, 45);/*vertical left-Right-top-bottom 4*/ obs_9 = new component(12, 150, "darkred", 228, 236);/*vertical left-Right-top-bottom 5*/ obs_10 = new component(12, 153, "darkred", 394, 141);/*vertical left-Right-top-bottom 6*/ obs_11 = new component(12, 339, "darkred", 451, 0);/*vertical left-Right-top-bottom 7*/ obs_12 = new component(12, 338, "darkred", 508, 48);/*vertical left-Right-top-bottom 8*/ obs_13 = new component(12, 338, "darkred", 565, 97);/*vertical left-Right-top-bottom 9*/ obs_14 = new component(12, 338, "darkred", 622, 48);/*vertical left-Right-top-bottom 10*/ obs_15 = new component(12, 239, "darkred", 675, 46);/*vertical left-Right-top-bottom 11*/ obs_16 = new component(12, 100, "darkred", 675, 331);/*vertica left-Rightl-top-bottom 12*/ obs_17 = new component(12, 108, "darkred", 731, 237);/*vertical left-Right-top-bottom 13*/ obs_18 = new component(120, 12, "darkred", 58, 236);/*horizontal left-Right-top-bottom 1*/ obs_19 = new component(116, 12, "darkred", 2, 285);/*horizontal left-Right-top-bottom 2*/ obs_20 = new component(116, 12, "darkred", 61, 331);/*horizontal left-Right-top-bottom 3*/ obs_21 = new component(116, 12, "darkred", 2, 379);/*horizontal left-Right-top-bottom 4*/ obs_22 = new component(176, 12, "darkred", 230, 45);/*horizontal left-Right-top-bottom 5*/ obs_23 = new component(176, 12, "darkred", 283, 96);/*horizontal left-Right-top-bottom 6*/ obs_24 = new component(176, 12, "darkred", 228, 141);/*horizontal left-Right-top-bottom 7*/ obs_25 = new component(165, 12, "darkred", 181, 188);/*horizontal left-Right-top-bottom 8*/ obs_26 = new component(115, 12, "darkred", 230, 236);/*horizontal left-Right-top-bottom 9*/ obs_27 = new component(121, 12, "darkred", 285, 284);/*horizontal left-Right-top-bottom 10*/ obs_28 = new component(12, 55, "darkred", 285, 284);/*vertical 6 nalipatan*/ obs_29 = new component(167, 12, "darkred", 295, 327);/*horizontal left-Right-top-bottom 11*/ obs_30 = new component(292, 12, "darkred", 228, 375);/*horizontal left-Right-top-bottom 12*/ obs_31 = new component(126, 12, "darkred", 508, 47);/*horizontal left-Right-top-bottom 13*/ obs_32 = new component(50, 12, "darkred", 630, 331);/*horizontal left-Right-top-bottom 14*/ obs_33 = new component(60, 12, "darkred", 680, 46);/*horizontal left-Right-top-bottom 15*/ obs_34 = new component(60, 12, "darkred", 735, 96);/*horizontal left-Right-top-bottom 16*/ obs_35 = new component(60, 12, "darkred", 680, 140);/*horizontal left-Right-top-bottom 17*/ obs_36 = new component(60, 12, "darkred", 735, 188);/*horizontal left-Right-top-bottom 18*/ obs_37 = new component(60, 12, "darkred", 680, 237);/*horizontal left-Right-top-bottom 19*/ obs_38 = new component(60, 12, "darkred", 731, 336);/*horizontal left-Right-top-bottom 20*/ finish = new component(89, 10, "green", 693, 380);/*finish line*/ myGameArea.start(); } function gamearea() { this.canvas = document.createElement("canvas"); this.canvas.width = 800;/*width*/ this.canvas.height = 440;/*height*/ document.getElementById("canvascontainer").appendChild(this.canvas); this.context = this.canvas.getContext("2d"); this.start = function() { this.interval = setInterval(updateGameArea, 18); } this.clear = function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } 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; 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 < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > 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 = "lvl1.html"; alert("Penalty!"); } else if (myGamePiece.crashWith(finish)) { window.location = "lvl2.html"; alert("Congratulation!!!"); } 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; 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();
Log in or sign up for Devpost to join the conversation.