设计理念：1.构成游戏的所有可见图形都是由20px*20px的正方形组成的；2.蛇的移动只根据方向改变蛇头部的下一个位置，其他身体部位全部移动到上一个部位。
代码如下：
snake.js
$(document).ready(function(){
var square_length = 20;//每个方块的边长[都是正方形]
var speedArr = [1000, 600, 300, 100];//预定速度值
var speed = speedArr[2];//速度
var direction = 39;//方向： 左[ascII码37] 上[38] 右[39] 下[40]
var direction_flag = false;//键盘相应，初始为关闭状态
var gamebox_width = 600;//游戏盒子宽度
var gamebox_height = 400;//游戏盒子高度
var timer = null;//定时器
var bGameOver = true;//游戏是否结束[是]
var bFood = false;//食物是否存在[否]
var snake = new Array();//蛇
var each_square = $(".game_box").find(".square");
each_square.each(function(){
snake.push( $(this) );//添加蛇初始的每一块身体
});
$(".start").click(function(){
if( $(this).val()=="开始游戏" ){
bGameOver = false;
clearInterval(timer);
timer = setInterval(run, speed);//开启游戏
$(this).val("暂停");
}else if( $(this).val()=="暂停" ){
clearInterval(timer);
$(this).val("开始游戏");
}
});
$(".again").click(function(){
window.location.reload();//刷新当前页面
});
$("body").keydown(function(event) {
if( direction_flag && event.keyCode>=37 && event.keyCode<=40 && (event.keyCode-direction)%2!=0){
direction = event.keyCode;//改变方向
direction_flag = false;//关闭键盘响应，防止用户过度操作
}
});
function run(){
/*如果食物不存在则添加食物*/
if(!bFood){
var food_top = null;
var food_left = null;
food_position();
/*生成食物*/
function food_position(){
var rand_top = parseInt( gamebox_height * Math.random() );
var rand_left = parseInt( gamebox_width * Math.random() );
food_top = parseInt( rand_top/square_length );
food_top = food_top * square_length;
food_left = parseInt( rand_left/square_length );
food_left = food_left * square_length;
//console.log("食物坐标"+ food_left +","+ food_top);
for(var i=0; i<snake.length; i++){
if( snake[i].position.top==food_top && snake[i].position.left==food_left ){
food_position();//如果新生成的食物在蛇的身体里，重新生成一个食物
break;
}
}
}
var food = '<div class="square" style="top:'+food_top+'px; left:'+food_left+'px;"></div>';
$(".game_box").append(food);//把新生成的食物添加到游戏盒子里
bFood = true;
};
//console.log("[" + snake[1].position().left +","+ snake[1].position().top +"]");//打印“蛇”头部的位置
/*头部位置只与方向挂钩，其他身体的每一个小块移动到上一个小块的位置*/
var oldTop = snake[0].position().top;
var oldLeft = snake[0].position().left;
for(var i=0; i<snake.length; i++){
var temp_oldTop = snake[i].position().top;
var temp_oldLeft = snake[i].position().left;
if( i==0 ){
switch (direction){
case 37:
snake[0].css("left", oldLeft - square_length);
break;
case 38:
snake[0].css("top", oldTop - square_length);
break;
case 39:
snake[0].css("left", oldLeft + square_length);
break;
case 40:
snake[0].css("top", oldTop + square_length);
break;
default:
break;
}
}else{
snake[i].css("top", oldTop);
snake[i].css("left", oldLeft);
}
oldTop = temp_oldTop;
oldLeft = temp_oldLeft;
}
direction_flag = true;//开启键盘响应
eatFood();//判断是否吃到食物
isAlive();//判断游戏是否结束
var score = snake.length - 4;//计算得分
$(".score").val( "当前得分：" + score);//显示得分
}
/*设置速度*/
$("#speed").click(function(){
/*只允许在游戏开始前更改*/
if(bGameOver){
switch ( $(this).val() ){
case "慢速":
speed = speedArr[0];
break;
case "中速":
speed = speedArr[1];
break;
case "快速":
speed = speedArr[2];
break;
case "极速":
speed = speedArr[3];
break;
default:
break;
}
}
});
/*判断是否吃到食物*/
function eatFood(){
//alert( $("div[class=square]:last").attr("type") );
var food = $("div[class=square]:last");
//console.log( food.position().left +","+ food.position().top);
if( food.position().left==snake[0].position().left && food.position().top==snake[0].position().top ){
food.css("left", snake[snake.length-1].position().left);
food.css("top", snake[snake.length-1].position().top);
snake.push(food);
bFood = false;//食物被消灭
}
}
/*判断游戏是否结束*/
function isAlive(){
/*撞到墙壁*/
if( snake[0].position().left>=gamebox_width | snake[0].position().left<0 | snake[0].position().top>=gamebox_height | snake[0].position().top<0 ){
clearInterval(timer);
bGameOver = true;
$(".start").val("游戏结束");
alert("游戏结束，您撞到墙了");
}
/*撞到自己*/
for(var i=1; i<snake.length; i++){
if( snake[0].position().left == snake[i].position().left && snake[0].position().top == snake[i].position().top){
clearInterval(timer);
bGameOver = true;
$(".start").val("游戏结束");
alert("游戏结束，您撞到自己了");
}
}
}
});
snake.html
<!DOCTYPE HTML>
<html>
<head>
<title> 贪吃蛇 </title>
<meta charset="utf-8">
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script src="./js/snake.js"></script>
<link href="./css/snake.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head">
<h3>请在游戏开始前设置速度，请操作键盘←↑→↓控制方向</h3>
</div>
<div class="game_set">
<div class="content">
<input type="button" class="input_button start" value="开始游戏"/>
<select id="speed" class="input_button">
<option value="慢速">慢速</option>
<option value="中速">中速</option>
<option value="快速" selected = "selected">快速</option>
<option value="极速">极速</option>
</select>
<input type="button" class="input_button score" value="当前得分：0"/>
<input type="button" class="input_button again" value="新的游戏"/>
</div>
</div>
<div class="game_box" id="game_box">
<div class="square" style="left:60px; background-color:#ff0066;" id="sanke_head" ></div>
<div class="square" style="left:40px; background-color:#0099ff"></div>
<div class="square" style="left:20px; background-color:yellow"></div>
<div class="square" style="left:0px; background-color:#00ff00"></div>
</div>
</body>
</html>
snake.css
.head{
width: 100%;
height: 43px;
border-bottom: 1px solid #d6dfea;
text-align: center;
}
.head h3{
line-height:30px;
color: #ccc;
}
.game_set{
width: 100%;
border-bottom: 1px solid #d6dfea;
text-align: center;
}
.content{
margin: 13px 0 13px 0;
}
.game_box{
width: 600px;
height: 400px;
margin: 0 auto;/*div相对屏幕左右居中*/
margin-top: 43px;
background-color: #ffffff;
border: solid 1px #ff0000;
position: relative;
}
.square{
width: 20px;
height: 20px;
background-color: #000000;
border: 0px;
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
border: solid 1px #ffffff;
}
.input_button{
cursor: pointer;
width: 106px;
height: 42px;
line-height: 42px;
background-color: #5a98de;
border-radius:3px;
color: #fff;
border: 0;
font-size: 20px;
}
.score{
width: 181px;
cursor: text;
}
1209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
