jquery贪食蛇游戏
<!--elfenliedef贪食蛇游戏
现在能玩了，但还有不少地方需改进。
2010.3.21 12:40
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪食蛇游戏</title>
<style type="text/css">
#map{
border:1px black solid;
}
#map td{
width:20px;
height:20px;
}
.snake{
background-color:blue;
}
.stock{
background-color:black;
}
.food{
background-color:yellow;
}
</style>
<script src="jquery-1.4.1.min.js"></script>
<script>
var mappoints = [];
var snake = {
body:[],
//1,2,-1,-2表示上左下右
direction:1,
olddirection:1,
speed:200,
life:null
};
var map ={
width:15,
height:15
};
$(function(){
init();
$('#move').click(function(){
move(snake);
});
$('#start').click(function(){
snake.life=setInterval(function(){move(snake)},snake.speed);
});
$('#pause').click(function(){
clearInterval(snake.life);
});
//jquery写法
$(this).keydown(function(e){
if (!e)e = window.event;
switch (e.keyCode) {
//左
case 37:{
changeDirection(2);
break;
}
//上
case 38:{
changeDirection(1);
break;
}
//右
case 39:{
changeDirection(-2);
break;
}//下
case 40:{
changeDirection(-1);
break;
}
}
});
//javascript写法
//document.onkeydown= function(e){
// if (!e)e = window.event;
// switch (e.keyCode| e.which | e.charCode) {
// case 37:{
// break;
// }
// case 38:{
// break;
// }case 39:{
// break;
// }case 40:{
// break;
// }
// }
//}
});
function init(){
for(var i = 0;i<map.height;i++){
$("#map").append($("<tr></tr>"));
for(var j = 0;j<map.width;j++){
$("#map tr:eq("+i+")").append($("<td></td>"));
}
}
//初始化地图
for(var i = 0;i<map.width;i++){
mappoints[i] = new Array();
for(var j = 0;j<map.height;j++){
//0表示空地，1表示蛇身，2表示石头，3表示食物
mappoints[i][j] = 0;
}
}
//初始化蛇身
$("#map tr:eq(5) td:eq(5)").addClass("snake");
snake.body.push({x:5,y:5});
//创建食物
createfood();
}
//蛇移动方法
function move(snake){
var newpoint={newx:0,newy:0};
if(snake.direction+snake.olddirection==0){
snake.direction = snake.olddirection;
}else{
snake.olddirection = snake.direction;
}
switch(snake.direction){
case 1:{
newpoint.newx = snake.body[0].x;
newpoint.newy = snake.body[0].y-1;
drawsnake(snake,repairnewpoint(newpoint));
break;
}
case 2:{
newpoint.newx = snake.body[0].x-1;
newpoint.newy = snake.body[0].y;
drawsnake(snake,repairnewpoint(newpoint));
break;
}
case -1:{
newpoint.newx = snake.body[0].x;
newpoint.newy = snake.body[0].y+1;
drawsnake(snake,repairnewpoint(newpoint));
break;
}
case -2:{
newpoint.newx = snake.body[0].x+1;
newpoint.newy = snake.body[0].y;
drawsnake(snake,repairnewpoint(newpoint));
break;
}
}
}
//修正蛇头
function repairnewpoint(newpoint){
if(newpoint.newx>map.width-1){
newpoint.newx =0;
}else if(newpoint.newx<0){
newpoint.newx =map.width-1;
}
else if(newpoint.newy>map.height-1){
newpoint.newy =0;
}else if(newpoint.newy<0){
newpoint.newy =map.height-1;
}
return newpoint;
}
function iseatfood(newpoint){
if(mappoints[newpoint.newx][newpoint.newy]==3)
return true;
return false;
}
function isdie(newpoint){
if(mappoints[newpoint.newx][newpoint.newy]==1||mappoints[newpoint.newx][newpoint.newy]==2){
return true;
}
return false;
}
function changeDirection(direction){
snake.direction =direction;
}
function createfood(){
//alert(Math.floor(Math.random()*10));
var x= Math.floor(Math.random()*map.width);
var y= Math.floor(Math.random()*map.height);
if(mappoints[x][y]!=0){
//alert("no food!");
createfood();
}else{
mappoints[x][y]=3;
drawfood(x,y);
}
}
function createstock(){
}
function drawsnake(snake,newpoint){
var x = newpoint.newx;
var y = newpoint.newy;
if (iseatfood(newpoint)) {
snake.body.push({x:snake.body[snake.body.length-1].x,y:snake.body[snake.body.length-1].y});
mappoints[x][y]==1;
$("#map tr:eq("+y+") td:eq("+x+")").removeClass("food");
createfood();
}
else {
$("#map tr:eq(" + (snake.body[snake.body.length - 1].y) + ") td:eq(" + snake.body[snake.body.length - 1].x + ")").removeClass("snake");
mappoints[snake.body[snake.body.length - 1].x][snake.body[snake.body.length - 1].y]=0;
if(isdie(newpoint)){
$("#gameinfo").html("你挂了！");
clearInterval(snake.life);
}
}
$("#map tr:eq("+y+") td:eq("+x+")").addClass("snake");
snakemove(snake,x,y);
//mapinfo();
}
function drawfood(x,y){
$("#map tr:eq("+y+") td:eq("+x+")").addClass("food");
}
//移动蛇的身体，改变身体数组的值
function snakemove(snake,x,y){
for( var i = snake.body.length-1;i>0;i--){
var bodypointx =snake.body[i-1].x;
var bodypointy =snake.body[i-1].y;
snake.body[i].x =bodypointx;
snake.body[i].y =bodypointy;
//alert("snake.body"+i+"是"+snake.body[i].x+" "+snake.body[i].y);
}
snake.body[0].x=x;
snake.body[0].y=y;
mappoints[snake.body[0].x][snake.body[0].y] = 1;
//alert("snake.body"+1+"是"+snake.body[1].x+" "+snake.body[1].y);
//for(var i = 0;i<snake.body.length;i++){
// mappoints[snake.body[i].x][snake.body[i].y] = 1;
//}
}
//此方法会让游戏变卡，调试用
function mapinfo(){
for(var i = 0;i<map.width;i++){
for(var j = 0;j<map.height;j++){
$("#map tr:eq("+i+") td:eq("+j+")").html(mappoints[j][i]);
}
}
}
</script>
</head>
<body>
游戏信息：<span id="gameinfo">贪食蛇游戏准备开始</span>
<input type="button" value="开始游戏" id="start">
<input type="button" value="停止游戏" id="pause">
<div id="mapcontain">
<button id="move">移动</button>
<table id="map">
</table>
</div>
</body>
</html>