// Created by Jnisor window.onload = function() { var canvas = document.getElementById("canvas"); var right = document.getElementById("right"); var left = document.getElementById("left"); var up = document.getElementById("up"); var down = document.getElementById("down"); var ctx = canvas.getContext("2d"); var dir = 0;score = 0;level = 0; var red = "blue"; //canvas.height = 400; //canvas.width = 600; //var x = 100; //var y = 100; //var plusx = 5; //var plusy = 5; var coin = { x : 100, y : 95, },coinNew = { x : 100, y : 100, }, coinNewX ={ x : 0, y : 0, },coinNewXX = { x: 0, y: 0, },coinNewY = { x: 590, y: 0, },coinNewYY = { x: 0, y: 360, }, coinNewA = { x: 205, y: 205, },coinNewB = { x: 353, y: 0, },coinNewC = { x: 205, y: 250, },coinNewD = { x: 460, y: 0, },coinNewE = { x: 355, y: 220, },coinNewF = { x: 565, y: 95, },coinNewJ = { x: -50, y: -50, },coinNewK = { x: -10, y: -255, } , coinen = { x : 15, y : 200, plusx: 1, plusy: 1 } function draw(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.beginPath(); ctx.rect(coin.x,coin.y,200,55); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.rect(coinNew.x,coinNew.y,50,200); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.rect(coinNewX.x,coinNewX.y,10,400); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.rect(coinNewXX.x,coinNewXX.y,600,40); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.rect(coinNewY.x,coinNewY.y,10,400); ctx.fillStyle = red; ctx.fill(); ctx.beginPath(); ctx.rect(coinNewYY.x,coinNewYY.y,600,40); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.rect(coinNewA.x,coinNewA.y,200,50); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.rect(coinNewB.x,coinNewB.y,50,150); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.rect(coinNewC.x,coinNewC.y,50,150); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.rect(coinNewD.x,coinNewD.y,50,305); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.rect(coinNewE.x,coinNewE.y,50,80); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.rect(coinNewF.x,coinNewF.y,50,300); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.rect(coinNewJ.x,coinNewJ.y,35,165); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.rect(coinNewK.x,coinNewK.y,35,150); ctx.fillStyle = "red"; ctx.fill(); ////////////////////////////////////////////////// ctx.font = '25px Arial' ctx.fillStyle = '#fff' ctx.fillText('Score: '+ score, 20, 20); ctx.font = '25px Arial' ctx.fillStyle = '#fff' ctx.fillText('Level: '+ level, 150, 20); ctx.font = '25px Arial' ctx.fillStyle = '#fff' ctx.fillText('Speed: '+ coinen.plusx, 300, 20); ctx.font = '100px Arial' ctx.fillStyle = '#fff' ctx.fillText(''+ '→' , 500, 90); // coin.y += coin.plusy; //if(coin.y >= canvas.height - 50 || coin.y <= 0 ){ // coin.plusy *= -1; //} ctx.beginPath(); ctx.rect(coinen.x,coinen.y,50,50); ctx.fillStyle = "#33FF00"; ctx.fill(); requestAnimationFrame(draw); if(dir == 1){ coinen.x += coinen.plusx; // xx += plusx; } else if(dir == 2){ coinen.x -= coinen.plusx; // xx -= plusx; } else if(dir == 3){ coinen.y -= coinen.plusy; // yy-= plusy; } else if(dir == 4){ coinen.y += coinen.plusy; // yy += plusy; } if(coinen.x + 50 >= coinNewY.x && coinen.x <= coinNewY.x + 10 && coinen.y + 50 >= coinNewY.y && coinen.y <= coinNewY.y + 400 ){ coinen.plusx += 0.5; coinen.plusy += 0.5; score+= 10; level += 1; coinen.x = 15; coinen.y = 200; red ='#00FF00' ; coinNewJ.x = 10; coinNewJ.y = 30; } if(level == 2){ coinNewK.x = 10; coinNewK.y = 255; } //if(coinen.x + 100 >= coin.x && coin.x + 100 <= coinen.x && coinen.y + 100 >= coin.y && coin.y + 100 >= coinen.y){ // coinen.x = 10; //coinen.y = 200; //} if(coinen.x + 50 >= coin.x && coinen.x <= coin.x + 200 && coinen.y + 50 >= coin.y && coinen.y <= coin.y + 55 || coinen.x + 50 >= coinNew.x && coinen.x <= coinNew.x + 50 && coinen.y + 50 >= coinNew.y && coinen.y <= coinNew.y + 200 || coinen.x + 50 >= coinNewX.x && coinen.x <= coinNewX.x + 10 && coinen.y + 50 >= coinNewX.y && coinen.y <= coinNewX.y + 400 || coinen.x + 50 >= coinNewXX.x && coinen.x <= coinNewXX.x + 600 && coinen.y + 50 >= coinNewXX.y && coinen.y <= coinNewXX.y + 40 || coinen.x + 50 >= coinNewYY.x && coinen.x <= coinNewYY.x + 600 && coinen.y + 50 >= coinNewYY.y && coinen.y <= coinNewYY.y + 40 || coinen.x + 50 >= coinNewA.x && coinen.x <= coinNewA.x + 200 && coinen.y + 50 >= coinNewA.y && coinen.y <= coinNewA.y + 50 || coinen.x + 50 >= coinNewB.x && coinen.x <= coinNewB.x + 50 && coinen.y + 50 >= coinNewB.y && coinen.y <= coinNewB.y + 150 || coinen.x + 50 >= coinNewC.x && coinen.x <= coinNewC.x + 50 && coinen.y + 50 >= coinNewC.y && coinen.y <= coinNewC.y + 150 || coinen.x + 50 >= coinNewD.x && coinen.x <= coinNewD.x + 50 && coinen.y + 50 >= coinNewD.y && coinen.y <= coinNewD.y + 305 || coinen.x + 50 >= coinNewE.x && coinen.x <= coinNewE.x + 50 && coinen.y + 50 >= coinNewE.y && coinen.y <= coinNewE.y + 80 || coinen.x + 50 >= coinNewF.x && coinen.x <= coinNewF.x + 50 && coinen.y + 50 >= coinNewF.y && coinen.y <= coinNewF.y + 300 ){ coinen.x = 10; coinen.y = 200; } if(coinen.x + 50 >= coinNewJ.x && coinen.x <= coinNewJ.x + 35 && coinen.y + 50 >= coinNewJ.y && coinen.y <= coinNewJ.y + 150){ coinen.x = 10; coinen.y = 200; } if(coinen.x + 50 >= coinNewK.x && coinen.x <= coinNewK.x + 35 && coinen.y + 50 >= coinNewK.y && coinen.y <= coinNewK.y + 150){ coinen.x = 10; coinen.y = 200; } //coinen.x == canvas.width up.ontouchstart = function() { dir = 3;} down.ontouchstart = function() { dir = 4;} left.ontouchstart = function() { dir = 2;} right.ontouchstart = function() { dir = 1;} up.ontouchend = function() { dir = 0;} down.ontouchend = function() { dir = 0;} left.ontouchend = function() { dir = 0;} right.ontouchend = function() { dir = 0;} right.onmousedown = function() { dir = 1; } right.onmouseup = function() { dir = 0;} left.onmousedown = function() { dir = 2; } left.onmouseup = function() { dir = 0;} up.onmousedown = function() { dir =3 ; } up.onmouseup = function() { dir = 0;} down.onmousedown = function() { dir = 4; } down.onmouseup = function() { dir = 0;} } //setInterval(draw); draw(); alert("make up a name for this game"); }

My First Game 🎮🕹