原生JavaScript实现贪吃蛇的游戏

原创 2018年04月17日 18:36:10
贪吃蛇游戏的思考步骤:
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.onkeypress=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>

JavaScript贪吃蛇游戏视频课程

-
  • 1970年01月01日 08:00

HTML5 + js 贪吃蛇游戏设计与实现

游戏架构: 此游戏架构大概分为三层: Game.html: 说明:包含了界面的展示,以及一些事件的入口。   完整代码: html5 snake game     游戏面板 --...
  • csharp25
  • csharp25
  • 2011-08-03 17:59:14
  • 3732

JS实现简单的贪吃蛇小游戏

网页布局框架搭建: 贪吃蛇小游戏
  • qq_27905183
  • qq_27905183
  • 2017-04-10 12:35:28
  • 647

js开发实现简单贪吃蛇游戏(20行代码)

曾经诺基亚的贪吃蛇风靡一时,在游戏匮乏的年代,用java实现太难,现在网页制作20行代码就做成一个简单的demo了,时代在进步啊 代码: 01 02 html>...
  • hj7jay
  • hj7jay
  • 2016-03-30 09:45:31
  • 52883

基于js面向对象和canvas动画实现贪吃蛇游戏

#cv { display: block; margin: 50px auto; ...
  • kaim2015
  • kaim2015
  • 2016-12-07 22:57:41
  • 1312

用JavaScript实现贪吃蛇游戏

利用JavaScript实现贪吃蛇小游戏
  • lizhihong92
  • lizhihong92
  • 2016-06-10 22:45:36
  • 299

纯JS代码实现的贪吃蛇小游戏

  • 2011年09月29日 17:14
  • 3KB
  • 下载

90行js代码实现简单贪吃蛇

  • 2017年04月13日 23:16
  • 2KB
  • 下载

原生JS实现传统贪吃蛇小游戏

这是我第一个独立完成的小游戏,做完的时候发现游戏不难,但是我还是写了一天半,总之这是一个好的开始,好好加油,以后会更棒的! 贪食蛇小游戏 *{ ...
  • lansing_1995
  • lansing_1995
  • 2016-08-18 15:16:18
  • 464

js实现贪吃蛇小游戏代码(源码)

贪吃蛇游戏     //定义一个点对象     function Point(x,y){         this.x=x;         this.y=y;         th...
  • qq_34222743
  • qq_34222743
  • 2018-01-13 19:32:06
  • 144
收藏助手
不良信息举报
您举报文章:原生JavaScript实现贪吃蛇的游戏
举报原因:
原因补充:

(最多只允许输入30个字)