前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML+JS实现简单贪吃蛇游戏

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

作者头像
ZackSock
发布2020-02-14 13:52:00
4.1K0
发布2020-02-14 13:52:00
举报
文章被收录于专栏:ZackSock

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

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

先给大家看看HTML代码,这个比较简单:

代码语言:javascript
复制
<!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:

代码语言:javascript
复制
var snake = document.getElementById("snake");

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

代码语言:javascript
复制
//这里的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;
}

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

代码语言:javascript
复制
//这个的move方法是自己定义的
time = setInterval(move, 200);

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

代码语言:javascript
复制
//获取div
var snake = document.getElementById("snake");

//获取div离顶部的距离
var top_length = snake.offsetTop;

//获取div离左边的距离
var left_length = snake.offsetLeft;

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

代码语言:javascript
复制
//根据先前保存的direction,分辨方向
switch (direction){
    case up:
            //当top_length>0的时候,说明还没有到顶部,可以继续往上移动
            if(top_length > 0){
                //每次向上移动10px
                top_length -= 10;

                //改变snake距顶部的距离
                snake.style.top = top_length + "px";
            }
            break;
}

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

代码语言:javascript
复制
//显示食物
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()方法,先随机产生上左边距:

代码语言:javascript
复制
var food_top = Math.floor(Math.random()*50)*10;
var food_left = Math.floor(Math.random()*50)*10;

创建食物,然后拼接到map上:

代码语言:javascript
复制
//关联Map
var map = document.getElementById("map");

//创建food
food = document.createElement("div");

//拼接food
map.appendChild(food);

然后设置食物的属性:

代码语言:javascript
复制
//设置绝对布局,和上左距离
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代码:

代码语言:javascript
复制
/**
 * 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 删除

本文分享自 新建文件夹X 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档