window.onload = init; var cvs,ctx,w,h,player,ground; var player_map = [ [ [0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1], [0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0], [0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0], [1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0], [1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0], [1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,1,0,0], [1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0], [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], [0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0], [0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0], [0,0,0,0,1,1,1,0,0,1,1,1,0,0,0,0,0,0,0,0], [0,0,0,0,0,1,1,0,0,1,1,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0], ], [ [0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1], [0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0], [0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0], [1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0], [1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0], [1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,1,0,0], [1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0], [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], [0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0], [0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0], [0,0,0,0,1,1,1,0,0,1,1,1,0,0,0,0,0,0,0,0], [0,0,0,0,0,1,1,0,0,1,1,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,1,0,0,0,0,1,1,0,0,0,0,0,0,0,0], [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0], ] , [ [0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1], [0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0], [0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0], [1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0], [1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0], [1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,1,0,0], [1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0], [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0], [0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0], [0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0], [0,0,0,0,1,1,1,0,0,1,1,1,0,0,0,0,0,0,0,0], [0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,1,1,0,0,0,1,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0], ] ] var enemy_map= [ [0,1,0,0,0,0,1,1,0,0,0,0,1,0], [1,1,0,0,0,1,1,1,1,0,0,0,1,1], [1,1,0,0,0,1,1,1,1,0,0,0,1,1], [1,1,0,0,0,1,1,1,1,0,0,0,1,1], [1,1,0,0,0,1,1,1,1,0,0,0,1,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1], [0,1,1,1,1,1,1,1,1,1,1,1,1,0], [0,0,0,0,0,1,1,1,1,0,0,0,0,0], [0,0,0,0,0,1,1,1,1,0,0,0,0,0], [0,0,0,0,0,1,1,1,1,0,0,0,0,0], [0,0,0,0,1,1,1,1,1,1,0,0,0,0], [0,0,0,0,1,1,1,1,1,1,0,0,0,0], ] var cloud_map = [ [2,2,2,2,2,2,2,2,2,1,1,1,2,2,2,2,2,2,2], [2,2,2,2,2,2,2,1,1,0,1,1,1,1,2,2,2,2,2], [2,2,2,2,2,1,1,0,0,0,0,0,0,1,1,1,2,2,2], [2,2,2,2,1,1,0,0,0,0,0,0,0,0,0,1,1,2,2], [2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2], [2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], ] var enemy = []; var game_over = true; var d; var cloud=[]; var score= 0; var start = false; var jump_song = new Audio("https://saantonandre.github.io/sfx/player_buffed_shoot.wav"); var lose_song = new Audio("https://saantonandre.github.io/sfx/player_damaged.wav"); lose_song.loop= false; function init(){ document.getElementsByClassName("loader")[0].style.display ='none'; document.getElementById("restart").style.visibility="hidden"; var cvs = document.getElementById("cvs"); w = cvs.width = window.innerWidth; h = cvs.height = window.innerHeight; ctx = cvs.getContext("2d"); player = new Player(50,h/2); ground = new Ground(0,h-100); requestAnimationFrame(draw); cloud.push(new Cloud(w,Math.random()*h/2+50)); setInterval(()=>{ cloud.push(new Cloud(w,Math.random()*h/2+50)); },10000); cvs.addEventListener("click",function(e){ player.jump(); if(!start){ game_over = false; start= true; } }) enemy.push(new Enemy(w,h-100-12*3.5)); setInterval(animate,100) //requestAnimationFrame(draw); } function draw(){ requestAnimationFrame(draw); ctx.clearRect(0,0,w,h); ctx.fillStyle ="black"; ctx.font="bold 22px Tohara"; ctx.fillText("Score:"+score,w/2-22,30) ground.show(); for(let c of cloud){ c.show() // c.update() } player.show(); /* if(d%15==0){ player.pos+=1; }*/ if(start){ if(!game_over){ player.update(); for(let c of cloud){ // c.show() c.update() } } // player.moves(); for(let e of enemy){ e.show(); if(!game_over){ e.update(); } } for(var i = 0;inavigator.vibrate(0),500); // enemy.splice(i,1); } catch(e){} } } var btn = document.getElementById("restart"); btn.addEventListener("click",function(e){ if(game_over){ game_over =false ; score=0; document.getElementById("restart").style.visibility="hidden"; for(var i = 0;i2){ this.pos = 0; } this.map = player_map[this.pos] } update(){ this.vel+=this.gravity; this.y+=this.vel; if(this.jumping){ ready = false; } else{ ready= true; } } jump(){ if(!this.jumping){ this.vel=-9.5; this.jumping= true; // jump_song.play(); } } } class Ground{ constructor(x,y){ this.x = x; this.y = y; this.w = w; this.h = 40; } show(){ ctx.fillStyle ="darkgrey"; ctx.fillRect(this.x,this.y,this.w,this.h); } } class Enemy{ constructor(x,y){ this.x = x; this.y = y; this.map = enemy_map; this.w1 = 3; this.h1 = 5; this.w = this.w1*14; this.h = this.h1*18; this.dx=2; } show(){ for(var i = 0;i 0){ collisionDirection = "left"; character.x += offsetX; } else { collisionDirection ="right"; // character.x -= offsetX; } } else { if (vectorY > 0){ collisionDirection ="top"; character.y += offsetY; } else{ collisionDirection ="bottom"; character.y -= offsetY; } } } return collisionDirection; }

🎮🦖CHROME DINO GAME 🦖🎮