html源碼，要做網(wǎng)頁(yè)的話復(fù)制源碼新建一個(gè)文本文檔粘貼進(jìn)去，然后文本文檔改名snake.html即可。

體驗(yàn)地址：點(diǎn)擊進(jìn)入

玩法：用鍵盤的上下左右控制。

貪吃蛇-陌濤博客www.imotao.com

.backDiv {

text-align: center;

position:absolute;

top:20px;

left:300px;

width:820px;

height:550px;

}

.display {

position:absolute;

top:0px;

left:685px;

width:180px;

height:510px;

border: 5px solid black;

background-color: #ccffff;

}

#gamePanel table {

border-collapse: collapse;/*合并單元格邊框*/

border: 5px solid black;

background-color: #f0f0f0;

}

#gamePanel td {

width:15px;

height:15px;

}

#scoreDiv {

position: absolute;

top: 20px;

left:20px;

text-align: left;

font-size: 20px;

font-weight: bold;

}

#prompt {

position: absolute;

top: 180px;

left: 20px;

text-align: left;

font-weight: bold;

}

#operator {

position: absolute;

top:550px;

left:100px;

}

#result {

position: absolute;

top:200px;

left:220px;

background-color: #00ffff;

font-size: 20px;

font-weight: bold;

text-align: left;

padding: 20px;

}

var snake = [];// 蛇數(shù)組

var barrers = [];// 障礙物數(shù)組

var game = {sizeX:"30",sizeY:"40",record:"0"};

var appearTime = disappearTime = 0;// 超級(jí)食物出現(xiàn)

var superFoodX = superFoodY = null;

var color = 0;// 食物顏色

function init(){

clearTimeout(game.time);

snake = [];

barrers = [];

game.x = 0;game.y = 1;

game.dir = null;

game.direction = "right";

game.rate = null;

game.lengths = 2;// 蛇的長(zhǎng)度

game.score = 0;

$("scoreDiv").innerHTML = "得分："+game.score+"
長(zhǎng)度："+ game.lengths+"
"+"最高分："+game.record;

$("pass").disabled = false;

$("rate").disabled = false;

$("start").disabled = false;

bord();// 設(shè)置界面

barrer();// 設(shè)置障礙物

$("result").style.visibility = "hidden";

snake.push("tb_" + game.x + "_" + (game.y-1));

snake.push("tb_" + game.x + "_" + game.y);// 蛇頭

}

function $(id){

return document.getElementById(id);

}

// 表格

