JavaScript版貪吃蛇游戲代碼

2024-09-05 12:21:04

字體：大中小

來源：轉載

供稿：網友

JavaScript版貪吃蛇游戲代碼，網友自寫，按“空格鍵” 開始/暫停，三種游戲速度可選擇。

<!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);                }        }};window.onload = function(){        var orz = new Snake();        orz.init();        document.onkeydown = function(e){ orz.trigger(e); };//firefox需要參數e        document.getElementById("setSpeed").onchange = function(){ this.blur(); orz.init(this.value); };};</script></head><body>        <ul class="info">    <li>分數:<span id="foodNum"></span></li>    <li>選擇速度:<select id="setSpeed"><option value="200">慢(200)</option><option value="100">中(100)</option><option value="50">快(50)</option></select></li>    <li>按“空格鍵” 開始/暫停</li>    </ul><table id="map"></table></body></html>

上一篇：JS網頁游戲代碼:猜數字

下一篇：走迷宮游戲，網頁游戲代碼