BlogJava Of JackLau
菜鳥歸來

隨筆 - 11 文章 - 3 trackbacks - 0

<

2009年12月

>

日

一

二

三

四

五

六

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

常用鏈接

留言簿

隨筆檔案

文章檔案

2010年1月 (1)

搜索

閱讀排行榜

評(píng)論排行榜

貪食蛇

既然有了俄羅斯方塊，那趁興也來一個(gè)貪食蛇吧，雖然有人說是入門級(jí)代碼必寫的小東西，但是也花費(fèi)了不少時(shí)間，沒有用到過多的復(fù)雜處理。

源代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Snake</title>

body{margin:0;padding:0;font-family:Verdana;}

.container{border:2px solid #ccc;overflow:hidden;zoom:1;padding:10px;}

#game-area{float:left;width:375px;height:300px;border:4px solid #999;padding:0;margin:0;font-size:0;line-height:0;overflow:hidden;}

#game-area ul{overflow:hidden;zoom:1;padding:0;margin:0;}

#game-area ul li{float:left;width:15px;height:15px;overflow:hidden;font-size:0;line-height:0;}

.black{background-color:#ccc;}

.blue{background-color:#1E87F0;}

.yellow{background-color:#F77117;}

.green{background-color:#91C846;}

.violet{background-color:#E727CF;}

#game-oper{float:left;display:inline;margin-left:20px;font-size:14px;}

#info{font-size:16px;}

#sn-stage{color:#1E87F0;font-weight:bold;}

#sn-score{color:#F77117;font-weight:bold;}

#oper{margin:10px 0;}

#oper button{font-size:14px;margin-right:5px;padding:2px 5px;font-family:Verdana;}

#debug{color:#ff0000;font-weight:bold;}

</style>

</head>

<body>

<h3>Snake Game</h3>

Stage : <span id="sn-stage">1</span>,

Score : <span id="sn-score">0</span>

</div>

<button id="begin">Begin</button>

<button id="restart">Again</button>

</div>

</div>

var Snake = (function(){

var $ = function(s){return document.getElementById(s)};

var timer = null;

var iSnake = null; // 蛇

var speed = 600; // 移動(dòng)速度

var dir = "left"; // 移動(dòng)方向

var isPause = false; // 暫停

var isOver = false;

var createSnake = function(){

iSnake = [];

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

iSnake.push([9,(i + 10)]);

if(0 == i){

$("item-" + 9 + "-" + (i + 10)).className = "yellow";

$("item-" + 9 + "-" + (i + 10)).title = "head";

}else{

$("item-" + 9 + "-" + (i + 10)).className = "blue";

$("item-" + 9 + "-" + (i + 10)).title = "body";

}

};

var createWall = function(level){

switch(level){

case 1 :

for(var i = 1; i < 12; i++){

for(j = 0; j < 2; j++){

$("item-" + (j + 6) + "-" + i).className = "black";

$("item-" + (j + 6) + "-" + i).title = "block";

}

break;

case 2 :

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

$("item-4-" + i).className = "black";

$("item-4-" + i).title = "block";

$("item-"+ i +"-20").className = "black";

$("item-"+ i +"-20").title = "block";

}

break

case 3 :

for(var i = 1; i < 12; i++){

for(j = 0; j < 2; j++){

$("item-" + (j + 11) + "-" + i).className = "black";

$("item-" + (j + 11) + "-" + i).title = "block";

}

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

for(j = 0; j < 2; j++){

$("item-" + (j + 4) + "-" + i).className = "black";

$("item-" + (j + 4) + "-" + i).title = "block";

}

break;

case 4 :

for(var i = 1; i < 12; i++){

for(j = 0; j < 2; j++){

$("item-" + (j + 6) + "-" + i).className = "black";

$("item-" + (j + 6) + "-" + i).title = "block";

}

break;

case 5 :

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

$("item-4-" + i).className = "black";

$("item-4-" + i).title = "block";

$("item-"+ i +"-20").className = "black";

$("item-"+ i +"-20").title = "block";

}

break

case 6 :

for(var i = 1; i < 12; i++){

for(j = 0; j < 2; j++){

$("item-" + (j + 11) + "-" + i).className = "black";

$("item-" + (j + 11) + "-" + i).title = "block";

}

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

for(j = 0; j < 2; j++){

$("item-" + (j + 4) + "-" + i).className = "black";

$("item-" + (j + 4) + "-" + i).title = "block";

}

break;

case 7 :

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

$("item-4-" + i).className = "black";

$("item-4-" + i).title = "block";

$("item-"+ i +"-20").className = "black";

$("item-"+ i +"-20").title = "block";

}

break

};

var resetSnake = function(level){

dir = "left";

initBoard();

createWall(level);

createSnake();

createFood();

};

var createFood = function(){

pauseSnake();

var y = Math.ceil(Math.random() * 22) + 1;

var x = Math.ceil(Math.random() * 16) + 1;

if("head" == $("item-" + x + "-" + y).title || "body" == $("item-" + x + "-" + y).title || "block" == $("item-" + x + "-" + y).title){

createFood();

return false;

}

$("item-" + x + "-" + y).className = "green";

$("item-" + x + "-" + y).title = "food";

startSnake();

};

var moveSnake = function(){

if(isOver){pauseSnake();return false;}

$("item-" + iSnake[iSnake.length - 1][0] + "-" + iSnake[iSnake.length - 1][1]).className = "";

$("item-" + iSnake[iSnake.length - 1][0] + "-" + iSnake[iSnake.length - 1][1]).title = "";

for(var i = iSnake.length - 1; i > 0; i--){

iSnake[i][0] = iSnake[i - 1][0];

iSnake[i][1] = iSnake[i - 1][1];

$("item-" + iSnake[i][0] + "-" + iSnake[i][1]).className = "blue";

$("item-" + iSnake[i][0] + "-" + iSnake[i][1]).title = "body";

}

switch(dir){

case "left" :

moveLeft();

break;

case "right" :

moveRight();

break;

case "top" :

moveTop();

break;

case "bottom" :

moveBottom();

break;

}

chkSnake();

if(chkFood()){

iSnake.push([iSnake[iSnake.length - 1][0],iSnake[iSnake.length - 1][1]]);

$("item-" + iSnake[iSnake.length - 1][0] + "-" + iSnake[iSnake.length - 1][1]).className = "blue";

$("item-" + iSnake[iSnake.length - 1][0] + "-" + iSnake[iSnake.length - 1][1]).title = "body";

setStage();

}

$("item-" + iSnake[0][0] + "-" + iSnake[0][1]).className = "yellow";

$("item-" + iSnake[0][0] + "-" + iSnake[0][1]).title = "head";

};

var chkSnake = function(){

if("block" == $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).title || "body" == $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).title){

pauseSnake();

isOver = true;

$("debug").innerHTML = "Game Over";

$("item-" + iSnake[0][0] + "-" + iSnake[0][1]).style.backgroundColor = "red";

}

};

var chkFood = function(){

if("food" == $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).title){

$("sn-score").innerHTML = parseInt($("sn-score").innerHTML,10) + 10;

createFood();

return true;

}

return false;

};

var setStage = function(){

var _score = parseInt($("sn-score").innerHTML,10);

var _stage = 1;

if(_score >= 100 && _score < 200){

speed = 500;

_stage = 2;

}else if(_score >= 200 && _score < 300){

speed = 400;

_stage = 3;

}else if(_score >= 300 && _score < 400){

speed = 300;

_stage = 4;

}else if(_score >= 400 && _score < 500){

speed = 200;

_stage = 5;

}else if(_score >= 500 && _score < 600){

speed = 100;

_stage = 6;

}else if(_score >= 600){

speed = 80;

_stage = 7;

}

0 == _score % 100 ? resetSnake(_score / 100) : "";

$("sn-stage").innerHTML = _stage;

};

var moveLeft = function(){

iSnake[0][1] = iSnake[0][1] - 1;

};

var moveRight = function(){

iSnake[0][1] = iSnake[0][1] + 1;

};

var moveTop = function(){

iSnake[0][0] = iSnake[0][0] - 1;

};

var moveBottom = function(){

iSnake[0][0] = iSnake[0][0] + 1;

};

var pauseSnake = function(){

if(null != timer){

clearInterval(timer);

timer = null;

isPause = true;

}

};

var startSnake = function(){

if(null == timer){

timer = setInterval(function(){moveSnake()},speed);

isPause = false;

}

var initBoard = function(){

var _arr = [];

_arr.push("<ul>");

for(var i = 0,j = 0,k = 0; i < 500; i++){

_arr.push("<li id='item-"+ k + "-" + j +"'"+ (0 == k || 19 == k || 0 == j || 24 ==j ? " class='black' title='block'" : "") +"></li>");

j++;

if(j > 24){j = 0;k++};

}

_arr.push("</ul>");

$("game-area").innerHTML = _arr.join("");

document.onkeydown = function(e){

switch(keyCode(e)){

case 37 :

if("right" == dir || isPause){return false};

//pauseSnake();

dir = "left";

moveSnake();

//startSnake();

break;

case 39 :

if("left" == dir || isPause){return false};

//pauseSnake();

dir = "right";

moveSnake();

//startSnake();

break;

case 38 :

if("bottom" == dir || isPause){return false};

//pauseSnake();

dir = "top";

moveSnake();

//startSnake();

break;

case 40 :

if("top" == dir || isPause){return false};

//pauseSnake();

dir = "bottom";

moveSnake();

//startSnake();

break;

}

$("begin").onclick = function(){

if("Begin" == this.innerHTML){

if(null == iSnake){

createSnake();

createFood();

startSnake();

}else{

startSnake();

isPause = false;

}

this.innerHTML = "Pause";

}else if("Pause" == this.innerHTML){

pauseSnake();

isPause = true;

this.innerHTML = "Begin";

}

$("restart").onclick = function(){

clearInterval(timer);

timer = null;

dir = "left";

iSnake = null;

isOver = false;

initBoard();

speed = 600;

$("sn-score").innerHTML = "0";

$("sn-stage").innerHTML = "1";

$("begin").innerHTML = "Begin";

$("debug").innerHTML = "";

}

};

var keyCode = function(evt){

evt = (evt) ? evt : ((window.event) ? window.event : "");

return evt.keyCode ? evt.keyCode : evt.which;

};

return {

init : initBoard

};

})();

Snake.init();

</script>

</body>

</html>

posted on 2009-12-30 20:30 jacklau 閱讀(193) 評(píng)論(0) 編輯收藏

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理

常用鏈接

留言簿

隨筆檔案

文章檔案

搜索

最新評(píng)論

閱讀排行榜

評(píng)論排行榜