js:
/**
* Created with JetBrains WebStorm.
* User: lianghui
* Date: 14-7-29
* Time: 下午2:32
* To change this template use File | Settings | File Templates.
*/
/*
* 贪吃蛇V0.1
* 这个游戏是本人写的第一个小游戏，我知道还有很多地方需要改进，希望大家指出，谢谢！
* 我知道矩阵的表示太过于麻烦，需要后期进行改进
* 本来打算只用两个变量来表示一条蛇，即蛇头和蛇尾，蛇移动时蛇尾颜色变为矩阵背景色
* 蛇头向移动方向的那个方格背景色变为蛇的颜色，移动问题很好解决，也比较高效，问题是
* 当蛇的长度增加时只用这两个变量是无法解决问题的（至少我是这样认为的），
* 还需要新建其他变量来表示，无疑增加了理解上的难度，
* 效率也会有所下降，还不如用一个数组来表示整条蛇，这样无乱是理解上还是
* 代码书写上都简单了很多
* */
var snake=[55]
var direction=39;
var food={pos:0,isSet:false};
var InterId;
function move(){
var e=e||window.event;
var code=e.keyCode;
switch(code){
case 38://up
direction=38;
draw((snake[0]-10));
break
case 39://right
direction=39;
draw((snake[0]+1));//暂不处理边界问题
break
case 40://down
direction=40;
draw((snake[0]+10));//边界问题后面处理
break
case 37://left
direction=37;
draw((snake[0]-1));
break
}
}
function defuatMove(){
document.onkeydown=move;
switch(direction){
case 38://up
draw((snake[0]-10));
break
case 39://right ///////////////////////////////////////////////
draw((snake[0]+1));//暂不处理边界问题
break
case 40://down
draw((snake[0]+10));//边界问题后面处理
break
case 37://left
draw((snake[0]-1));
break
}
}
function draw(head){
snake.splice(0,0,head)
if(isCrash()){
alert("Game Over!")
clearInterval(InterId);
}
if(food.isSet==false) setFood();
document.getElementById("w"+food.pos).style.background="yellow";
var snake_head=document.getElementById("w"+snake[0]);
snake_head.style.backgroundColor="black";
var snake_tag=document.getElementById("w"+snake[snake.length-1]);
if(checkEat()){
Eat();
snake_tag.style.backgroundColor="black";
}else{
snake_tag.style.backgroundColor="#ccc";
snake.pop()
}
}
function setFood(){
food.pos=Math.random()*100+1;
food.pos=parseInt(food.pos);
var isOk=document.getElementById("w"+food.pos);
if(isOk.style.backgroundColor=="black"){/////////////////
setFood();
}
food.isSet=true;
}
function checkEat(){
if(food.pos==snake[0]){
return true;
}
}
function Eat(){
food.isSet=false
}
function isCrash(){
var i=1;
for(;i<snake.length-1;i++){
if(snake[0]==snake[i]) return true;
}
}
function init(){
InterId=setInterval(defuatMove,1000);
}
window.onload=init
html:
<html>
<head>
<style>
table tr td{
30px;
height: 30px;
background-color: #ccc;
border: 4px gray outset;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<td id="w1"></td><td id="w2"></td><td id="w3"></td><td id="w4"></td><td id="w5"></td><td id="w6"></td><td id="w7"></td><td id="w8"></td><td id="w9"></td><td id="w10"></td>
</tr>
<tr>
<td id="w11"></td><td id="w12"></td><td id="w13"></td><td id="w14"></td><td id="w15"></td><td id="w16"></td><td id="w17"></td><td id="w18"></td><td id="w19"></td><td id="w20"></td>
</tr>
<tr>
<td id="w21"></td><td id="w22"></td><td id="w23"></td><td id="w24"></td><td id="w25"></td><td id="w26"></td><td id="w27"></td><td id="w28"></td><td id="w29"></td><td id="w30"></td>
</tr>
<tr>
<td id="w31"></td><td id="w32"></td><td id="w33"></td><td id="w34"></td><td id="w35"></td><td id="w36"></td><td id="w37"></td><td id="w38"></td><td id="w39"></td><td id="w40"></td>
</tr>
<tr>
<td id="w41"></td><td id="w42"></td><td id="w43"></td><td id="w44"></td><td id="w45"></td><td id="w46"></td><td id="w47"></td><td id="w48"></td><td id="w49"></td><td id="w50"></td>
</tr>
<tr>
<td id="w51"></td><td id="w52"></td><td id="w53"></td><td id="w54"></td><td id="w55"></td><td id="w56"></td><td id="w57"></td><td id="w58"></td><td id="w59"></td><td id="w60"></td>
</tr>
<tr>
<td id="w61"></td><td id="w62"></td><td id="w63"></td><td id="w64"></td><td id="w65"></td><td id="w66"></td><td id="w67"></td><td id="w68"></td><td id="w69"></td><td id="w70"></td>
</tr>
<tr>
<td id="w71"></td><td id="w72"></td><td id="w73"></td><td id="w74"></td><td id="w75"></td><td id="w76"></td><td id="w77"></td><td id="w78"></td><td id="w79"></td><td id="w80"></td>
</tr>
<tr>
<td id="w81"></td><td id="w82"></td><td id="w83"></td><td id="w84"></td><td id="w85"></td><td id="w86"></td><td id="w87"></td><td id="w88"></td><td id="w89"></td><td id="w90"></td>
</tr>
<tr>
<td id="w91"></td><td id="w92"></td><td id="w93"></td><td id="w94"></td><td id="w95"></td><td id="w96"></td><td id="w97"></td><td id="w98"></td><td id="w99"></td><td id="w100"></td>
</tr>
</table>
<div id="contend">
</div>
<script type="text/javascript" src="./snake.js">
</script>
</body>
</html>