alert("NOTE: This game is created for phones, NOT for a PC. "); // Starting at the top // Instructions (animation using canvas?) var fps = undefined; var ctx; var score = 0; var frame = 0; var bframe = 90; var c; var switches = [1, 1, 1]; // -1 = next, 1 = go this way var boxes = []; var colors = ["blue", "yellow", "green", "red"]; var started = false; function Box(x, y, dx, dy, cc) { this.x = x; this.y = y; this.g = 0; this.dx = dx; this.dy = dy; this.cc = cc; this.color = colors[cc]; this.update = function() { if(this.y >= 455 && this.y <= 465) { // if dir choose this.y = 455; if(this.x < 115) { this.dx = 1; this.dy = 0; } else if(this.x >= 115 && this.x <= 120 && switches[0] > 0) { this.x = 115; this.dx = 0; this.dy = -1; } else if(this.x >= 205 && this.x <= 215 && switches[1] > 0) { this.x = 205; this.dx = 0; this.dy = -1; } else if(this.x >= 295 && this.x <= 305 && switches[2] > 0) { this.x = 295; this.dx = 0; this.dy = -1; } } // if direction choose if(this.y <= 150 && this.x >= 100) { // if in colored box this.dx = 0; this.dy = 0; this.g++; if(this.g >= 30) { if((this.x == 115 && this.cc === 0) || (this.x == 205 && this.cc == 1) || (this.x == 295 && this.cc == 2)) { score++; } else { score--; } this.x = -50; this.y = -50; } // if g >= 30 } // if y = 150 if(this.x > 390 && this.cc < 3) { score--; this.x = -50; this.y = -50; this.dx = 0; this.dy = 0; } // if not red box is not in colored box else if(this.x > 390 && this.cc == 3) { score++; this.x = -50; this.y = -50; this.dx = 0; this.dy = 0; } this.x += this.dx; this.y += this.dy; if(this.dx !== 0) { this.x += (0.1 * score); } if(this.dy < 0) { this.y -= (0.1 * score); } else if(this.dy > 0) { this.y += (0.1 * score); } this.updateScore(); }; // this.update() this.updateScore = function() { c.font = "22px Serif"; c.fillStyle = "black"; c.fillText("Score: " + score, 250, 24); }; boxes.push(this); } // Box window.onload = function() { ctx = document.getElementById("canvas"); ctx.width = 360; ctx.height = 500; c = ctx.getContext("2d"); ctx.addEventListener("click", function(event) { ctxclick(event) }); drawmain(); }; // onload function drawmain() { c.font = "26px Serif"; c.fillText("Instructions", 115, 57); var text = "You have to get the colored \npackages to the same colored delivery \nbox. Therefore, you have to tap \nthe switches or the lines above it\nto change the direction of\nthe package. \nIt will become clear when you\nplay it!"; var tArr = text.split("\n"); var lineheight = 24; c.font = "18px Serif"; for(var i = 0; i < tArr.length; i++) { c.fillText(tArr[i], 20, 87 + (i * lineheight)); } c.fillRect(100, 300, 160, 40); c.font = "24px Serif"; c.fillStyle = "#FFFFFF"; c.fillText("Start game!", 115, 327); text = "NOTE: This is my first canvas code which runs \nat x fps, 30 in this case. i'm really proud of it!"; tArr = text.split("\n"); lineheight = 20; c.font = "14px Serif"; c.fillStyle = "#000000"; for(var i = 0; i < tArr.length; i++) { c.fillText(tArr[i], 20, 387 + (i * lineheight)); } ctx.addEventListener("click", function(e) { if(e.x >= 100 && e.x <= 260 && e.y >= 300 && e.y <= 340 && !started) { fps = setInterval(animate, 1000 / 30); drawbg(); started = true; } }); } function drawbg() { // draw all of the background items c.fillStyle = "#AAAAAA"; c.fillRect(20, 0, 40, 490); // start to bottom c.fillRect(20, 450, 360, 40); // horizontal c.fillRect(110, 450, 40, -250); // first up c.fillRect(200, 450, 40, -250); // second up c.fillRect(290, 450, 40, -250); // third up // color indicators c.fillStyle = "blue"; c.fillRect(120, 460, 20, 20); c.fillRect(90, 200, 80, -160); c.fillStyle = "yellow"; c.fillRect(210, 460, 20, 20); c.fillRect(180, 200, 80, -160); c.fillStyle = "green"; c.fillRect(300, 460, 20, 20); c.fillRect(270, 200, 80, -160); c.stroke(); } function animate() { c.clearRect(0, 0, 360, 500); drawbg(); for(var i = 0; i < switches.length; i++) { c.fillStyle = "#666666"; if(switches[i] < 0) { c.fillRect((110 + 90 * i), 445, 45, 5); // go next } else { c.fillRect((150 + 90 * i), 445, 5, 45); // go this } } // draw packages if(bframe + score * 1.5 >= 90) { var box = new Box(25, -30, 0, 1, Math.floor(Math.random() * colors.length)); bframe = 0; } for(i = 0; i < boxes.length; i++) { c.fillStyle = "#DEB887"; c.fillRect(boxes[i].x, boxes[i].y, 30, 30); c.fillStyle = boxes[i].color; c.fillRect(boxes[i].x + 10, boxes[i].y + 10, 10, 10); boxes[i].update(); } frame++; bframe++; } // animate function ctxclick(e) { if(e.y >= 200 && e.y <= 490 && fps != undefined) { // if correct y pos for toggle if(e.x >= 110 && e.x <= 150) { switches[0] = -switches[0]; } else if(e.x >= 200 && e.x <= 240) { switches[1] = -switches[1]; } else if(e.x >= 290 && e.x <= 330) { switches[2] = -switches[2]; } } // if correct y pos for toggle }

Game: Package Delivery [MOBILE]