function bord(){

var panel = [];// 游戲面板

var proPanel = [];// 提示面板

panel.push("

for(var i=0; i

panel.push("

");

for(var j=0; j

panel.push('

');

}

panel.push("

");

}

panel.push("

");

$("gamePanel").innerHTML = panel.join("");

proPanel.push("

proPanel.push('

'+'' + '?得分+10'+'');

proPanel.push('

'+'' + '?得分+30'+'');

proPanel.push('

'+'' + '?得分+50'+'');

proPanel.push('

'+'' + '?得分+100'+'');

proPanel.push('

'+'' + '?得分-30'+'');

proPanel.push('

'+'' + '?得分-50');

proPanel.push("

");

$("prompt").innerHTML = proPanel.join("");

}

// 關(guān)卡障礙物設(shè)置

function barrer() {

var passValue = $("pass").value;

for(var i=0; i

$(barrers[i]).style.backgroundColor = "";

}

barrers = [];

if(passValue == 2) {

for(var i=8; i

barrers.push("tb_" + i + "_" + 10);

barrers.push("tb_" + i + "_" + (game.sizeY-10));

}

}

if(passValue == 3) {

for(var i=8; i

barrers.push("tb_" + Math.floor(game.sizeX/2) + "_" + i);

}

for(var i=6; i

barrers.push("tb_" + i + "_" + Math.floor(game.sizeY/2));

}

}

if(passValue == 4) {

for(var i=12; i

barrers.push("tb_" + Math.floor(game.sizeX/2) + "_" + i);

}

for(var j=6; j

barrers.push("tb_" + j + "_" + Math.floor(game.sizeY/2+1));

}

for(var i=6; i

if(i < game.sizeX/2) {barrers.push("tb_"+i+"_"+12);}

else{barrers.push("tb_"+i+"_"+(game.sizeY-11));}

}

for(var j=12; j

if(j <= game.sizeY/2) {barrers.push("tb_"+(game.sizeX-7)+"_"+j);}

else {barrers.push("tb_"+6+"_"+(j+1));}

}

}

if(passValue == 5) {

for(var i=0; i<14; i++) {

barrers.push("tb_" + 7 + "_" + i);

barrers.push("tb_" + (game.sizeX-8) + "_" + (game.sizeY-i-1));

}

for(var i=15; i<25; i++) {

if(i < 18 || i > 21){

barrers.push("tb_"+10 +"_"+i);

barrers.push("tb_"+(game.sizeX-11)+"_"+i);

}

}

for(var i=0; i<9; i++) {

barrers.push("tb_" + i + "_" + (game.sizeY-13));

barrers.push("tb_" + (game.sizeX-i-1) + "_" + 12);

}

for(var i=11; i<19; i++) {

if(i < 13 || i > 16){

barrers.push("tb_"+i+"_"+15);

barrers.push("tb_"+i+"_"+(game.sizeY-16));

}

}

}

// 設(shè)置障礙物顏色

for(var i=0; i

$(barrers[i]).style.backgroundColor = "#660033";

}

}

// 開始游戲

function startGame() {

food();

game.start = true;

$("pass").disabled = true;

$("rate").disabled = true;

$("start").disabled = true;

game.rate = $("rate").value;

$(snake[0]).style.backgroundColor = "#0066ff";

$(snake[1]).style.backgroundColor = "blue";

game.time = setTimeout(function(){

snakeMove();

},game.rate);

superFood();

}

// 蛇移動(dòng) 速度，方向

function snakeMove() {

if(game.direction == "right") {game.y += 1; }// 右移

if(game.direction == "left") {game.y -= 1; }// 左移

if(game.direction == "up") {game.x -= 1; }// 上移

if(game.direction == "down") {game.x += 1; }// 下移

// 判斷游戲是否結(jié)束

if(result() == true) {

clearTimeout(game.time); clearTimeout(appearTime); clearTimeout(disappearTime);

game.start = false;

var res = "游戲結(jié)束!
";

if(game.score > game.record){

res += "恭喜你破紀(jì)錄啦！
";

$("scoreDiv").innerHTML = "得分：" + game.score + "
最高分：" + game.record;

}

res += "您的得分為：" + game.score + "
長(zhǎng)度:"+game.lengths;

$("result").style.visibility = "visible";

$("result").innerHTML = res;

return;

}

if(game.x==game.fx && game.y==game.fy) {eat(1);}

if(game.x==superFoodX && game.y==superFoodY) {eat(2);}

move();

game.time = setTimeout(function() {

snakeMove(game.rate,game.direction);

},game.rate);

}

function move() {

$(snake[0]).style.backgroundColor = "";

// 保留蛇當(dāng)前的位置

for(var i=1; i

snake[i-1] = snake[i];

}

snake[snake.length-1] = "tb_" + game.x + "_" + game.y;// 蛇頭位置

for(var i=0; i

$(snake[i]).style.backgroundColor = "#0066ff";

}

$(snake[i]).style.backgroundColor = "blue";

}

// 食物 位置隨機(jī)且不能與蛇位置重復(fù)

function food() {

game.fx = Math.floor(Math.random(game.sizeX)*game.sizeX);

game.fy = Math.floor(Math.random(game.sizeY)*game.sizeY);

if($("tb_" + game.fx + "_" + game.fy).style.backgroundColor != "") {food(); }

else {$("tb_" + game.fx + "_" + game.fy).style.backgroundColor = "#ff3300"; }

}

// 超級(jí)食物出現(xiàn)

function superFood() {

appearTime = setTimeout(function(){

var n = Math.floor(Math.random(10)*10);

superFoodX = Math.floor(Math.random(game.sizeX)*game.sizeX);

superFoodY = Math.floor(Math.random(game.sizeY)*game.sizeY);

if($("tb_" + superFoodX + "_" + superFoodY).style.backgroundColor != "") {superFood(); }

else{

if(("tb_" + superFoodX + "_" + superFoodY) == ("tb_" + game.fx + "_" + game.fy)){superFood(); return ;}

if(n < 3){$("tb_" + superFoodX + "_" + superFoodY).style.backgroundColor = "#33cc33"; color = 0;}

else if(3 <= n && n < 5){$("tb_" + superFoodX + "_" + superFoodY).style.backgroundColor = "#006600"; color = 1;}

else if(5 <= n && n < 7){$("tb_" + superFoodX + "_" + superFoodY).style.backgroundColor = "#99ff66"; color = 2;}

else if(7 <= n && n < 9){$("tb_" + superFoodX + "_" + superFoodY).style.backgroundColor = "#000000"; color = 3;}

else {$("tb_" + superFoodX + "_" + superFoodY).style.backgroundColor = "#ffff00"; color = 4;}

clearTimeout(disappearTime);

superFood();

// 一定時(shí)間后超級(jí)食物消失

disappearTime = setTimeout(function(){

$("tb_" + superFoodX + "_" + superFoodY).style.backgroundColor = "";

superFoodX = superFoodY = null;

},game.rate*120-game.rate*50);

}

},game.rate*120);

}

// 蛇吃食物

function eat(ef) {

// 吃普通食物

if(ef == 1) {snake.push("tb_" + game.fx + "_" + game.fy); game.score += 10; food();}

// 吃超級(jí)食物

if(ef == 2) {

if(color == 0) {game.score += 30;}

else if(color == 1) {game.score -= 30;}

else if(color == 2) {game.score += 50;}

else if(color == 3) {game.score -= 50;}

else {game.score += 100;}

snake.push("tb_" + superFoodX + "_" + superFoodY);

if(game.score < 0) {game.score = 0;}

clearTimeout(disappearTime);

}

game.lengths += 1;

$("scoreDiv").innerHTML = "得分："+game.score+"
長(zhǎng)度："+game.lengths+"
最高分："+game.record;

}

// 游戲結(jié)束

function result() {

var next = "tb_" + game.x + "_" + game.y;

if(game.x<0 || game.x>=game.sizeX || game.y<0 || game.y>=game.sizeY) {return true;}

for(var i=0; i

for(var i=0; i

return false;

}

// 鍵盤控制

function control(v) {

var evt = v;

game.dir = game.direction;

if(37 <= evt.keyCode && evt.keyCode <= 40 && game.start){

if(evt.keyCode == 37){game.dir=="right" ? game.direction = "right":game.direction = "left";}// 左

if(evt.keyCode == 38){game.dir=="down" ? game.direction = "down" : game.direction = "up";}// 上

if(evt.keyCode == 39){game.dir=="left" ? game.direction = "left" : game.direction = "right";}// 右

if(evt.keyCode == 40){game.dir=="up" ? game.direction = "up" : game.direction = "down";}// 下

if(game.dir != game.direction){clearTimeout(game.time); snakeMove(); }

}

}

分?jǐn)?shù)：0

選擇關(guān)卡：

關(guān)卡1

關(guān)卡2

關(guān)卡3

關(guān)卡4

關(guān)卡5

速度：

慢

中

快

陌濤博客

本文由 陌濤 發(fā)布在 陌濤的記事本，轉(zhuǎn)載此文請(qǐng)保持文章完整性，并請(qǐng)附上文章來(lái)源(陌濤的記事本)及本頁(yè)鏈接。

原文鏈接：https://imotao.com/869.html

總結(jié)

以上是生活随笔為你收集整理的涂格子游戏html,网页版方格贪吃蛇游戏html源码分享的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。