原生JavaScript实现贪吃蛇的游戏

最新推荐文章于 2022-11-30 00:14:35 发布

风或许自媒体

最新推荐文章于 2022-11-30 00:14:35 发布

阅读量1.1k

点赞数 1

分类专栏：前端从入门到放弃文章标签：贪吃蛇原生JavaScript

本文链接：https://blog.csdn.net/LY_code/article/details/79978727

版权

前端从入门到放弃专栏收录该内容

36 篇文章 5 订阅

订阅专栏

贪吃蛇游戏的思考步骤：

1.默认初始值（3个）默认向右走
2.封装函数move，去移动蛇
3.去监听键盘的事件，看用户的怎么移动蛇
4.去判断碰到墙就死亡，结束游戏
5.去完成投放食物的封装函数
6.去实现蛇的吃食物的函数

其实我们触发键盘事件，我们是这么处理的，这是一种比较简单的想法。

一个div是40px，当横着三个div数组，往右。数组0是蛇头，那么当移动时是最后一个div 的left和top值变，变成蛇头的left值变大40，top值不变，top值直接就是蛇头的top。

效果图：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇游戏</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .contain {
            /*box-sizing: border-box;*/
            width: 800px;
            height: 560px;
            background-color: #c3c4c3;
            border: 1px double black;
            position: relative;
            margin: 0 auto;
        }
        .contain div{
            box-sizing: border-box;
            width: 40px;
            height: 40px;
            border: 1px solid black;
            background-color: coral;
            top: 0;
            left: 0;
            position: absolute;
        }
        .contain div:nth-child(1){
            left:80px;
        }
        .contain div:nth-child(2){
            left:40px;
        }
    </style>
</head>
<body>
<div class="contain" id = "contain">
    <div></div>
    <div></div>
    <div></div>
</div>
<!--

1.默认初始值（3个）默认向右走
2.封装函数move，去移动蛇
3.去监听键盘的事件，看用户的怎么移动蛇
4.去判断碰到墙就死亡，结束游戏
5.去完成投放食物的封装函数
6.去实现蛇的吃食物的函数
-->
<script>
    var divs = document.querySelectorAll(".contain div");
    var contain = document.getElementsByClassName("contain");
    console.log(contain);
    var snakeBody = [divs[0],divs[1],divs[2]];
    //设置默认方向全局变量，默认为右边
    var direction = "right";
    var food;
    var speed=1;
    //第一次投放食物
    putFood();

    //调用move函数
    move();

    /*去让蛇动起来*/
    function move() {

        //每次移动要判断键盘事件到底往哪里走，去监听用户的键盘事件
        init();
        setTimeout(function step() {
            /*取出蛇身体的最后一个元素，然后把它插到蛇头位置,pop变量就是我要操作的蛇尾部位
            * 不应该放在setTimeout外面，这样，只有第一回会选中蛇的身体的最后一个
            * 而在后面就只剩一个在那里移动了。
            * 要在每次蛇移动后重新取得最新的蛇尾，也就是pop的元素
            * */
            var pop = snakeBody.pop();

            /*每次移动要判断是否蛇已经死掉了，撞墙，返回Boolean值
            * 每次的移动毒药去判断是不是已经死掉，不要放在setTimeout外面
            * */
            var num=isDead()
            if(num){
                /*var ui=snakeBody.shift();
                ui.style.left=ui.offsetLeft-120+"px";
                snakeBody.push(ui);*/
                // checkEnd(num);
                alert("游戏结束");
                return;
            }

            if(direction=="right"){
                pop.style.left = snakeBody[0].offsetLeft+40+"px";
                pop.style.top = snakeBody[0].offsetTop+"px";
            }else if(direction=="left"){
                pop.style.left = snakeBody[0].offsetLeft-40+"px";
                pop.style.top = snakeBody[0].offsetTop+"px";
            }else if(direction=="up"){
                pop.style.left = snakeBody[0].offsetLeft+"px";
                pop.style.top = snakeBody[0].offsetTop-40+"px";
            }else{
                pop.style.left = snakeBody[0].offsetLeft+"px";
                pop.style.top = snakeBody[0].offsetTop+40+"px";
            }
            snakeBody.unshift(pop);
            //每次移动好了判断吃到了食物没有
            eatFood();
            setTimeout(step,500/speed);
        },500)

    }


    /*对document监听用户的键盘事件*/
    function init() {


        document.οnkeypress=function (e) {
            var code=e.keyCode;
            if(code==37){
                if(direction=="right") return;   //如果本来的方向是左边，那么现在再次按右箭头将失效
                direction="left";
            }else if(code==38){
                if(direction=="down") return;
                direction="up";
            }else if(code==39){
                if(direction=="left") return;
                direction="right";
            }else{
                if(direction=="up") return;
                direction="down";
            }
        }
    }

    /*判断蛇是否死掉了的函数
    * true 表示已经死掉  FALSE表示没死
    * */
    function isDead() {
        //用蛇头来判断是否撞墙，这里有bug没有解决：蛇头会出去
        var head = snakeBody[0];
         if(head.offsetTop<0 ||head.offsetLeft<0 || head.offsetTop>520 || head.offsetLeft>760) return true;
    }
    
    /*随机投放食物
    * 800/40=20   600/40==15  所以left应该设置为0-19 *40  与  0-14 *40
    * 生成div，把他插到蛇的数组的最后即可
    * */
    function putFood(){
        food = document.createElement('div');
        food.style.left = randomNum(0,19)*40 + 'px';
        food.style.top = randomNum(0,13)*40 + 'px';
        food.style.backgroundColor = "pink";
        //  这里传递的是一个类数组，要下标。
        contain[0].appendChild(food);
    }


    /*吃食物*/
    function eatFood() {
        var head = snakeBody[0];
        //当蛇头的左和上边距等于生成的div的左和上边距那么就表示吃到了
        if(head.offsetLeft==food.offsetLeft && head.offsetTop==food.offsetTop){
            snakeBody.push(food);
            food.style.backgroundColor="coral";
            putFood();  //吃完，重新投放食物
            speed += 0.5;
        }
    }
    /*生产随机数的函数*/
    function randomNum(n,m) {
        return parseInt(Math.random()*(m-n+1)+n);
    }

    /*检查撞墙后有一个div在外面的bug
    * 1表示撞到上面   2表示撞到左面  3表示撞到下面   4表示撞到右面
    * 这里的bug还是没有解决
    * */

</script>
</body>
</html>