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

ZackSock

发布于 2020-02-14 13:52:00

4.1K0

发布于 2020-02-14 13:52:00

文章被收录于专栏：ZackSock

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    #container{

    }
    #map{
        width: 500px;
        height: 500px;
        margin: 30px auto;
        background-color: antiquewhite;
        position: relative;
    }
    #snake{
        width: 10px;
        height: 10px;
        background-color: red;
        position: absolute;
        top: 100px;
    }
</style>
<body>
<div id="container">
    <!-- 地图的div -->
    <div id="map">
        <div id="snake"></div>
    </div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</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";
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-09-20，如有侵权请联系 cloudcommunity@tencent.com 删除

html