欢迎来到程序小院

贪吃蛇

玩法：
键盘方向键（← ↑ → ↓）键来控制方向，空格键暂停，每成功吃到食物，分数加1，
随着蛇身的加长，速度也会上升，当蛇头跃出边界或者撞到自身时，游戏结束 

开始游戏

HTML

  <div class="wrap">
    <ul class="snake_wrap">
        <li class="light"></li>
        <li class="light"></li>
        <li class="light"></li>
    </ul>
    <span class="food"></span>
    <div class="gameData">
        <div class="gameScore"><span>分数：</span>0</div>
        <div class="gameTime">用时：<span class="time" id="time">00：00：00</span></div>

        <div class="gameRule">
            <p>
                【 ↑ 】上键<br />
                【←】左键<br />
                【→】右键<br />
                【 ↓ 】下键<br />
                【 - 】空格键 暂停<br />
            </p>
        </div>
    </div>
  </div>

CSS

    .snake_wrap{
        width:810px;
        height:600px;
        position: absolute;
        top:0px;
        left:0px;
        overflow: hidden;
        z-index:999;
    }
    .snake_wrap li{
        width:14px;
        height:14px;
        background:#FFC400;
        float: left;
        margin: 1px 0 0 1px;
        position: absolute;
    }

    .food{
        width:14px;
        height:14px;
        background:#f4645f;
        position: absolute;
        top:30px;
        left:45px;
        z-index:999;
    }

js

  $(function(){
    getTime()
    $(this).closest('.start').stop().hide();
    mySnakeFn();

    $('.game_over').on('click',function(){
        $('.start').stop().show();
        $(this).closest('.over').stop().hide();
        $('input[name=your_name]').val('');
    })

    $('.clear_data').on('click',function(){
        $('.ranking_list').empty();
    })

  })
  function getTime()
  {
    var hour,minute,second;//时 分 秒
    hour=minute=second=0;//初始化

    var int;
    var millisecond=0;//毫秒
    int=setInterval(timer,1000)

    //计时
    function timer(){
        second++;
        if(second>=60){
            second=0;
            minute=minute+1;
        }

        if(minute>=60){
            minute=0;
            hour=hour+1;
        }
        hour_text = hour == 0 ? '00' : hour;
        minute_text = minute == 0 ? '00' : minute;
        second_text = second < 10 ? '0'+ second : second;
        document.getElementById('time').innerText=
        hour_text+'：'+minute_text+'：'+second_text+'';

    }
  }
  function mySnakeFn(){
    //全局变量对相
    var myVar = {
            //移动控制变量
            del_x:-15,
            del_y:0,
            //初始长度
            myscore:0,
            //移动速度
            speed:100,
            //计时器
            itimes:null
        }


        // 初始位置

    ;(function(){
        var arr_snake = [['300px','390px'],['300px','405px'],['300px','420px']];
        $('.snake_wrap').empty();
        $('.snake_wrap').append('<li></li><li></li><li></li>')
        $('.snake_wrap li').each(function(value){
            $(this).css({'top':arr_snake[value][0],'left':arr_snake[value][1]})
        })
    })(jQuery);

    //键盘控制--上下左右暂停
    ;(function(){

        //暂停判定
        var stop = true;

        $(document).keydown(function(event) {
            switch(event.keyCode){
                //空格 暂停
                case 32:stop ? clearInterval(myVar.itimes) : run();
                    stop = !stop;
                    break;
                //左
                case 37:directionKey(-15,0,true);
                    break;
                //上
                case 38:directionKey(0,-15,false);
                    break;
                //右
                case 39:directionKey(15,0,true);
                    break;
                //下
                case 40:directionKey(0,15,false);
                    break;
            }
        });
    })(jQuery);

    //方向判断
    function directionKey(y1,y2,bour){
        if(!myVar.del_x == bour){
            myVar.del_x = y1;
            myVar.del_y = y2;
        }
    }

    function run(){
        //计时器，每speed时刷新一次
        myVar.itimes = setInterval(function(){
            //获取当前食物位置
            var food_top = $('.food').position().top;
            var food_left = $('.food').position().left;
            //设置新增蛇头坐标
            var header_top = $('.snake_wrap li').eq(0).position().top + myVar.del_y;
            var header_left = $('.snake_wrap li').eq(0).position().left + myVar.del_x;
            //当前蛇头颜色重置
            $('.snake_wrap li').eq(0).css({'background': '#7FD75A'});
            //新增蛇头，并赋予样式
            $('.snake_wrap').prepend('<li></li>');
            $('.snake_wrap li').eq(0).css
            ({'left':header_left + 'px','top':header_top + 'px','background':'rgba(244,100,95,1)'})
            //移除最后一节蛇尾
            $('.snake_wrap li:last').remove();

            //判断蛇是否吃到食物
            if((header_left == (food_left - 1)) && (header_top == (food_top - 1))){
                var last_top = $('.snake_wrap li:last').position().top;
                var last_left = $('.snake_wrap li:last').position().left;
                $('.snake_wrap li:last').css('border-radius','0');
                $('.snake_wrap').append('<li></li>');
                $('.snake_wrap li:last').eq(0).css({'left':last_left + 'px','top':last_top + 'px'})
                $('.snake_wrap li:last').eq(0).css('border-radius','0');

                //刷新食物
                foodRandom();

                //蛇身长度
                myVar.myscore++;
                scoreFn(myVar.myscore);

                //每加长5，速度提升10
                if(!(myVar.myscore%5) && myVar.speed > 10){
                    clearInterval(myVar.itimes);
                    myVar.speed -= 10;
                    run();
                }
            }

            //边界判断
            borderDetection(header_top,header_left);
            //自撞判断
            selfDetection(header_top,header_left);
        },myVar.speed)
    }
    run();

    //分数
    function scoreFn(x){
        $('.gameScore').html('<span>分数：</span>'+ x)
    }

    //食物
    function foodRandom(){
        var t = 40;
        var x = 54;
        var y = 0;
        var repeat = false;
        var top = parseInt(Math.random() * (t - y) + y);
        var left = parseInt(Math.random() * (x - y) + y);

        //判断食物与蛇身坐标是否重合
        $('.snake_wrap li').each(function() {
            if($(this).position().left == left && $(this).position().top == top){
                foodRandom();
            }else{
                repeat = true;
            }
        });

        //如果食物没在蛇身上，定位食物
        if(repeat){
            $('.food').css({'top':top*15 + 1 + 'px','left':left*15 + 1 + 'px'});
        }
    }
    foodRandom();

    // 边界判定
    function borderDetection(HT,HL){
        if(HT<0 || HT > 585 || HL < 0 || HL >795){
            clearInterval(myVar.itimes);
            gameOver();
            //rankingList()
        }
    }

    //自撞判定
    function selfDetection(HT,HL){
        //从第二节开始，坐标是否与蛇头重合
        $('.snake_wrap li:gt(0)').each(function(index, val) {
            var this_top = $(this).position().top;
            var this_left = $(this).position().left;
            if( HL == this_left && HT == this_top ){
                clearInterval(myVar.itimes);
                gameOver();
            }
        })
    }

    //游戏结束
    function gameOver(){
        setTimeout(() => {
            hsycms.tips('tips','游戏结束，恭喜你获得'+myVar.myscore+'分',function(){
                location.reload();
            },3000)
        }, 0);
    }
  }

源码

需要源码请关注添加好友哦^ ^

转载：欢迎来到本站，转载请注明文章出处https://ormcc.com/