贪吃蛇 // zhenn's note

不得不承认，兴趣是激发人进步的最好催化剂。以前还没写过类似这样的东西，不过数月之前就很想把他写出来，由于时间的短缺，一直没有执行，直到这个周末，终于按捺不住写了这个“七彩贪吃蛇”，虽然功能很简单，但是对我来说，还是从中汲取了不少养分，或者说以前掌握的知识点记得更牢固了，要不怎么说实践是最好的老师呢！先看操作界面：
操作方法如下：
点击“开始按钮”或者回车键开始游戏。
使用↑→↓←可控制蛇身前进的方向！
每得5分即可升级，速度也会相应加快，共12级！
如果操作不当，蛇身超过边界或者蛇头接触蛇身上任意一点，则会提示游戏失败，然后点击回车键，会重新加载游戏，所得积分和等级清零！
开始游戏后，请关闭此说明，以免在操作游戏时，使网页上下移动，影响游戏的效果！
游戏代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>七彩贪吃蛇！</title>
<style type="text/css">
*{ margin:0; padding:0;}
h1{ text-align:center; margin-top:14px;}
table{ background:#d4d4d4; border:1px solid blue; margin:10px auto 0;}
table td{ width:15px; height:15px; background:#fff; font-size:12px; font-weight:bold;}
#operation{ width:486px; margin:15px auto 0; position:relative;}
#operation div{ position:absolute; right:0; top:0;}
#operation div em{ color:#f00; font-style:normal; font-weight:bold; padding-right:3px;}
#copyright{ width:486px; margin:30px auto;}
ol{ width:486px; border:1px solid #d5d5d5; margin:10px auto 0; font-size:13px; line-height:20px; padding:6px 0; display:none;}
ol li{ list-style-position:inside; margin:0 6px;}
</style>
</head>
  
<body onload="zhenn.init()">
<script type="text/javascript">
function $(tag){
    return document.createElement(tag);
}
  
var zhenn = {
    //蛇的宿主对象（环境）
    obj: null,
    //蛇身,存放蛇的每一个节点，数据结构为{x:num,y:num,color:""}
    snakeBody: [],
    //判断蛇是否处于暂停状态
    paused: true,
    //判断蛇前进的方向，有四个值，分别为0,1,2,3
    directions: 0,
    //定时器
    timer: null,
    //定义蛇移动的速度,值越大，速度越慢
    speed: 600,
    //得分
    score: 0,
    //分数显示器
    container: null,
    //记录升级提示信息
    upgrade: 0,
    rowCount: 30,
    colCount: 30,
    colors : ["red","orange","yellow","green","blue","indigo","purple"], //声明数组，存放7种颜色
    //初始化方法
    init: function(){
        var colorIndex = 0;
        var x = 0;
        var y = 0;
        var console = document.getElementById("operation");
        this.obj = $("table");
        this.obj.border = 0;
        this.obj.cellPadding = 0;
        this.obj.cellSpacing = 1;
        this.container = document.getElementById("container");
        this.container.innerHTML = this.score;
        document.body.insertBefore(this.obj,console);
        //创建表格内部结构
        for(var i=0;i<this.rowCount;i++){
            var tr = this.obj.insertRow(0);
            for(var j=0;j<this.colCount;j++){
                var td = tr.insertCell(0);
            }
        } 
        //产生10个分散的节点（随机分布）
        for(var i=0;i<10;i++){
            x = Math.floor(Math.random()*this.rowCount);
            y = Math.floor(Math.random()*this.colCount);
            colorIndex = Math.floor(Math.random()*7);
            if(!this.isFilled(x,y)){
                this.obj.rows[x].cells[y].style.backgroundColor = this.colors[colorIndex];
            }
        }
        //生成一个蛇头
        while(true){
            x = Math.floor(Math.random()*this.rowCount);
            y = Math.floor(Math.random()*this.colCount);
            if(!this.isFilled(x,y)){
                this.obj.rows[x].cells[y].style.backgroundColor = "black";
                this.snakeBody.push({x:x,y:y,snakeColor:"black"});
                break;
            }
        }
        //键盘监听
        document.onkeydown = function(e){
            var even = e || window.event;
            var evenElem = even.keyCode || even.which;
            if(evenElem==38&&zhenn.directions!=2){
                zhenn.directions = 0;
            }
            if(evenElem==39&&zhenn.directions!=3){
                zhenn.directions = 1;
            }
            if(evenElem==40&&zhenn.directions!=0){
                zhenn.directions = 2;
            }
            if(evenElem==37&&zhenn.directions!=1){
                zhenn.directions = 3;
            }
        }
        document.onkeyup = function(e){
            var even = e || window.event;
            var evenElem = even.keyCode || even.which;
            if(evenElem==13){
                if(zhenn.paused){
                    zhenn.move();
                    zhenn.paused = false;
                }else{
                    zhenn.pauseGame();
                    zhenn.paused = true;
                }
            }
        }
    },
    //判断节点是否被填充
    isFilled: function(x,y){
        if(this.obj.rows[x].cells[y].style.backgroundColor != ""){
            return true;
        }else{
            return false;
        }
    },
    //获得移动目标位置的坐标
    getNextPosition: function(){
        var x = this.snakeBody[0].x;
        var y = this.snakeBody[0].y;
        if(this.directions==0){
            x--;
        }else if(this.directions==1){
            y++;
        }else if(this.directions==2){
            x++;
        }else{
            y--;
        }
        //返回一个坐标
        return {x:x,y:y}
    },
    //获得移动目标位置的颜色
    getColor: function(x,y){
        return this.obj.rows[x].cells[y].style.backgroundColor;
    },
    //模拟蛇前进一步的效果,
    moveOneStep: function(){
        if(this.checkNextStep()==-1){
            alert("游戏结束");
            this.resetSnake();
        }
        if(this.checkNextStep()==1){
            var _nextPos = this.getNextPosition();
            var _x = _nextPos.x;
            var _y = _nextPos.y;
            this.snakeBody.unshift({x:_x,y:_y,snakeColor:this.getColor(_x,_y)});
            this.createNewFood();
            return;
        }
        var nextPos = this.getNextPosition();
        var color = this.snakeBody[0].snakeColor;
        //移动蛇身的颜色
        for(var i=0;i<this.snakeBody.length-1;i++){
            this.snakeBody[i].snakeColor = this.snakeBody[i+1].snakeColor;
        }
        //在蛇头前增加一个节点，删除蛇身的结尾，模拟移动的效果
        this.snakeBody.pop();
        this.snakeBody.unshift({x:nextPos.x,y:nextPos.y,snakeColor:color});
          
    },
    //检查目标位置
    checkNextStep: function(){
        var point = this.getNextPosition();
        var x = point.x;
        var y = point.y;
        if(x<0||x>=this.rowCount||y<0||y>=this.colCount){ //说明下一个位置超过了表格的边界
            return -1;
        }
          
        if(this.isFilled(x,y)){ //说明下一个位置是食物
            return 1;
        }
        for(var i=0;i<this.snakeBody.length;i++){
            if(x==this.snakeBody[i].x&&y==this.snakeBody[i].y){ //说明下一个位置在蛇身上
                return -1;
            }
        }
        return 0;
    },
    //蛇身移动
    move: function(){
        this.timer = setInterval(function(){
            zhenn.container.innerHTML = zhenn.score;
            zhenn.eraseColor();
            zhenn.moveOneStep();
            zhenn.painter();
            zhenn.checkLevel();
        },this.speed)
    },
    //去掉移动前蛇身的着色
    eraseColor: function(){
        for(var i=0;i<this.snakeBody.length;i++){
            this.obj.rows[this.snakeBody[i].x].cells[this.snakeBody[i].y].style.backgroundColor = "";
        }
    },
    //给移动后的蛇身着色
    painter: function(){
        for(var i=0;i<this.snakeBody.length;i++){
            this.obj.rows[this.snakeBody[i].x].cells[this.snakeBody[i].y].style.backgroundColor = this.snakeBody[i].snakeColor;
        }
    },
    //产生食物。  
    createNewFood: function(){  
        var x = Math.floor(Math.random()*this.rowCount);  
        var y = Math.floor(Math.random()*this.colCount);  
        var colorIndex = Math.floor(Math.random()*7);  
        if(!this.isFilled(x,y)){  
            this.obj.rows[x].cells[y].style.backgroundColor = this.colors[colorIndex];  
        }  
        this.score++;
    },
    //暂停游戏
    pauseGame: function(){
        clearInterval(zhenn.timer);
    },
    //重新加载游戏
    resetSnake: function(){
        window.location.reload();
    },
    //检测是否升级
    checkLevel: function(){
        switch(this.score/5){
            case 1:{
                if(this.upgrade<1){
                    alert("恭喜你成功升为2级");
                    this.speed = 550;
                    this.pauseGame();
                    this.move();
                    document.getElementById("level").selectedIndex = 1;
                    this.upgrade = 1;
                }
                break;
            }
            case 2:{
                if(this.upgrade<2){
                    alert("恭喜你成功升为3级");
                    this.speed = 500;
                    document.getElementById("level").selectedIndex = 2;
                    this.upgrade = 2; 
                    this.pauseGame();
                    this.move();
                }
                break;
            }
            case 3:{
                if(this.upgrade<3){
                    alert("恭喜你成功升为4级");
                    this.speed = 450;
                    document.getElementById("level").selectedIndex = 3;
                    this.upgrade = 3; 
                    this.pauseGame();
                    this.move();
                }
                break;
            }
            case 4:{
                if(this.upgrade<4){
                    alert("恭喜你成功升为5级");
                    this.speed = 400;
                    document.getElementById("level").selectedIndex = 4;
                    this.upgrade = 4; 
                    this.pauseGame();
                    this.move();
                }
                break;
            }
            case 5:{
                if(this.upgrade<5){
                    alert("恭喜你成功升为6级");
                    this.speed = 350;
                    document.getElementById("level").selectedIndex = 5;
                    this.upgrade = 5; 
                    this.pauseGame();
                    this.move();
                }
                break;
            }
            case 6:{
                if(this.upgrade<6){
                    alert("恭喜你成功升为7级");
                    this.speed = 300;
                    document.getElementById("level").selectedIndex = 6;
                    this.upgrade = 6; 
                    this.pauseGame();
                    this.move();
                }
                break;
            }
            case 7:{
                if(this.upgrade<7){
                    alert("恭喜你成功升为8级");
                    this.speed = 250;
                    document.getElementById("level").selectedIndex = 7;
                    this.upgrade = 7; 
                    this.pauseGame();
                    this.move();
                }
                break;
            }
            case 8:{
                if(this.upgrade<8){
                    alert("恭喜你成功升为9级");
                    this.speed = 200;
                    document.getElementById("level").selectedIndex = 8;
                    this.upgrade = 8; 
                    this.pauseGame();
                    this.move();
                }
                break;
            }
            case 9:{
                if(this.upgrade<9){
                    alert("恭喜你成功升为10级");
                    this.speed = 150;
                    document.getElementById("level").selectedIndex = 9;
                    this.upgrade = 9; 
                    this.pauseGame();
                    this.move();
                }
                break;
            }
            case 10:{
                if(this.upgrade<10){
                    alert("恭喜你成功升为11级");
                    this.speed = 125;
                    document.getElementById("level").selectedIndex = 10;
                    this.upgrade = 10; 
                    this.pauseGame();
                    this.move();
                }
                break;
            }
            case 11:{
                if(this.upgrade<11){
                    alert("恭喜你成功升为12级");
                    this.speed = 100;
                    document.getElementById("level").selectedIndex = 11;
                    this.upgrade = 11; 
                    this.pauseGame();
                    this.move();
                }
                break;
            }
            case 15:{
                alert("恭喜你，已经通关！");
                window.location.reload();
            }
        }
          
    }
      
}
  
</script>
<h1>七彩贪吃蛇</h1>
<div id="operation">
    <input type="button" value="开始游戏" id="begin" />
    <input type="button" value="暂停游戏" id="pause" />
    <select id="level">
        <option value="600">1级</option>
        <option value="550">2级</option>
        <option value="500">3级</option>
        <option value="450">4级</option>
        <option value="400">5级</option>
        <option value="350">6级</option>
        <option value="300">7级</option>
        <option value="250">8级</option>
        <option value="200">9级</option>
        <option value="150">10级</option>
        <option value="125">11级</option>
        <option value="100">12级</option>
    </select>
    <a href="#" id="lookMethod">查看/关闭操作方法</a>
    <div>你的成绩：<em id="container"></em>分</div>
</div>
<ol id="hdMethod">
    <li>点击“开始按钮”或者回车键开始游戏。</li>
    <li>使用↑→↓←可控制蛇身前进的方向！</li>
    <li>每得5分即可升级，速度也会相应加快，共12级！</li>
    <li>如果操作不当，蛇身超过边界或者蛇头接触蛇身上任意一点，则会提示游戏失败，然后点击回车键，会重新加载游戏，所得积分和等级清零！</li>
    <li>开始游戏后，请关闭此说明，以免在操作游戏时，使网页上下移动，影响游戏的效果！</li>
</ol>
<script type="text/javascript">
    var begin = document.getElementById("begin");
    var pauseBtn = document.getElementById("pause");
    var level = document.getElementById("level");
    var lookMethod = document.getElementById("lookMethod");
    var methodContainer = document.getElementById("hdMethod");
    begin.onclick = function(){
        if(zhenn.paused){
            zhenn.move();
            zhenn.paused = false;
        }
    }
    pauseBtn.onclick = function(){
        if(!zhenn.paused){
            zhenn.pauseGame();
            zhenn.paused = true;
        }
    }
    level.onchange = function(){
        zhenn.speed = this.options[this.selectedIndex].value;
        zhenn.pauseGame();
        zhenn.move();
        zhenn.paused = false;
    }
    lookMethod.onclick = function(){
        if(methodContainer.style.display == ""){
            methodContainer.style.display = "block";
        }else{
            methodContainer.style.display = "";
        }
    }
</script>
</body>
</html>