web game

snake.js

(function() {
    var G = {};
    G.Game = function() {
        var start = "";
        this.boxWidth = 25;//单位宽度
        this.boxHeight = 15;//单位长度 
        this.blockWidth = 30; //单位块
        this.speed = 200; //运动速度
        var blockWidth = this.blockWidth - 2;//border为1 预留
        var _this = this;
        var snakeBox = document.createElement("div");//容器
        var snakeBody = [] //蛇身
        var foodObj = "";  //食物对象
        var moveFinish = 0; 
        var direction = 0; //移动方向 :0-上 1-左 2-下 3-右
        var block = function(l, t) {//创建单位块
            var el = document.createElement("span");
            el.setAttribute("style", "display:block; height:" + blockWidth + "px;width:" + blockWidth + "px; position:absolute;border:1px solid #ccc;background:#000;left:" + l + "px;top:" + t + "px");
            return el
        }
         function createFood() { //创建食物
            var fl = Math.floor(Math.random() * _this.boxWidth) * _this.blockWidth;
            var ft = Math.floor(Math.random() * _this.boxHeight) * _this.blockWidth;
            for (var s in snakeBody) {//不允许食物生成在蛇身
                if (parseInt(snakeBody[s].style.left) == fl && parseInt(snakeBody[s].style.top) == ft) {
                    food();
                    break
                }
            }
            foodObj = new block(fl, ft);
            
        }
        function onEat() {//吃食物
            snakeBody.splice(0, 0, foodObj);
            snakeBox.appendChild(snakeBody[0]);
            createFood();
            snakeBox.appendChild(foodObj)
        }
       function snakeInit() {//蛇身初始化
            for (var s in snakeBody) {
                snakeBox.removeChild(snakeBody[s])
            }
            snakeBody.splice(0, snakeBody.length);
            snakeBody[0] = new block(parseInt(_this.boxWidth / 2) * _this.blockWidth, (_this.boxHeight - 2) * _this.blockWidth);
            snakeBody[1] = new block(parseInt(_this.boxWidth / 2) * _this.blockWidth, (_this.boxHeight - 1) * _this.blockWidth);
            snakeBox.appendChild(snakeBody[0]);
            snakeBox.appendChild(snakeBody[1])
        }
        function gameOver() {
            clearInterval(start)
			alert("Game Over");
            snakeInit();
            
        }
        function isInBox(head) {//判断是否在容器内
            var headLeft = parseInt(head.style.left);
            var headTop = parseInt(head.style.top);
            return (headLeft >= 0 && headTop >= 0 && headLeft <= _this.blockWidth * (_this.boxWidth - 1) && headTop <= _this.blockWidth * (_this.boxHeight - 1))
        }
        function snakeGo() {//蛇身运动
            var head = snakeBody[0];
            switch (direction) {//根据当前方向来生成新蛇头出现的位置
            case 0:
                var newHead = new block(parseInt(head.style.left), parseInt(head.style.top) - _this.blockWidth);
                break;
            case 1:
                var newHead = new block(parseInt(head.style.left) - _this.blockWidth, parseInt(head.style.top));
                break;
            case 2:
                var newHead = new block(parseInt(head.style.left), parseInt(head.style.top) + _this.blockWidth);
                break;
            case 3:
                var newHead = new block(parseInt(head.style.left) + _this.blockWidth, parseInt(head.style.top));
                break
            }
            if (newHead.style.left == foodObj.style.left && newHead.style.top == foodObj.style.top) {//监听食物
                onEat()
            } else {
                for (var s in snakeBody) {//与自身相撞
                    if (snakeBody[s].style.left == newHead.style.left && snakeBody[s].style.top == newHead.style.top) {
                        gameOver();
                        return false
                    }
                }
                if (!isInBox(newHead)) {//与容器边界相撞
                    gameOver();
                    return false
                }
                snakeBox.removeChild(snakeBody[snakeBody.length - 1]);
                snakeBody.pop();
                snakeBody.splice(0, 0, newHead);
                snakeBox.appendChild(snakeBody[0]);
                moveFinish = direction;//完成移动
            }
        }
        function keyPress(code) {
            if (moveFinish != direction) return false; //判断上一个移动是否完成
            switch (code) {
            case 37:
                direction = direction == 3 ? 3 : 1; //不允许直接向后移动
                break;
            case 38:
                direction = direction == 2 ? 2 : 0;
                break;
            case 39:
                direction = direction == 1 ? 1 : 3;
                break;
            case 40:
                direction = direction == 0 ? 0 : 2;
                break
            }
        }
        this.init = function() {//初始化
            snakeBox.style.width = this.boxWidth * this.blockWidth + "px";
            snakeBox.style.height = this.boxHeight * this.blockWidth + "px";
            snakeBox.style.border = "1px solid red";
            snakeBox.style.position = "relative";
            createFood();
            snakeBox.appendChild(foodObj);
            snakeInit();
            document.documentElement.onkeydown = function(e) {
                var e = e || event;
                var code = e.keyCode || e.which;
                keyPress(code)
            }
            return snakeBox
        }
        this.gameStart = function() {
            start = setInterval(snakeGo, _this.speed)
        }
        this.gameStop = function() {
            clearInterval(start)
        }
    }
    Element.prototype.appendGame = function() {
        var gs = new G.Game();
        this.appendChild(gs.init());
        gs.gameStart()
    }
}())