大佬教程收集整理的这篇文章主要介绍了HTML5的canvas+JavaScript打造一个“贪吃饼”，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
先上效果图：
<!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,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.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, // y:randomNum(0, // } sw.zb.splice(o,1) sw.zb.push([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, // y:randomNum(0, // } sw.zb.splice(o,1) sw.zb.push([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,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,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打造一个“贪吃饼”所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。