首页 > 代码库 > HTML5----简易贪吃蛇小游戏
HTML5----简易贪吃蛇小游戏
话不多说直接贴上代码:
<script> window.onload = function(){ //定义一些公共变量 var gj = document.getElementById("gj"); var p2 = gj.getContext("2d"); //定义蛇的变量 var snake = 3; //定义存储蛇身体的数组 var sBody = []; //定义蛇的初始化位置(坐标) 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(); } //调用函数 putFood(); var Run = setInterval(sankeRun,160); //随机放食物 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; } //调整蛇的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>
效果图 如下:
HTML5----简易贪吃蛇小游戏
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。