JavaScript(jquery)写的像素游戏贪吃蛇

设计理念：1.构成游戏的所有可见图形都是由20px*20px的正方形组成的；2.蛇的移动只根据方向改变蛇头部的下一个位置，其他身体部位全部移动到上一个部位。

代码如下：

snake.js

$(document).ready(function(){
    
    var square_length = 20;//每个方块的边长[都是正方形]
    var speedArr = [1000, 600, 300, 100];//预定速度值
    var speed = speedArr[2];//速度
    var direction = 39;//方向： 左[ascII码37] 上[38]   右[39]    下[40]
    var direction_flag = false;//键盘相应，初始为关闭状态
    var gamebox_width = 600;//游戏盒子宽度
    var gamebox_height = 400;//游戏盒子高度
    var timer = null;//定时器
    var bGameOver = true;//游戏是否结束[是]
    var bFood = false;//食物是否存在[否]
    var snake =  new Array();//蛇
    
    var each_square = $(".game_box").find(".square");
    each_square.each(function(){
        snake.push( $(this) );//添加蛇初始的每一块身体
    });
    
    $(".start").click(function(){
        if( $(this).val()=="开始游戏" ){
            bGameOver = false;
            clearInterval(timer);
            timer = setInterval(run, speed);//开启游戏
            $(this).val("暂停");
        }else if( $(this).val()=="暂停" ){
            clearInterval(timer);
            $(this).val("开始游戏");
        }
    });
    
    $(".again").click(function(){
          window.location.reload();//刷新当前页面
    });
    
    $("body").keydown(function(event) {
        if( direction_flag && event.keyCode>=37 && event.keyCode<=40 && (event.keyCode-direction)%2!=0){
            direction = event.keyCode;//改变方向
            direction_flag = false;//关闭键盘响应，防止用户过度操作
        }
    });
    
    function run(){
        /*如果食物不存在则添加食物*/
        if(!bFood){
            var food_top = null;
            var food_left = null;
            food_position();
            /*生成食物*/
            function food_position(){
                var rand_top = parseInt( gamebox_height * Math.random() );
                var rand_left = parseInt( gamebox_width * Math.random() );
                food_top = parseInt( rand_top/square_length );
                food_top = food_top * square_length;
                food_left = parseInt( rand_left/square_length );
                food_left = food_left * square_length;
                //console.log("食物坐标"+ food_left +","+ food_top);
                for(var i=0; i<snake.length; i++){
                    if( snake[i].position.top==food_top && snake[i].position.left==food_left ){
                        food_position();//如果新生成的食物在蛇的身体里，重新生成一个食物
                        break;
                    }
                }
            }
            var food = '<div class="square" style="top:'+food_top+'px; left:'+food_left+'px;"></div>';
            $(".game_box").append(food);//把新生成的食物添加到游戏盒子里
            bFood = true;
        };
        //console.log("[" + snake[1].position().left +","+ snake[1].position().top +"]");//打印“蛇”头部的位置
        /*头部位置只与方向挂钩，其他身体的每一个小块移动到上一个小块的位置*/
        var oldTop = snake[0].position().top;
        var oldLeft = snake[0].position().left;
        for(var i=0; i<snake.length; i++){
            var temp_oldTop = snake[i].position().top;
            var temp_oldLeft = snake[i].position().left;
            if( i==0 ){
                switch (direction){
                    case 37:
                        snake[0].css("left", oldLeft - square_length);
                        break;
                    case 38:
                        snake[0].css("top", oldTop - square_length);
                        break;
                    case 39:
                        snake[0].css("left", oldLeft + square_length);
                        break;
                    case 40:
                        snake[0].css("top", oldTop + square_length);
                        break;
                    default:
                        break;
                }
            }else{
                snake[i].css("top", oldTop);
                snake[i].css("left", oldLeft);
            }
            oldTop = temp_oldTop;
            oldLeft = temp_oldLeft;
        }
        direction_flag = true;//开启键盘响应
        eatFood();//判断是否吃到食物
        isAlive();//判断游戏是否结束
        var score = snake.length - 4;//计算得分
        $(".score").val( "当前得分：" + score);//显示得分
        
    }
    /*设置速度*/
    $("#speed").click(function(){
        
        /*只允许在游戏开始前更改*/
        if(bGameOver){
            switch ( $(this).val() ){
                case "慢速":
                    speed = speedArr[0];
                    break;
                case "中速":
                    speed = speedArr[1];
                    break;
                case "快速":
                    speed = speedArr[2];
                    break;
                case "极速":
                    speed = speedArr[3];
                    break;
                default:
                    break;
            }
        }
    });
    
    /*判断是否吃到食物*/
    function eatFood(){
        //alert( $("div[class=square]:last").attr("type") );
        var food = $("div[class=square]:last");
        //console.log( food.position().left +","+ food.position().top);
        if( food.position().left==snake[0].position().left && food.position().top==snake[0].position().top ){
            food.css("left", snake[snake.length-1].position().left);
            food.css("top", snake[snake.length-1].position().top);
            snake.push(food);
            bFood = false;//食物被消灭
        }
    }
    /*判断游戏是否结束*/
    function isAlive(){
        /*撞到墙壁*/
        if( snake[0].position().left>=gamebox_width | snake[0].position().left<0 | snake[0].position().top>=gamebox_height | snake[0].position().top<0 ){
            clearInterval(timer);
            bGameOver = true;
            $(".start").val("游戏结束");
            alert("游戏结束，您撞到墙了");
        }
        /*撞到自己*/
        for(var i=1; i<snake.length; i++){
            if( snake[0].position().left == snake[i].position().left && snake[0].position().top == snake[i].position().top){
                clearInterval(timer);
                bGameOver = true;
                $(".start").val("游戏结束");
                alert("游戏结束，您撞到自己了");
            }
        }
    }
});

