最近突然爱上了js，特地做几个经典的小游戏来玩一玩，学java学了这么久，欢欢
snake.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪吃蛇</title>
<script language="javascript" src="js/jquery.1.8.1.js"></script>
<script language="javascript" src="js/snake.js"></script>
<link href="css/snake.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<table id="frameTable">
</table>
<input type="button" value="开始" id="start"/>
</body>
</html>
snake.css:
/* CSS Document */
body{
text-align:center;
}
#frameTable{
width:530px;
height:530px;
border-collapse: collapse;
border: 1px solid #000;
margin:0 auto
}
tr td{
border: 1px solid #000;
padding:0px;
}
input{
margin-top:20px;
width:100px;
height:30px;
}// JavaScript Document
var game = {
init:{
rowNum : 20,//初始化表格的行
colNum : 20,//初始化表格的列
foodNum : 10,//初始化食物数量
speed: 200,//初始化蛇的移动速度
foodColor: 'red',//食物颜色
snakeBodyColor: '#6F3',//蛇身体的颜色
snakeHeadColor: 'black',//蛇头的颜色
backgroundColor: 'yellow',//表格的颜色
direction : 'right',//默认蛇的移动方向,右
state: '',
snakePosition : ["10-7","10-8","10-9","10-10"],//蛇每节身体的坐标，横纵坐标以-隔开
initFrame:function() {//加载游戏界面
game.pfunction.loadWall();
game.pfunction.loadSnake();
game.pfunction.loadFood(game.init.foodNum);
game.init.initEvent();
},
initEvent:function(){
$("#start").unbind("click");
$("#start").bind("click", function() {//开始按钮事件
if($(this).val() == "再来一局") {
game.gamerestart();
return;
}
game.init.direction = "right";
$(this).hide();
game.init.state = setInterval(function() {
var len = game.pfunction.getSnakeSize();//得到蛇的长度
if(game.init.direction == "right") {//向右移动
//得到蛇头的将要到达的坐标，向右移动x坐标不变，y坐标+1
var x = game.pfunction.getX(len-1);
var y =game.pfunction.getY(len-1) + 1;
if(y>=game.init.rowNum) {//判断蛇是否撞到了墙
game.gameover();return;
}
}else if(game.init.direction == "left") {//向左移动
//得到蛇头的将要到达的坐标，向左移动x坐标不变，y坐标-1
var x = game.pfunction.getX(len-1);
var y =game.pfunction.getY(len-1) - 1;
if(y<0) {
game.gameover();return;
}
}else if(game.init.direction == "up") {//向上移动
//得到蛇头的将要到达的坐标，向上移动x坐标-1，y坐标不变
var x = game.pfunction.getX(len-1) - 1;
var y =game.pfunction.getY(len-1);
if(x<0) {
game.gameover();return;
}
}else if(game.init.direction == "down") {//向下移动
//得到蛇头的将要到达的坐标，向下移动x坐标+1，y坐标不变
var x = game.pfunction.getX(len-1) + 1;
var y =game.pfunction.getY(len-1);
if(x>=game.init.colNum) {
game.gameover();return;
}
}
game.pfunction.judgeWhetherIsSnakeBody(x+"-"+y);//判断蛇是都撞到了自己的身体，若是游戏结束
game.pfunction.judgeWhetherIsFood(x+"-"+y);//判断将要前进的方向是否是食物
game.pfunction.addHead(x+"-"+y);//蛇头前一个位置变成蛇头
game.pfunction.createFood();//如果蛇吃掉了一个食物，重新产生一个食物，没有则不产生
game.pfunction.loadSnake();//重新把蛇显示出来
},game.init.speed);
});
$(document).keydown(function(event){ //键盘按下事件
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==87){ // 按 w
if(game.init.direction == "down") {
game.init.direction = "down"
return;
}
game.init.direction = "up";
}
if(e && e.keyCode==65){ // 按 a
if(game.init.direction == "right") {
game.init.direction = "right"
return;
}
game.init.direction = "left";
}
if(e && e.keyCode==83){ // 按 s
if(game.init.direction == "up") {
game.init.direction = "up"
return;
}
game.init.direction = "down";
}
if(e && e.keyCode==68){ // 按 d
if(game.init.direction == "left") {
game.init.direction = "left"
return;
}
game.init.direction = "right";
}
});
}
},
pfunction:{
loadWall:function() {//动态产生整个表格，也就是蛇活动的区域
for(var i=0;i<game.init.rowNum;i++) {
$TR = $("<tr/>").attr("id",i);
for(var j=0;j<game.init.colNum;j++) {
$TD = $("<td/>").attr("id",i+"-"+j).attr("class","empty")
.css("background",game.init.backgroundColor);
$TR.append($TD);
}
$("#frameTable").append($TR);
}
},
loadSnake:function() {//遍历蛇身的坐标，把蛇在界面上显示出来
for(var i=0;i<game.pfunction.getSnakeSize();i++) {
var position = game.init.snakePosition[i];
if(i == game.pfunction.getSnakeSize()-1) {
$("#"+position).css("background",game.init.snakeHeadColor);
}else {
$("#"+position).css("background",game.init.snakeBodyColor);
}
$("#"+position).attr("class","snake");
}
},
loadFood:function(foodNum) {//随机产生foodNum个食物
var i = 0;
while(i<foodNum) {
var x = parseInt(Math.random()*19);
var y = parseInt(Math.random()*19);
var seat = x+"-"+y;
if($("#"+seat).attr("class") == "snake" || $("#"+seat).attr("class") == "food") {
continue;
}
$("#"+seat).css("background",game.init.foodColor);
$("#"+seat).attr("class","food");
i++;
}
},
getX:function(index) {
return parseInt(game.init.snakePosition[index].split("-")[0]);
},
getY:function(index) {
return parseInt(game.init.snakePosition[index].split("-")[1])
},
removeFoot:function() {//移除蛇尾
return game.init.snakePosition.splice(0,1);
},
addHead:function(head) {//添加蛇头
game.init.snakePosition.push(head);
},
getSnakeSize:function() {//得到此时蛇的长度
return game.init.snakePosition.length;
},
judgeWhetherIsFood:function(pre) {
if($("#"+pre).attr("class") != "food") {
var foot = game.pfunction.removeFoot();
$("#"+foot).css("background",game.init.backgroundColor);
$("#"+foot).attr("class","empty");
}
},
judgeWhetherIsSnakeBody:function(pre) {
if($("#"+pre).attr("class") == "snake") {
game.gameover();
}
},
createFood:function() {//遍历整个界面的食物，如果食物少了一个，重新产生一个食物
var foodNo = 0;
for(var i=0;i<game.init.rowNum;i++) {
for(var j=0;j<game.init.colNum;j++) {
if($("#"+i+"-"+j).attr("class") == "food") {
foodNo++;
}
}
}
if(foodNo<game.init.foodNum) {
game.pfunction.loadFood(1);
}
},
},
gamerestart:function() {//再来一局，重新初始化界面
for(var i=0;i<game.init.rowNum;i++) {
for(var j=0;j<game.init.colNum;j++) {
$("#"+i+"-"+j).attr("class","empty").css("background",game.init.backgroundColor);
}
}
game.init.snakePosition = ["10-7","10-8","10-9","10-10"];
game.pfunction.loadSnake();
game.pfunction.loadFood(game.init.foodNum);
$("#start").val("开始");
},
gameover:function() {//游戏结束
clearInterval(game.init.state);
$("#start").val("再来一局");
$("#start").show();
alert("game over");
}
};
$(function() {
game.init.initFrame();
});
2936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
