var row = 6, ff = .2, expls = [], msgs = [], dmgs = [], elmlist = [], sel = [], Sel, move = false, curn, time, last, lvl = 1, turn = 4, delay = exp = phase = 0 onunhandledrejection = function(e) { e.preventDefault() } resizeTo(480,854) onload = function() { Frame = requestAnimationFrame; auto = "fullstrokefill" doc.body.mul("background='radial-gradient(white 5%,lightgrey 50%,grey 110%)'") deck = new img("https://dl.dropboxusercontent.com/s/7ojl655gk36x14t/Deck.jpeg?dl=1&raw=1",1) expl = new img("https://dl.dropboxusercontent.com/s/l5ukq4bgqgwk7dw/Explosion.png?dl=1&raw=1",1) elimg = {water:new img("https://dl.dropboxusercontent.com/s/pyg24pu7d18yhtx/Water.png?dl=1&raw=1",1),fire:new img("https://dl.dropboxusercontent.com/s/hvp44bmqbijqx2t/Fire.png?dl=1&raw=1",1),wind:new img("https://dl.dropboxusercontent.com/s/od8dup6ecoih3me/Wind.png?dl=1&raw=1",1),earth:new img("https://dl.dropboxusercontent.com/s/gs4q4pr46jevw5n/Earth.png?dl=1&raw=1",1),regen:new img("https://dl.dropboxusercontent.com/s/g6kyp07ta3xh4ca/Heart.png?dl=1&raw=1",1),shield:new img("https://dl.dropboxusercontent.com/s/g5vt7vlnlrc55d8/Shield.png?dl=1&raw=1",1)} monsimg = {water:[new img("https://dl.dropboxusercontent.com/s/plqmci0ghagfjap/Water%20Monster.png?dl=1&raw=1",1)],fire:[new img("https://dl.dropboxusercontent.com/s/afpeykbodm5aqe3/Fire%20Monster.png?dl=1&raw=1",1)],wind:[new img("https://dl.dropboxusercontent.com/s/qy4suix265ze9vk/Air%20Monster.png?dl=1&raw=1",1)],earth:[new img("https://dl.dropboxusercontent.com/s/6zxdaoughmdwtdt/Tree%20Monster.png?dl=1&raw=1",1)]} you = new img("https://dl.dropboxusercontent.com/s/oxau8pyhsgqxoyg/Pixel%20Miku.png?dl=1&raw=1",1) You = new Alive(true) It = new Alive() ele("audio[0]").load() grb() setInterval(function() { ele("audio[0]").play() },119810) onresize = ondeviceorientation = function() { scr() } can.onclick = function() { ele("audio[0]").play() } can.ontouchstart = can.onmousedown = function(e) { e.preventDefault() e.stopPropagation() if (delay) return ele("audio[0]").play() var tmp if ((tmp=(e.touches||[e])[(e.touches||[e]).length-1]).clientY>ff*y) { move = true sel = [curn=Math.floor(tmp.clientX/(x/(row-1)))-off[0]+(row-1)*(Math.floor((tmp.clientY-ff*y)/((1-ff)*y/row))-off[1])] Sel = elmlist[curn].type } else { sel = [] } } can.ontouchmove = can.onmousemove = function(e) { e.preventDefault() e.stopPropagation() var tmp if (move&&(tmp=(e.touches||[e])[(e.touches||[e]).length-1]).clientY>ff*y) { var tm = Math.floor(tmp.clientX/(x/(row-1)))-off[0]+(row-1)*(Math.floor((tmp.clientY-ff*y)/((1-ff)*y/row))-off[1]) if (elmlist[tm].type!=Sel) return if (tm==last) { sel.pop() last = sel.last(1) curn = sel.last() return } if (Math.floor(tmp.clientX/(x/(row-1)))-off[0]+(row-1)*(Math.floor((tmp.clientY-ff*y)/((1-ff)*y/row))-off[1])!=curn) { last = curn } if (tmp.clientX<=x&&!sel.some(function(val){return val==(curn=Math.floor(tmp.clientX/(x/(row-1)))-off[0]+(row-1)*(Math.floor((tmp.clientY-ff*y)/((1-ff)*y/row))-off[1]))})) { if (elmlist[curn]) { if (elmlist[curn].type==Sel&&(curn==last+1||curn==last-1||curn==last-(row-1)||curn==last+(row-1)||curn==last+(row-2)||curn==last+row||curn==last-(row-2)||curn==last-row)) { sel.push(Math.floor(tmp.clientX/(x/(row-1)))-off[0]+(row-1)*(Math.floor((tmp.clientY-ff*y)/((1-ff)*y/row))-off[1])) } } } curn = sel.last() last = sel.last(1) clearInterval(time) time = setInterval(function() { elmlist = [] rep(row*(row-1),function(stp) { elmlist.push(new Elemen(stp)) }) },15000) } } can.ontouchend = can.onmouseup = function() { move = false var tm if (sel.length>=3) { sel.each(function(val) { elmlist[val].im = expl expls.push(new Explosion(elmlist[val].coord)) elmlist[val] = new Elemen(val) }) if (Sel=="shield"||Sel=="regen") { switch (Sel) { case "shield": You.mod /= sel.length-1 break case "regen": You.hp += tm=rnd(lvl,lvl*5) dmgs.push(new Points("+"+tm,true)) } setTimeout(enematk,rnd(500,1500,1)) sel = [] return } var mod = 1 if ((It.type=="water"&&Sel=="fire")||(It.type=="fire"&&Sel=="earth")||(It.type=="earth"&&Sel=="wind")||(It.type=="wind"&&Sel=="water")) { mod /= 2 msgs.push(new Message("Resistant")) } else if ((It.type=="fire"&&Sel=="water")||(It.type=="earth"&&Sel=="fire")||(It.type=="wind"&&Sel=="earth")||(It.type=="water"&&Sel=="wind")) { mod *= 2 msgs.push(new Message("Weak")) } It.hp -= (tm=Math.round(lvl*(sel.length-2)*mod)) dmgs.push(new Points(-tm)) if (It.hp<=0) { var transit = Transit.bind(It) transit(2) setTimeout(function() { It = new Alive() exp += lvl*hp/You.hp },600) delay = mobile?300:500 expls.push(new Explosion([x-(x/(row-1)/2-x/(row-1)/5)-3*x/(row-1)/4+It.coord[0],y/row/2-3*y/row/10+(y-(row+1.2)*(1-ff)*y/row)+It.coord[1]])) } else { var transit = Transit.bind(It) if (rnd(1-(tm>=lvl*5?1:0)+(mod<1?1:0))) { transit(0) } else if (rnd(5)) { transit(1) } setTimeout(enematk,rnd(500,1500,1)) } if (exp>=Math.sum(lvl)) { lvl++ exp = 0 You.hp = lvl*15 msgs.push(new Message("Level "+lvl+"!")) } } sel = [] } rep(row*(row-1),function(stp) { elmlist.push(new Elemen(stp)) }) time = setInterval(function() { elmlist = [] rep(row*(row-1),function(stp) { elmlist.push(new Elemen(stp)) }) },15000) addEventListener("imgs",function() {can.style.background = "white";frame()},{once:true}) } setInterval(function() { if (delay>0) delay-- },1) function enematk() { var transit = Transit.bind(You), atk = Math.round((It.str-rnd(-lvl,lvl))*You.mod) dmgs.push(new Points(-atk,true)) if (atk>=lvl*3) { transit(1) } else { transit(0) } You.hp -= atk if (You.mod<1) You.mod = 1 if (You.hp<=0) { alert("Miku died at level "+lvl+" >.<") lvl = exp = 0 You = new Alive(true) It = new Alive() } }//enematk function Transit(mode) { var intr, stp = 0, mod = this.id=="you"?-1:1 if (!mode) { stp = 5 intr = setInterval(function() { if (stp--<=0) { this.coord[0] -= 2*mod if (stp==-5) { clearInterval(intr) } } else { this.coord[0] += 2*mod } }.bind(this),mobile?40:80) } else if (mode==1) { stp = 5 intr = setInterval(function() { if (stp<=-10) { clearInterval(intr) } else if (stp<=1&&stp>=-5) { this.coord[0] -= 2*mod this.coord[1] += 2*mod } else { this.coord[0] += 2*mod this.coord[1] -= 2*mod } stp-- }.bind(this),mobile?30:60) } else if (mode==2) { stp = 8 intr = setInterval(function() { if (stp==8) { this.coord[1] -= 2*mod } else if (stp==7) { this.coord[0] += 2*mod } else if (stp==6) { this.coord[0] += 2*mod this.coord[1] += 2*mod } else if (stp==5) { this.coord[1] += 2*mod } else if (stp==4) { this.coord[0] -= 2*mod this.coord[1] += 2*mod } else if (stp==3) { this.coord[0] -= 2*mod } else if (stp==2) { this.coord[0] -= 2*mod this.coord[1] -= 2*mod } else if (stp==1) { this.coord[1] -= 2*mod } else { this.coord = [0,0] clearInterval(intr) } stp-- }.bind(this),mobile?35:70) } }//Transit function Elemen(box) { this.im = elimg[this.type=Object.keys(elimg).rnd()] this.box = box this.cord = [(box%(row-1))*x/(row-1)+x/(2*(row-1)),Math.floor(box/(row-1))%row*(1-ff)*y/row+(1-ff)*y/(2*row)+ff*y] this.coord = [(box%(row-1))*x/(row-1)+x/(5*(row-1)),Math.floor(box/(row-1))%row*(1-ff)*y/row+(1-ff)*y/(5*row)+ff*y] }//Elemen function Alive(user) { this.coord = [0,0] this.id = user?"you":"it" this.im = user?you:monsimg[this.type=Object.keys(monsimg).rnd()].rnd() this.hp = user?lvl*15:rnd(10*lvl,20*lvl) this.str = user?lvl:rnd(2*lvl,4*lvl) this.mod = 1 this.alp = 100 hp = this.hp //death impact shake + fade leave }//Alive function Points(dmg,user) { this.coord = user?[x/(row-1)/2,y/row/2+(y-(row+1.2)*(1-ff)*y/row)]:[x-x/(row-1)/2,y/row/2+(y-(row+1.2)*(1-ff)*y/row)] this.wdt = (this.op=(dmg*100/20).lim(60,100))/20 this.life = Math.round(this.op/4) this.sp = [rnd(-3,3,1)/this.wdt,rnd(-3,3,1)/this.wdt,40/this.life,6/this.life] this.txt = dmg }//Points function Message(data) { this.txt = data this.op = 80 this.wdt = 1 this.life = 8 }//Message function Explosion(area) { this.data = area.concat([3*x/(5*(row-1)),(1-ff)*3*y/(5*row)]) this.op = 40 this.life = 5 }//Explosion function frame() { Phase = function(grd) { if (phase<(mobile?100:300)&&!grd) { return "rgb("+Math.round(127*Math.abs(phase)/(mobile?85:255))+","+Math.round(255-127*Math.abs(phase)/(mobile?100:300))+","+Math.round(255-127*Math.abs(phase)/(mobile?100:300))+")" } else if (phase<(mobile?100:300)&&grd==2) { return "#66"+Math.round(255-55*Math.abs(phase)/(mobile?100:300)).toString(16)+Math.round(66-11*Math.abs(phase)/(mobile?90:270)).lim(55,66) } else if (phase<(mobile?100:300)&&grd==1) { return "#"+Math.round(66-40*Math.abs(phase)/(mobile?100:300))+Math.round(255-150*Math.abs(phase)/(mobile?100:300)).toString(16)+Math.round(66+11*Math.abs(phase)/(mobile?100:300)).lim(66,77) } else if (phase<(mobile?100:300)&&grd==3) { return "#"+Math.round(66/(2*Math.abs(phase||1)/(mobile?100:300)).lim(1,2))+""+Math.round(33/(2*Math.abs(phase||1)/(mobile?100:300)).lim(1,2))+"06" } phase *= -1 return Phase(grd) } dlt() wdt(1.5) lc(3) lc(3,1) alp(60) deck.draw(0,ff*y,x,(1-ff)*y) stl("rgba(10,10,5,.3)") rct(0,ff*y,x,(1-ff)*y,1) alp(70) grd(0,0,0,ff*y,"10:"+Phase()+"/60:"+Phase(1)+"/65:"+Phase(2)+"/95:"+Phase(3)) if (Math.abs(phase)<30||rnd(1)) { phase++ } rct(0,0,x,ff*y,1) stl("rgba(250,250,250,.3)") rct(0,0,x,ff*y,1) alp(80) stl("#0F0F00") rep(row,function(stp) { ln(0,stp*(1-ff)*y/row+ff*y,x,stp*(1-ff)*y/row+ff*y) ln(stp*x/(row-1),ff*y,stp*x/(row-1),y) }) ln(0,(1-ff)*y+ff*y,x,(1-ff)*y+ff*y) alp() elmlist.each(function(val,ind) { grd(val.cord[0],val.cord[1],0,val.cord[0],val.cord[1],DIF/(4*(row-1)),"0:rgba(250,"+(sel.indexOf(ind)<0?250:200)+","+(sel.indexOf(ind)<0?250:5)+",.8)/100:rgba(255,"+(sel.indexOf(ind)<0?255:205)+","+(sel.indexOf(ind)<0?255:0)+",0)") ark(val.cord[0],val.cord[1],x/(4*(row-1))) val.im.draw(val.coord[0],val.coord[1],3*x/(5*(row-1)),(1-ff)*3*y/(5*row)) }) beg() stl("rgba(200,5,205,.4)") wdt(DIF/(row-1)/3) lc(2) lc(0,1) if (sel.length) { mov.apply(null,elmlist[sel[0]].cord) sel.each(function(val,ind) { if (!ind) return ln.apply(null,elmlist[sel[ind]].cord.concat(d)) }) } You.im.draw(x/(row-1)/2-x/(row-1)/5+You.coord[0],y/row/2-3*y/row/10+(y-(row+1.2)*(1-ff)*y/row)+You.coord[1],3*x/(row-1)/4,3*y/row/5) stl("black") txt("HP : "+You.hp,0,0,1,"1.2em fantasy",4,0) stl(It.type=="fire"?"red":(It.type=="water"?"blue":(It.type=="wind"?"grey":"#663300"))) txt("HP : "+It.hp,x-pen.measureText("HP : "+It.hp).width,0,1,"1.2em fantasy",4,0) It.im.draw(x-(x/(row-1)/2-x/(row-1)/5)-3*x/(row-1)/4+It.coord[0],y/row/2-3*y/row/10+(y-(row+1.2)*(1-ff)*y/row)+It.coord[1],3*x/(row-1)/4,3*y/row/5) if (turn>0) { You.coord[1]-- It.coord[1]++ turn-- } else { turn-- You.coord[1]++ It.coord[1]-- if (turn==-5) { turn = 5 } } var tmp = [] dmgs.each(function(val) { val.life-- stl("red") alp(val.op-=val.sp[2]) val.wdt += val.sp[3] val.wdt = val.wdt.lim(0,9) txt(val.txt,val.coord[0]-=val.sp[0],val.coord[1]-=val.sp[1],1,"1."+Math.floor(val.wdt)+"em monospace") if (val.life>0) { tmp.push(val) } }) dmgs = tmp var tmp = [] msgs.each(function(val,ind) { stl("red") alp(val.op-=2) val.op = val.op.lim(0,100) val.wdt += .05 val.wdt = val.wdt.lim(1,2) txt(val.txt,x/2,val.life*ff*y/16+ind*2,1,val.wdt+"em monospace") if (--val.life) { tmp.push(val) } }) msgs = tmp var tmp = [] expls.each(function(val) { alp(val.op-=5) val.op = val.op.lim(0,100) expl.draw.apply(expl,val.data) if (--val.life) { tmp.push(val) } }) expls = tmp Frame(frame) }//frame

Puzzles 'n' Miku (BETA)