贪吃蛇来啦，js代码，有详细注释，初学者参考，共勉

最新推荐文章于 2023-10-26 10:57:39 发布

khadijiah

最新推荐文章于 2023-10-26 10:57:39 发布

阅读量1.5k

点赞数

分类专栏： javascript 文章标签： javasript 注释

本文链接：https://blog.csdn.net/khadijiah/article/details/77497991

版权

javascript 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#Map{width: 600px;height:400px;background: burlywood;position: relative;overflow: hidden;margin: 0 auto;border: 2px dashed sienna;}
</style>
<body>
<button id="again" style="margin-left: 500px;">重新开始</button>
<button id="speed_up">加速</button>
<button id="speed_down">减速</button>
<button id="over">结束游戏</button>
<div id="Map"></div>
<script type="text/javascript">
var _map=document.getElementById("Map");
var grade=0;
//食物类
function Food(){
this.width=20;
this.height=20;
this.color="green";
this.position="absolute";
this.borderRadius=10;
this._food=null;//保存食物元素；
this.x=0;//横向移动
this.y=0;//纵向移动
this.show=function(){
//如果没有食物，随机创建食物
if(this._food==null){
this._food=document.createElement("div");
//设置食物样式
this._food.style.width=this.width+"px";
this._food.style.height=this.height+"px";
this._food.style.position=this.position;
this._food.style.backgroundColor=this.color;

this._food.style.borderRadius=this.borderRadius+"px";
//获取Map,将食物元素添加进map
_map.appendChild(this._food);
}
//如果之前创建过只需改变坐标即可
this.x=Math.round(Math.random()*29);
this.y=Math.round(Math.random()*19);
this._food.style.left=this.x*this.width+"px";
this._food.style.top=this.y*this.height+"px";
}
}
//蛇对象
function Snake(){
this.width=20;
this.height=20;
this.position= 'absolute';
this.direct="";//蛇移动的方向
this.borderRadius=10;
this.speedTime=300;//蛇移动的速度（毫秒）
//蛇节
this.snakeBody=[[3,2,"red",null],[2,2,"black",null]];//存放蛇节，一维数组中分别是横坐标、纵坐标、颜色、蛇节
//判断获取的键盘Unicode值，判断蛇的走向
this.setDirect = function(code)
{
switch(code)
{
case 37:
this.direct='left';
break;
case 38:
this.direct='up';
break;
case 39:
this.direct='right';
break;
case 40:
this.direct='down';
break;
}
}
//显示蛇
this.show=function(){
for(var i=0;i<this.snakeBody.length;i++){
if(this.snakeBody[i][3]==null){
this.snakeBody[i][3]=document.createElement("div");
this.snakeBody[i][3].style.width=this.width+"px";
this.snakeBody[i][3].style.height=this.height+"px";
this.snakeBody[i][3].style.borderRadius=this.borderRadius+"px";
this.snakeBody[i][3].style.backgroundColor=this.snakeBody[i][2];
this.snakeBody[i][3].style.position=this.position;
_map.appendChild(this.snakeBody[i][3]);
}
//设置蛇节的坐标
this.snakeBody[i][3].style.left=this.snakeBody[i][0]*this.width+"px";
this.snakeBody[i][3].style.top=this.snakeBody[i][1]*this.height+"px";
}
}
//移动蛇
this.move=function(){
//移动蛇身
var length=this.snakeBody.length-1;
for(var i=length;i>0;i--){
//让后面蛇节的坐标等于前面蛇节的坐标
this.snakeBody[i][0]=this.snakeBody[i-1][0];//横坐标
this.snakeBody[i][1]=this.snakeBody[i-1][1];//纵坐标
}
switch (this.direct){
case "left":
this.snakeBody[0][0]=this.snakeBody[0][0]-1;//蛇头横坐标减一
break;
case "up":
this.snakeBody[0][1]=this.snakeBody[0][1]-1;
break;
case "right":
this.snakeBody[0][0]=this.snakeBody[0][0]+1;
break;
case "down":
this.snakeBody[0][1]=this.snakeBody[0][1]+1;
break;
default:
return;
}
//判断吃到食物
if(this.snakeBody[0][0]==food.x&&this.snakeBody[0][1]==food.y){
grade+=5;//每吃到一个食物加5分
var x=this.snakeBody[length][0];
var y=this.snakeBody[length][1];
this.snakeBody.push([x,y,"black",null]);
food.show();
}
//判断撞墙
if(this.snakeBody[0][0]<0||this.snakeBody[0][0]>29||this.snakeBody[0][1]<0||this.snakeBody[0][1]>19)
{
clearInterval(timer);
alert("game over ！得分数："+grade+"分");
return;
}
//判断吃到自己
for(var i=2;i<this.snakeBody.length;i++)
{
if(this.snakeBody[0][0]==this.snakeBody[i][0]&&this.snakeBody[0][1]==this.snakeBody[i][1])
{
alert("哎呀~咬到自己了!得分："+grade+"分");
clearInterval(timer);
return;
}
}
this.show();
}
}
window.οnlοad=function(){
//实例化food对象
food=new Food();
food.show();//显示food；
snake=new Snake();//实例化蛇对象
snake.show();//显示蛇
timer=setInterval('snake.move()',snake.speedTime);//计时器控制速度
//按键控制
document.οnkeydοwn=function(){
var code=event.keyCode;
snake.setDirect(code);
}
var btn1=document.getElementById("again");//重新开始按钮
btn1.οnclick=function(){
//再重新实例化对象之前先移除页面所有节点
var childs=_map.childNodes;
for(var i=childs.length-1;i>-1;i--){
_map.removeChild(childs[i]);
}
//重新实例化对象
food=new Food();
food.show();//显示food；
snake=new Snake();//实例化蛇对象
snake.show();//显示蛇
}
var btn2=document.getElementById("speed_up");//加速按钮
btn2.οnclick=function(){
if(snake.speedTime==100){
snake.speedTime=100;
}
snake.speedTime-=100;
}
var btn3=document.getElementById("speed_down");//减速按钮
btn3.οnclick=function(){
snake.speedTime+=100;
}
var btn4=document.getElementById("over");//结束游戏按钮
btn4.οnclick=function(){
clearInterval(timer);
alert("结束游戏~!得分："+grade+"分");
}
}
</script>
</body>