请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <style type="text/css">
                table,tr,td{border: 1px solid #000000;}
                td{
                        width: 18px;
                        height: 18px;       
                }
                .red{background-color: #33B5E5;}
        </style>
        <body>
                <table id="bg">
                       
                </table>
        </body>
        <script type="text/javascript">
                //                1.画背景
                var bg=document.getElementById("bg");
                var maxtable=20;
                var trs=[];
                for (var i=0;i<maxtable;i++) {
                        var tr=document.createElement("tr");
                        var tds=[]
                        for (var j=0;j<maxtable;j++) {
                                var td=document.createElement("td");
                                tr.appendChild(td);
                                tds.push(td);
                        }
                        bg.appendChild(tr);
                        trs.push(tds);
                }
         //trs[4][5].className="red";
//                2.画蛇
                function Snake () {
                        this.snakeArr=[
                                {x:4,y:7},
                                {x:4,y:6},
                                {x:4,y:5},
                                {x:4,y:4},
                        ];
                        this.tuipi();
                        this.walk();
                        this.direction="right";
                        this.binding();
                }
                Snake.prototype.tuipi=function() {
                        for(var i=0;i<maxtable;i++){
                                for(var j=0;j<maxtable;j++){
                                        trs[i][j].className="";
                                }
                        }
                        for (var i=0;i<this.snakeArr.length;i++) {
                                trs[this.snakeArr[i].x][this.snakeArr[i].y].className="red";
                        }
                }

//                3.蛇皮走位
                Snake.prototype.walk=function  () {
                        this.snakeArr.pop();
                        switch(this.direction){
                                case "right":
                                        this.snakeArr.unshift({
                                                x:this.snakeArr[0].x,
                                                y:this.snakeArr[0].y + 1
                                        })
                                        break;
                                       
                                case "up":
                                        this.snakeArr.unshift({
                                                x:this.snakeArr[0].x -1,
                                                y:this.snakeArr[0].y
                                        })
                                        break;
                                       
                                case "left":
                                        this.snakeArr.unshift({
                                                x:this.snakeArr[0].x,
                                                y:this.snakeArr[0].y -1
                                        })
                                        break;
                                       
                                case "down":
                                        this.snakeArr.unshift({
                                                x:this.snakeArr[0].x +1,
                                                y:this.snakeArr[0].y
                                        })
                                        break;
                               
                        }
                       
                }
                Snake.prototype.binding=function  () {
                        var self = this;
                        document.onkeydown = function  (e) {
                                e = event|| arguments[0];
                                switch (e.keyCode){
                                        case 37:
                                                if(self.direction == "right"){
                                                        return;
                                                }
                                                self.direction = "left";
                                                break;
                                        case 38:
                                            if(self.direction == "down"){
                                                        return;
                                                }
                                                self.direction = "up";
                                                break;
                                        case 39:
                                                if(self.direction == "left"){
                                                        return;
                                                }
                                                self.direction = "right";
                                                break;
                                        case 40:
                                                if(self.direction == "up"){
                                                        return;
                                                }
                                                self.direction = "down";
                                                break;
                                               
                                }
                        }
                }
//                3.5.控制蛇皮走位
//                4.随机出果
//                5.吃果长肉
//                6.得分
//                7.撞墙就死
//                8.不能回头
//                9.果吃完消失
//                10.果随机位置不能在蛇身上
     var snake = new Snake();
      setInterval(function(){
              snake.walk();
              snake.tuipi();
          },1000)
        </script>
</html>

分享至 : QQ空间
收藏

0 个回复

您需要登录后才可以回帖 登录 | 立即注册