html5js贪吃蛇撞墙,HTML+JS实现简单贪吃蛇游戏

HTML+JS实现简单贪吃蛇游戏

转载

mb5fe559d8b9ae42021-06-13 13:26:34©著作权

文章标签

java

阅读数

2

https://blog.51cto.com/u_15067227/2900453

因为js是单线程的，所以有js写贪吃蛇可以少考虑很多东西，感觉非常方便。今天给大家介绍一个非常简单的贪吃蛇写法。我说的非常简单勒，就是指没有游戏结束，也不会变长。哈哈，反正就是非常简单了。


大概就是这个样子，可以移动可以随机出现食物，也可以出食物。

先给大家看看HTML代码，这个比较简单：

```

```

里面就三个div，就不多说了。

然后是js代码，首先获取snake的div：

```

var snake = document.getElementById("snake");

```

判断按钮，把方向记录下来(wasd、上左下右)：

```

//这里的direction、up、down、right、left这些变量是在前面定义的

if(e.keyCode == 119){

//上

direction = up;

}else if(e.keyCode == 115){

//下

direction = down;

}else if(e.keyCode == 100){

//右

direction = right

}else if(e.keyCode == 97){

//左

direction = left;

}

```

判断方向后，就要开始移动了。这里就需要使用定时器：

```

//这个的move方法是自己定义的

time = setInterval(move, 200);

```

然后说一下move方法，先获取snake的div，然后获取div距浏览器上面和左边的距离：

```

//获取div

var snake = document.getElementById("snake");

//获取div离顶部的距离

var top_length = snake.offsetTop;

//获取div离左边的距离

var left_length = snake.offsetLeft;

```

然后判断方向移动，这里就写一个方向，其他的也差不多：

```

//根据先前保存的direction，分辨方向

switch (direction){

case up:

//当top_length>0的时候，说明还没有到顶部，可以继续往上移动

if(top_length > 0){

//每次向上移动10px

top_length -= 10;

//改变snake距顶部的距离

snake.style.top = top_length + "px";

}

break;

｝

```

移动的时候随机出现食物：

```

//显示食物

if(food == null){

//当食物为空时，就显示食物。

showFood();

}else{

var map = document.getElementById("map");

//判断蛇是否吃到食物

if(left_length == food.offsetLeft && top_length == food.offsetTop){

//当蛇吃到食物时，移除食物，并致为null

map.removeChild(food);

food = null;

}

}

```

最后是showFood()方法，先随机产生上左边距：

```

var food_top = Math.floor(Math.random()*50)*10;

var food_left = Math.floor(Math.random()*50)*10;

```

创建食物，然后拼接到map上：

```

//关联Map

var map = document.getElementById("map");

//创建food

food = document.createElement("div");

//拼接food

map.appendChild(food);

```

然后设置食物的属性：

```

//设置绝对布局，和上左距离

food.style.width = "10px";

food.style.height = "10px";

food.style.position = "absolute";

food.style.backgroundColor = "blue";

food.style.top = food_top + "px";

food.style.left = food_left + "px";

```

差不多就是这样了。下面给大家看看全部的js代码：

```

/**

* Created by Administrator on 2018/11/21.

*/

var time;

var direction;

var up = 1;

var down = 2;

var left = 3;

var right = 4;

var food;

onkeypress = function(e){

window.clearInterval(time);

var snake = document.getElementById("snake");

var top_length = snake.offsetTop;

if(e.keyCode == 119){

//上

direction = up;

}else if(e.keyCode == 115){

//下

direction = down;

}else if(e.keyCode == 100){

//右

direction = right

}else if(e.keyCode == 97){

//左

direction = left;

}

time = setInterval(move, 200);

};

function move(){

var snake = document.getElementById("snake");

var top_length = snake.offsetTop;

var left_length = snake.offsetLeft;

switch (direction){

case up:

if(top_length > 0){

top_length -= 10;

snake.style.top = top_length + "px";

}

break;

case down:

if(top_length < 490){

top_length += 10;

snake.style.top = top_length + "px";

}

break;

case left:

if(left_length > 0){

left_length -= 10;

snake.style.left = left_length + "px";

}

break;

case right:

if(left_length < 490){

left_length += 10;

snake.style.left = left_length + "px";

}

break;

}

//显示食物

if(food == null){

showFood();

}else{

var map = document.getElementById("map");

//alert(left_length + ":" + food.offsetLeft + "|" + top_length + ":" + food.offsetTop);

if(left_length == food.offsetLeft && top_length == food.offsetTop){

map.removeChild(food);

food = null;

}

}

}

/**

* 随即出现食物

*/

function showFood(){

var food_top = Math.floor(Math.random()*50)*10;

var food_left = Math.floor(Math.random()*50)*10;

var map = document.getElementById("map");

food = document.createElement("div");

map.appendChild(food);

food.style.width = "10px";

food.style.height = "10px";

food.style.position = "absolute";

food.style.backgroundColor = "blue";

food.style.top = food_top + "px";

food.style.left = food_left + "px";

}

```

https://mp.weixin.qq.com/s/0K1aYqxKIBCAssAcWX-Rvw

赞

收藏

评论