<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS貪吃蛇</title>
<style type="text/css">
.box{width:25px;height:25px;border:solid 1px green;position:absolute; background:white;}
/*紅色的是食物 藍色的是蛇*/
.snake{width:25px;height:25px;border:solid 1px wihite;position:absolute; blue;}
.food{width:25px;height:25px;border:solid 1px white;position:absolute; red;}
</style>
</head>
<body>
<input type="button" value="開始" />
<input type="button" value="重新開始" onclick="location.reload()" />
<input type="button" value="暫停" id="zanting"/>
得分：<span id ="score"></span>
<div id="wrapper">
</div>
<script type="text/javascript">
var state = 0;
var rows=20;
var cols= 20;
var map = new Array();
var sx=0;var sy=0;
var fx=0;var fy=0;
var direc = 0;//蛇要前進的方向
var predirec = 0;//蛇上一步的前進方向
var snake = new Array();//裝蛇的數組
var timer;//定時器
var speed = 500;
var score = document.getElementById("score");
function init(){//形成圖
for(var i=0; i<rows; i++){//生成地圖數組
map[i]=new Array();
for(var j=0; j<cols; j++){
map[i][j]=0;
}
}
while(sx==fx && sy==fy){
sx = Math.floor(Math.random()*rows);
sy = Math.floor(Math.random()*cols);
fx = Math.floor(Math.random()*rows);
fy = Math.floor(Math.random()*cols);
}
}
function draw(){//畫圖
map[sx][sy] = 1;//snake
map[fx][fy] = 2;//food
for(var i=0;i<rows;i++){
for(var j=0; j<cols; j++){
var div=document.createElement('div');
if(map[i][j]==1){
div.className="snake";
snake[0] = i*cols + j;
}
else if(map[i][j]==2){
div.className="food";
}
else{
div.className="box";
}
div.id=i*cols+j;
div.style.top=50+25*i;
div.style.left=50+25*j;
document.getElementById('wrapper').appendChild(div);
}
}
}
window.document.onkeydown=function(ev){
var ev= event || window.event;
predirec = direc;
direc = ev.keyCode;
if(direc>40 || direc<37){
direc = predirec;
}
if(predirec==37 && direc ==39){//向相反方向無效
direc = 37;
}
if(predirec==38 && direc ==40){//向相反方向無效
direc = 38;
}
if(predirec==39 && direc ==37){//向相反方向無效
direc = 39;
}
if(predirec==40 && direc ==38){//向相反方向無效
direc = 40;
}
}
function move(){
// var head = document.getElementById(snake[0]);//蛇頭
var prehead = snake[0];//保存上一點蛇頭的位置
var nexthead = snake[0];//下一個蛇頭的位置
switch(direc){
case 37:nexthead=snake[0]-1;break;
case 38:nexthead=snake[0]-cols;break;
case 39:nexthead=snake[0]+1;break;
case 40:nexthead=snake[0]+cols;
}
//判斷遊戲是否結束
if((nexthead < 0 || nexthead > rows*cols) || (prehead - nexthead == 1 && prehead % cols == 0) || (nexthead - prehead == 1 && nexthead % cols == 0) || (prehead != nexthead && inarr(nexthead, snake))){//遊戲結束的條件
clearInterval(timer);
state = 3;
alert("遊戲借宿");
return false;
}
if(nexthead==fx*cols+fy){//遲到食物了
//snake[snake.length] = snake[snake.length-1];//蛇長增加了
speed = snake.length < 4 ? 500 : 500-snake.length*5 ;//速度
score.innerHTML =snake.length < 10 ? snake.length*20 : 200+(snake.length-10)*30;
clearInterval(timer);
timer=setInterval(move,speed);
var prefx = fx;var prefy = fy;
while(inarr(fx*cols+fy, snake) || (fx == prefx && fy == prefy)){//保證下一個生成的食物不在蛇身上，和不出現在和上一個相同的位置
fx = Math.floor(Math.random()*rows);
fy = Math.floor(Math.random()*cols);
}
document.getElementById(fx*cols+fy).className="food";
snake.unshift(nexthead);
for(var i=0,j=snake.length;i<j;i++){
var tmpdiv = document.getElementById(snake[i]);
tmpdiv.className="snake";
}
}
else{
var end = snake.pop();
snake.unshift(nexthead);
for(var i=0,j=snake.length;i<j;i++){
var tmpdiv = document.getElementById(snake[i]);
tmpdiv.className="snake";
}
if(end!=snake[0]){
document.getElementById(end).className="box";
}
}
}
function start(){
if(state==0){
state = 1;
init();
draw();
timer = setInterval(move,speed);
}
else if(state==1 || state==2 ){
alert("處於開始或者暫停狀態");
}
else if(state==3){
alert("都已經輸了還點呢？");
}
}
var zanting = document.getElementById("zanting");
zanting.onclick = function(){
pause();
};
function pause(){
if(state == 0){
alert('還沒開始暫停什麼！');
return false;
}
if(state == 2){//2是暫停狀態 轉入執行狀態
state = 1;
timer=setInterval(move,speed);
zanting.value="暫停";
}else if(state==1){//2是暫停狀態
state = 2;
clearInterval(timer);
zanting.value="繼續";
}
else if(state==3){//2是暫停狀態
state = 3;
clearInterval(timer);
zanting.value="你輸了";
}
}
function inarr(num, arr){//判斷一個元素是否在數組中
for(var i=0, j=arr.length; i<j; i++){
if(num == arr[i]){
return true;
}
}
return false;
}
</script>
</body>
</html>