JavaScript版贪吃蛇游戏代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Snake</title>
<style>
  *{ margin:0; padding:0; font-family:Verdana,宋体; font-size:12px;}
  table#map { width:auto; height:auto; margin:0 auto; border-collapse:collapse; border-spacing:0; background-color:#EAEAEA; clear:both;}
  td                 { width:10px; height:10px; border:1px solid black;}
  .shead         { background-color: orangered;}
  .sbody         { background-color: black;}
  .sfood         { background-color: orangered;}
  .info        { width:400px; margin:0 auto; padding:3em 0;}
  .info li{ float:left; height:30px; margin-right:2em; line-height:30px;}
</style>
<script type="text/javascript" language="javascript">
function Snake(){
        this.rows = 20;
        this.cols = 40;
        this.speed = 200;
        this.currKey = 0;//当前方向
        this.timer = 0;
        this.sid = "snakeObj"+parseInt(Math.random()*100000);
        eval(this.sid+"=this");
        this.pos = [];//蛇身
        this.foodPos = {"x":-1,"y":-1};
        this.foodNum = 0;
        this.domTab = document.getElementById("map");//地图
        this.pause = 1;//1,-1
}
Snake.prototype.init = function(){
        this.map();
        arguments[0] ? this.speed=arguments[0] : false;//选择速度
        this.pos = [{"x":2,"y":5},{"x":1,"y":5},{"x":0,"y":5}];
        for( j in this.pos ){//画全身,move只画头尾
                this.domTab.rows[this.pos[j].y].cells[this.pos[j].x].className="sbody";
        }
        this.domTab.rows[this.pos[0].y].cells[this.pos[0].x].className="shead";
        this.currKey = 0;
        this.foodNum = 0;
        this.food();
        this.pause = 1;
}
Snake.prototype.trigger = function(e){
        var e = e||event;
        var eKey = e.keyCode||e.which||e.charCode;
        if( eKey>=37 && eKey<=40 && eKey!=this.currKey && !( (this.currKey == 37 && eKey == 39) || (this.currKey == 38 && eKey == 40) || (this.currKey == 39 && eKey == 37) || (this.currKey == 40 && eKey == 38) ) && this.pause==-1 ){//响应:上下左右 & 不是当前方向 & 不是反方向 & 不在暂停状态
                this.currKey = eKey;                
        }else if( eKey==32 ){//空格:暂停,开始
                this.currKey = (this.currKey==0) ? 39 : this.currKey;
                ((this.pause*=-1)==-1) ? this.timer=window.setInterval(this.sid+".move()",this.speed) : window.clearInterval(this.timer);
        }
};
Snake.prototype.move = function(){//画头、删尾巴、蛇身不动
        switch(this.currKey){
                case 37: 
                        if( this.pos[0].x <= 0 ){ this.die(); return; }//撞墙
                        else{ this.pos.unshift( {"x":this.pos[0].x-1,"y":this.pos[0].y}); }//加蛇头
                        break;//left
                case 38: 
                        if( this.pos[0].y <= 0 ){ this.die(); return; }
                        else{ this.pos.unshift( {"x":this.pos[0].x,"y":this.pos[0].y-1}); }
                        break;//up
                case 39:
                        if( this.pos[0].x >= this.cols-1 ){ this.die(); return; }
                        else{ this.pos.unshift( {"x":this.pos[0].x+1,"y":this.pos[0].y}); }
                        break;//right
                case 40: 
                        if( this.pos[0].y >= this.rows-1 ){ this.die(); return; }
                        else{ this.pos.unshift( {"x":this.pos[0].x,"y":this.pos[0].y+1}); }
                        break;//down
        };
                
        if( this.pos[0].x == this.foodPos.x && this.pos[0].y == this.foodPos.y ){//吃到食物
                this.foodPos.x = -1;//食物被吃,不删蛇尾
                this.food();
        }else if( this.currKey != 0 ){//删蛇尾,init时不删
                this.domTab.rows[this.pos[this.pos.length-1].y].cells[this.pos[this.pos.length-1].x].className="";
                this.pos.pop();
        }
        
        for( i=3;i<this.pos.length;i++ ){//从蛇的第四节开始判断是否撞到自己了 因为蛇头为两节 第三节不可能拐过来
                if( this.pos.x == this.pos[0].x && this.pos.y == this.pos[0].y ){ 
                        this.die();
                        return;
                }
        }
        
        this.domTab.rows[this.pos[0].y].cells[this.pos[0].x].className="shead";//画新头
        this.domTab.rows[this.pos[1].y].cells[this.pos[1].x].className="sbody";//旧头变身体
};
Snake.prototype.die = function(){
        alert("x_x");
        window.clearInterval(this.timer);
        this.init();
}
Snake.prototype.food = function(){//生成食物
        if( this.foodPos.x == -1 ){//已存在时位置不变
                do{
                        this.foodPos.y = Math.round( Math.random()*(this.rows-1) );
                        this.foodPos.x = Math.round( Math.random()*(this.cols-1) );
                }
                while( this.domTab.rows[this.foodPos.y].cells[this.foodPos.x].className != "" )//防止生成在蛇身上
        }
    this.domTab.rows[this.foodPos.y].cells[this.foodPos.x].className="sfood";
    document.getElementById("foodNum").innerHTML=this.foodNum++;
};
Snake.prototype.map = function(){//创建地图
        this.domTab.firstChild ? this.domTab.removeChild(this.domTab.firstChild) : false;//重新开始 删除tbody
        for( j = 0; j < this.rows; j++ ){
                var tr = this.domTab.insertRow(-1);
                for( i = 0; i < this.cols; i++ ){
                        tr.insertCell(-1);
                }
        }
};

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JavaScript版贪吃蛇游戏代码

分类

游戏

描述

JavaScript版贪吃蛇游戏代码，网友自写，按“空格键”开始/暂停，三种游戏速度可选择。