HTML5的canvas+JavaScript打造一个“贪吃饼”
Posted ksxh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5的canvas+JavaScript打造一个“贪吃饼”相关的知识，希望对你有一定的参考价值。
先上效果图：
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小游戏</title> </head> <br/> <body style="text-align: center;padding: 20px"> </body> <script src="1.js"></script> </html>
javascript代码：
var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = 1200 ; canvas.height = 600; canvas.style="border:5px solid #000000;"; var val=0 var r_max=200 var keysDown = ; var zd_zb=[] addEventListener("keydown", function (e) keysDown[e.keyCode] = true; // console.log(keysDown) // console.log(Object.keys(keysDown).length==0) , false); addEventListener("keyup", function (e) if (e.keyCode==32) zd_zb.push([yuan.x,yuan.y]) delete keysDown[e.keyCode]; // console.log(keysDown) // console.log(Object.keys(keysDown).length==0)//没按下 , false); var yuan= x :canvas.width / 2, y : canvas.height / 2, r:12 ; function randomNum(minNum,maxNum) switch(arguments.length) case 1: return parseInt(Math.random()*minNum+1,10); break; case 2: return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); break; default: return 0; break; var sw= x:randomNum(0,canvas.width), y:randomNum(0,canvas.height), zb:[] for(var i=0;i<20;i++) sw.zb.push([randomNum(0,canvas.width),randomNum(0,canvas.height/2)]) var update = function (xx=10) if (38 in keysDown) // up yuan.y -= xx; if (40 in keysDown) // down yuan.y += xx; if (37 in keysDown) // left yuan.x -=xx; if (39 in keysDown) // right yuan.x += xx; if (32 in keysDown) // 发射子弹 // yuan.y -= xx; //自动 //zd_zb.push([yuan.x,yuan.y])//注释掉这段即可关闭全自动模式 //break // console.log(zd_zb) if(yuan.x>canvas.width) yuan.x=canvas.width if(yuan.x<0) yuan.x=0 if(yuan.y>canvas.height) yuan.y=canvas.height if(yuan.y<0) yuan.y=0 if(Object.keys(keysDown).length==0) //自动 for (var o = 0; o < sw.zb.length; o++) sw_x=sw.zb[o][0] sw_y=sw.zb[o][1] sw.zb[o][1]+=1 if(sw.zb[o][1]>canvas.height) sw.zb.splice(o,1) sw.zb.push([randomNum(0,canvas.width),randomNum(0,canvas.height/2)]) continue var z = Math.abs(((sw_x-yuan.x)**2+(sw_y-yuan.y)**2)**0.5)-yuan.r if (z<10) // sw= // x:randomNum(0,canvas.width), // y:randomNum(0,canvas.height), // sw.zb.splice(o,1) sw.zb.push([randomNum(0,canvas.width),randomNum(0,canvas.height/2)]) yuan.r += xx/8; val+=1 //限制大小 if(yuan.r>r_max) yuan.r=r_max continue ; // for(var i=0;i<10;i++) // console.log("zd.zb") // var t=0 var render = function () //清空画布 canvas.height=canvas.height; //清空画布 //显示子弹 // t+=1 //if(t==20) t=0 flx=1 for(var i=0;i<zd_zb.length;i++) t+=1 zd_x=zd_zb[i][0] zd_y=zd_zb[i][1] zd_zb[i][1]-=5 // if(zd_zb[i][1]<0) // delete zd_zb[i] // for (var o = 0; o < sw.zb.length; o++) sw_x=sw.zb[o][0] sw_y=sw.zb[o][1] zd_z = Math.abs(((sw_x-zd_x)**2+(sw_y-zd_y)**2)**0.5) if (zd_z<10) // sw= // x:randomNum(0,canvas.width), // y:randomNum(0,canvas.height), // sw.zb.splice(o,1) sw.zb.push([randomNum(0,canvas.width),randomNum(0,canvas.height/2)]) zd_zb.splice(i,1) //continue //delete zd_zb。a.splice(1)[i] yuan.r += xx/8; val+=1 //限制大小 if(yuan.r>r_max) yuan.r=r_max flx=0 continue if(flx==0) flx=1 continue if(zd_zb[i][1]>0) ctx.beginPath()//开始画 ctx.fillStyle="#FF0000";//颜色 ctx.arc(zd_x,zd_y,3,0,360);//画圆 ctx.fill()//填充 ctx.closePath()//画完 // ctx = canvas.getContext("2d"); ctx.beginPath() ctx.arc(yuan.x,yuan.y,yuan.r,0,360); ctx.fillStyle="#000000"; ctx.fill() ctx.closePath() ctx.beginPath() ctx.fillStyle="#FFFFFF"; ctx.textBaseline="alphabetic"; ctx.textAlign="center"; ctx.fillText(val,yuan.x,yuan.y+4) // ctx.measureText() ctx.closePath() for(var i=0;i<sw.zb.length;i++) ctx.beginPath() ctx.fillStyle="#FF0000"; ctx.arc(sw.zb[i][0],sw.zb[i][1],10,0,360); ctx.fill() ctx.closePath() ; var main=function () update(xx=5); render() requestAnimationFrame(main); render() main() document.body.appendChild(canvas);
以上是关于HTML5的canvas+JavaScript打造一个“贪吃饼”的主要内容，如果未能解决你的问题，请参考以下文章
[译]知名Html5 Canvas Javascript库对比
用html5的canvas和JavaScript创建一个绘图程序