話不多說直接貼上代碼:

<script>window.onload = function(){//定義一些公共變量var gj = document.getElementById("gj");var p2 = gj.getContext("2d");//定義蛇的變量var snake = 3;//定義存儲蛇身體的數(shù)組var sBody = [];//定義蛇的初始化位置(坐標(biāo))var x = y = 0;//定義蛇的初始化運動方向var direction = 39;//定義食物的位置var fx = fy =0;//繪制場景(運動場所)var bg = document.getElementById("bg");var p1 = bg.getContext("2d");p1.strokeStyle="#efefef"var bx = 0;var by = 0;for(var i = 0;i<=40;i++){//1.畫橫線 by+=10;p1.moveTo(0,by)p1.lineTo(400,by)p1.stroke();//2.畫豎線 bx+=10;p1.moveTo(bx,0)p1.lineTo(bx,400)p1.stroke();}//調(diào)用函數(shù) putFood();var Run = setInterval(sankeRun,160);//隨機(jī)放食物function putFood(){fx = Math.ceil(Math.random()*40-1)*10;fy = Math.ceil(Math.random()*40-1)*10;p2.fillStyle="#009900";p2.fillRect(fx,fy,10,10);}document.onkeydown = function(){switch(event.keyCode){case 37: direction = 37;break;//左case 38: direction = 38;break;//上case 39: direction = 39;break;//右case 40: direction = 40;break;//下 }}//蛇運動function sankeRun(){switch(direction){case 37: x -= 10;break;case 38: y -= 10;break;case 39: x += 10;break;case 40: y += 10;break;}//調(diào)整蛇的x方向路徑 p2.fillStyle="#ffff66";p2.fillRect(x,y,10,10); clear();sBody.push({'x':x , 'y':y});bump();}//擦除尾部function clear(){if(sBody.length>snake){var wb = sBody.shift();p2.clearRect(wb.x,wb.y,10,10);}}//碰撞檢測function bump(){//撞墻if(x>=400 || y>=400 || x<=-1 || y<=-1){alert("碰壁而死");clearInterval(Run);x = 0;y = 0; }//撞自己//for(var i=0;i<=sBody.length;i++){//alert(sBody[i].x+"---"+sBody[i].y);//if(sBody[i].x == x && sBody[i].y == y){//alert("自爆而亡");//clearInterval(Run);//x = 0;//y = 0; //window.location.reload();//刷新頁面//}//}//蛇吃食物if(x == fx && y == fy){snake += 1;putFood();}}} </script>

效果圖 如下:

?

轉(zhuǎn)載于:https://www.cnblogs.com/qihangzj/p/6610829.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的HTML5----简易贪吃蛇小游戏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。