//Created by Moses Odhiambo "use strict"; window.onload = function() { var done=false; alert("Save the cute dino 🦖 from extinction! Ready?"); function main(){ //resizes page to fit any screen var res_y=window.screen.availHeight; var res_x=window.screen.availWidth; var coeff; if (res_x*330>res_y*380) coeff=res_y/330; else coeff=res_x/380; document.getElementById("div").style.transform="scale("+coeff+")"; //references elements const canvas=document.getElementById("Canvas"); const con=canvas.getContext("2d"); const jumpbutton = document.getElementById("jump"); //paints canvas on first run const grd=con.createLinearGradient(0,65,0,180); grd.addColorStop(0, '#7ec0ee'); grd.addColorStop(1, '#ffffff'); con.fillStyle=grd; con.fillRect(0,0,360,180); const grd1=con.createRadialGradient(340,20,5,340,20,45); grd1.addColorStop(0, '#ffff80'); grd1.addColorStop(1, '#7ec0ee'); con.arc(340,20,45,0,2*Math.PI); con.fillStyle=grd1; con.fill(); con.scale(3,3); //scales canvas //creates 2d array of a given size function createarray(y,x){ var data = new Array(y); for(var i=0;i { if(char !== ' '){ array[y][x]=parseInt(char); x++; if(x==array[y].length){ y++; x=0; } } }); } initarray(dino1, str_dino1); initarray(dino2, str_dino2); initarray(dino3, str_dino3); initarray(cloud1, str_cloud1); initarray(cloud2, str_cloud2); initarray(cactus1, str_cactus1); initarray(cactus2, str_cactus2); initarray(bird1, str_bird1); initarray(bird2, str_bird2); //objects var t_rex={ pos:{x:2,y:45}, data:dino1, color:'#608c5a' }; var cloud={ pos:{x:18,y:8}, data:cloud1, color:'#d9dfe2' }; var clouds={ pos:{x:50,y:2}, data:cloud2, color:'#d9dfe2' }; //draws given object function drawobject(obj){ for (var y=0; y=2){ //makes t rex fall dir=4; afloat=0; } if(t_rex.pos.y==27 && dir==4){ //makes t rex faster as he falls dir=6; } if(t_rex.pos.y+t_rex.data.length==60 && dir==6){ //makes t rex land jumptrigger=false; dir=-6; up=false; } } //makes the pterodactyl fly function fly(){ for(var i=0; i<=2; ++i){ if (objects[i].name=='pterosaur'){ if (objects[i].data==bird1){ objects[i].data=bird2; } else{ objects[i].data=bird1; } } } } //checks collision between the dino and a given object function collisiondetection(obj){ for (var y1=0; y1=100){ switch (score%100){ case 0: case 2: case 4: document.getElementById("score").style.color="red"; canvas.style.border="1px solid red"; break; default: document.getElementById("score").style.color="teal"; canvas.style.border="1px solid teal"; } } //speeds up the game when level increases if(score==300 || score==600){ speed++; } } //ends the game when t rex dies function checkcollision(){ for(var i=0; i<=2; ++i){ if (collisiondetection(objects[i])){ document.getElementById("score").innerText='GAME OVER!'; document.getElementById("score").style.color="red"; canvas.style.border="1px solid red"; navigator.vibrate=navigator.vibrate||navigator.webkitVibrate||navigator.mozVibrate||navigator.msVibrate; if(navigator.vibrate){ navigator.vibrate([120,60,120]); } document.getElementById("jump").innerText='play again'; con.scale(1/3,1/3); stop=true; done=true; } } } //animates the game while locking the frame rate var stop = false, frameCount = 0, fpsInterval, startTime, now, then, elapsed; startAnimating(20); function startAnimating(fps) { fpsInterval = 1000 / fps; then = Date.now(); startTime = then; animate(); } function animate() { if (stop) { return; } requestAnimationFrame(animate); now = Date.now(); elapsed = now - then; if (elapsed > fpsInterval) { then = now - (elapsed % fpsInterval); //runs on each frame change if(jumptrigger){ jump(); } oscillator++; if (oscillator==3){ walk(); fly(); scorerefresh(); oscillator=0; } move(); replace(); draw(); checkcollision(); //shows current frame rate var sinceStart = now - startTime; var currentFps = Math.round(1000 /(sinceStart / ++frameCount) * 100) / 100; document.getElementById("fps").innerText='FPS: '+currentFps; } } //event listener(s) jumpbutton.addEventListener("click", onJump, false); //event handler(s) function onJump () { if (done){ done=false; document.getElementById("jump").innerText='jump'; document.getElementById("score").style.color="teal"; canvas.style.border="1px solid teal"; main(); } else{ if (!up){ beep.play(); } jumptrigger=true; } } } main(); }

T-Rex Runner🎮 [GAME]