snake.html

<!DOCTYPE HTML>
<html> 
<head>
    <title> 贪吃蛇 </title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
    <script src="./js/snake.js"></script>
    <link href="./css/snake.css" rel="stylesheet" type="text/css" />
</head> 
<body>
    <div class="head">
        <h3>请在游戏开始前设置速度，请操作键盘←↑→↓控制方向</h3>
    </div>
    <div class="game_set">
        <div class="content">
            <input type="button" class="input_button start" value="开始游戏"/>
            <select id="speed" class="input_button">
              <option value="慢速">慢速</option>
              <option value="中速">中速</option>
              <option value="快速" selected = "selected">快速</option>
              <option value="极速">极速</option>
            </select>
            <input type="button" class="input_button score" value="当前得分：0"/>
            <input type="button" class="input_button again" value="新的游戏"/>
        </div>
    </div>
    <div class="game_box" id="game_box">
        <div class="square" style="left:60px; background-color:#ff0066;" id="sanke_head" ></div>
        <div class="square" style="left:40px; background-color:#0099ff"></div>
        <div class="square" style="left:20px; background-color:yellow"></div>
        <div class="square" style="left:0px; background-color:#00ff00"></div>
    </div>
</body> 
</html>

 

 

snake.css

.head{
    width: 100%;
    height: 43px;
    border-bottom: 1px solid #d6dfea;
    text-align: center;
}
.head h3{
    line-height:30px;
    color: #ccc;
}
.game_set{
    width: 100%;
    border-bottom: 1px solid #d6dfea;
    text-align: center;
}
.content{
    margin: 13px 0 13px 0;
}


.game_box{
    width: 600px;
    height: 400px;
    margin: 0 auto;/*div相对屏幕左右居中*/
    margin-top: 43px;
    background-color: #ffffff;
    border: solid 1px #ff0000;
    position: relative;
}
.square{
    width: 20px;
    height: 20px;
    background-color: #000000;
    border: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    border: solid 1px #ffffff;
}
.input_button{
    cursor: pointer;
    width: 106px;
    height: 42px;
    line-height: 42px;
    background-color: #5a98de;
    border-radius:3px;
    color: #fff;
    border: 0;
    font-size: 20px;
}
.score{
    width: 181px;
    cursor: text;
}