const ratio=1.5 var activeInput var mouse={ x:0, y:0, isPressed:false } var lastFrame=0 var user={ id:"", name:"" } var level={ start:"", dur:5*60*1000 } const cors="https://cors-anywhere.herokuapp.com/" const app="https://lit-journey-66880.herokuapp.com/" var camera={ x:0, y:0, zoom:1, follow:function(objX,objY,posX,posY,fixedX,fixedY) { if(!fixedX) this.x=posX-objX*camera.zoom if(!fixedY) this.y=posY-objY*camera.zoom }, setPos:function(x,y){ this.x=x this.y=y } } var sceneData=[ { elems:{ "title": { x:200, y:80, size:30, text:"Spike Dash" }, "label_name": { x:100, y:200, text:"Username" }, "input_name":{ x:240, y:200, w:160, h:30, type:"input" }, "label_pwd": { x:100, y:260, text:"Password" }, "input_pwd":{ x:240, y:260, w:160, h:30, type:"input", input:"password" }, "btn_toRegister":{ x:200, y:520, w:180, h:30, text:"Create User", onclick:function() { changeScene(sceneData[5]) } }, "btn_login":{ x:200, y:320, w:120, h:30, text:"Login", onclick:function() { var unm=id("input_name").text var pwd=id("input_pwd").text sendpost(cors+app+"/login",{unm:unm,pwd:pwd},function(data1) { alert(data1["msg"]) if(data1["logged"]) { user.id=data1["id"] user.name=unm loadScores(true) } }) } } }, func: function() {} }, { elems:{ "label":{ x:200, y:80, text:"Top Scores" }, "time":{ x:300, y:100, size:10 }, btn_refresh:{ x:100, y:100, w:60, h:10, size:10, text:"refresh", onclick:function() { loadScores(true) } }, "player0":{ x:60, y:160, align:"left" }, "score0":{ x:240, y:160, align:"left" }, "player1":{ x:60, y:200, align:"left" }, "score1":{ x:240, y:200, align:"left" }, "player2":{ x:60, y:240, align:"left" }, "score2":{ x:240, y:240, align:"left" }, "player3":{ x:60, y:280, align:"left" }, "score3":{ x:240, y:280, align:"left" }, "player4":{ x:60, y:320, align:"left" }, "score4":{ x:240, y:320, align:"left" }, "btn_play":{ x:200, y:420, w:120, h:30, text:"Play", onclick:function() { changeScene(sceneData[3]) sendget(cors+app+"/level",function(data) { changeScene(sceneData[2]) camera.setPos(0,0) createPlayer(data["player"]) createObstacles(data["obstacles"]) scene.objects.explosions=[] }) } }, "btn_profile":{ x:200, y:480, w:120, h:30, text:"Profile", onclick:function() { changeScene(sceneData[3]) sendpost(cors+app+"/profile",{id:user.id},function(data){ changeScene(sceneData[4]) id("name").text=user.name id("hiscore").text=data["hiscore"] id("obstacles").text=data["obstacles"] id("gold").text=data["gold"] id("silver").text=data["silver"] id("bronze").text=data["bronze"] }) } }, "btn_music":{ x:200, y:540, w:120, h:30, text:"Music", onclick:function() { music.paused?music.play():music.pause() music.loop=true } } }, func: function() { checkTime(0,function() { loadScores(true) }) } }, { elems: { "time":{ x:360, y:20, size:10 }, "score":{ x:200, y:60 }, "btn_start":{ x:200, y:300, w:120, h:30, text:"Start", onclick:function() { scene.objects.player.start=true id("btn_start").y=-500 } } }, func:updateGame }, { elems: { "loading": { x:200, y:300, text:"Loading" } }, func: function() {} }, { elems: { "name":{ x:200, y:80 }, "label_hiscore":{ x:60, y:160, align:"left", text:"Top Score" }, "hiscore":{ x:240, y:160, align:"left" }, "label_obstacles":{ x:60, y:200, align:"left", text:"Obstacles" }, "obstacles":{ x:240, y:200, align:"left" }, "label_gold":{ x:60, y:240, align:"left", text:"Gold" }, "gold":{ x:240, y:240, align:"left" }, "label_silver":{ x:60, y:280, align:"left", text:"Silver" }, "silver":{ x:240, y:280, align:"left" }, "label_bronze":{ x:60, y:320, align:"left", text:"Bronze" }, "bronze":{ x:240, y:320, align:"left" }, "btn_back":{ x:200, y:540, w:120, h:30, text:"Back", onclick:function() { loadScores(true) } } }, func: function() {} }, { elems:{ "title": { x:200, y:80, size:30, text:"Spike Dash" }, "label_name": { x:100, y:200, text:"Username" }, "input_name":{ x:240, y:200, w:160, h:30, type:"input" }, "label_pwd": { x:100, y:260, text:"Password" }, "input_pwd":{ x:240, y:260, w:160, h:30, type:"input", input:"password" }, "label_pwdr": { x:100, y:320, text:"Password" }, "input_pwdr":{ x:240, y:320, w:160, h:30, type:"input", input:"password" }, "btn_toLogin":{ x:200, y:520, w:120, h:30, text:"Back", onclick:function() { changeScene(sceneData[0]) } }, "btn_register":{ x:200, y:380, w:120, h:30, text:"Register", onclick:function() { var unm=id("input_name").text var pwd=id("input_pwd").text var pwdr=id("input_pwdr").text sendpost(cors+app+"/register",{unm:unm,pwd:pwd,pwdr:pwdr},function(data1) { alert(data1["msg"]) if(data1["registered"]) { changeScene(sceneData[0]) } }) } } }, func: function() {} } ] function loadScores(a) { sendget(cors+app+"/main",function(data2) { level.start=data2["start"] var scores=data2["scores"] if(a) changeScene(sceneData[1]) for(let i=0;i-P.limit) P.vy-=P.power*deltaT if(P.vy600||P.y<0||collide(a[0],a[1],verts)||collide(a[0],a[1]+a[2],verts)) { dead=true P.dead=true for(let i=0;i<60;i++) scene.objects.explosions.push([P.x,P.y,4,Math.random()*Math.PI*2,Math.random()*2+2,0.15]) setTimeout(function() { P.end=true changeScene(sceneData[3]) sendpost(cors+app+"/finish",{id:user.id,score:P.score,start:level.start},function(data) { loadScores(true) }) },1000) break } } } camera.follow(P.x,P.y,c.width/2,c.height/2,false,true) ctx.beginPath() ctx.fillStyle="darkblue" ctx.moveTo(drawVerts[0],drawVerts[1]) for(let i=2;i[400+i*300,50+data[i]*400,100,Math.PI/6,false]) } function updateObstacles() { var O=scene.objects.obstacles ctx.beginPath() ctx.fillStyle="#222" for(let i=0;ia[0]) { a[4]=true scene.objects.player.score++ } let x=a[0]*camera.zoom+camera.x let y=a[1]*camera.zoom+camera.y let gap=a[2]*camera.zoom if(x+c.height*Math.tan(a[3])<0||x-c.height*Math.tan(a[3])>c.width) continue ctx.moveTo(x,y) ctx.lineTo(x-y*Math.tan(a[3]),0) ctx.lineTo(x+y*Math.tan(a[3]),0) ctx.closePath() ctx.moveTo(x,y+gap) ctx.lineTo(x-(c.height-y-gap)*Math.tan(a[3]),c.height) ctx.lineTo(x+(c.height-y-gap)*Math.tan(a[3]),c.height) } ctx.fill() } function updateExplosions() { var P=scene.objects.explosions ctx.beginPath() ctx.fillStyle="orange" for(let i=0;i1000) lastFrame=currentFrame var deltaT=(currentFrame-lastFrame)/(1000/60) lastFrame=currentFrame if(!scene.objects.player.end) { updateExplosions() updatePlayer(deltaT) updateObstacles() } id("score").text=scene.objects.player.score checkTime(0,function(){}) } function checkTime(t,callback) { var remainTime=Math.floor((level.start+level.dur-Date.now())/1000) var sec=remainTime%60 var min=Math.floor(remainTime/60) if(remainTime{ document.querySelector(".loading").style.display="none" changeScene(sceneData[0]) frame() },3000) } onresize=function() { resize() } function frame() { ctx.fillStyle="grey" ctx.fillRect(0,0,c.width,c.height) updateScene(scene) requestAnimationFrame(frame) } function resize() { var w=innerWidth, h=innerWidth*ratio if(h>innerHeight) { w=innerHeight/ratio h=innerHeight } c.width=w c.height=h c.style.left=(innerWidth-w)/2+"px" c.style.top=(innerHeight-h)/2+"px" camera.zoom=c.width/400 } function changeScene(data) { var s={ elems:[], func:data.func, objects:{} } for(let id in data.elems) { let attr = data.elems[id] s.elems.push({ id:id, x:attr.x, y:attr.y, w:attr.w||0, h:attr.h||0, text:attr.text||"", size:attr.size||20, onclick:attr.type=="input"?function() {openKeyboard(id)}:attr.onclick, bg:attr.bg||attr.type=="input"?"white":"black", color:attr.color||attr.type=="input"?"black":"white", type:attr.input, align:attr.align||"center" }) } scene = s c.onclick=function(){ for(let elem of scene.elems) if(Math.abs(mouse.x-c.offsetLeft-elem.x*camera.zoom)elem.id==arg) } function openKeyboard(theid) { activeInput=theid input.innerText=id(activeInput).text container.style.display="block" } function closeKeyboard() { id(activeInput).text=input.innerText container.style.display="none" input.innerText="" } var rand=(min,max)=>Math.floor(Math.random()*(max-min+1)+min) function sendpost(theurl, thedata, response) { var formdata = "" for (let attr in thedata) { formdata += "&" + attr + "=" + thedata[attr] } formdata = formdata.slice(1) var xhttp = new XMLHttpRequest() xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var responsedata = JSON.parse(this.responseText); response(responsedata) } } xhttp.open("POST", theurl, true) xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded") xhttp.send(formdata) } function sendget(theurl, response) { var xhttp = new XMLHttpRequest() xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var responsedata = JSON.parse(this.responseText); response(responsedata) } } xhttp.open("GET", theurl, true) xhttp.send() } function rot(x,y,r) { var x1=x*Math.cos(r)-y*Math.sin(r) var y1=x*Math.sin(r)+y*Math.cos(r) return [x1,y1] } function collide(x,y,verts) { verts.push(verts[0]) verts.push(verts[1]) var count=0 for(let i=0;ix-x1))) count++ } return count%2 }

Spike Dash [ online game ] 1.0