施用js实现贪食蛇游戏
日期：2014-05-16 浏览次数：20478 次
使用js实现贪食蛇游戏
1、游戏说明
?
?
1) 用户可自定义贪食蛇行走速度（数字越大速度越快）及阻挡物个数（随机生成）。
2) 按“回车键”或“开始游戏”按钮开始游戏。
3) 按“方向键”控制贪食蛇行走方向。
4) 按“空格”或“开始/暂停游戏”按钮开始/暂停游戏。
?
2、效果图
?
3、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>
<link href="css/snake.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/snake.js"></script>
</head>
<body>
<div class="operate">
<div id="start">
贪食蛇速度：
<select id="speed" style="width:100px;">
<option value="10" >1</option>
<option value="8" >2</option>
<option value="6" selected="selected" >3</option>
<option value="4" >4</option>
<option value="2" >5</option>
</select>
<br /><br />
阻挡物个数：<input type="text" value="5" id="wall" style="width:100px;" />
<br /><br />
<input type="button" onclick="startGame();" value="开始游戏" />
</div>
<div id="restart" style="display:none;">
<input type="button" id="pause" onclick="pauseGame();" value="暂停游戏" />
<input type="button" onclick="restartGame();" value="重新开始" />
</div>
<div id="result"></div>
<div class="tip">
<hr />
<ul>
<li><div class="tip_color" style="background:red;"></div><span class="tip_font">蛇头</span></li>
<li><div class="tip_color" style="background:green;"></div><span class="tip_font">蛇体</span></li>
<li><div class="tip_color" style="background:#660000;"></div><span class="tip_font">食物</span></li>
<li><div class="tip_color" style="background:#6699FF;"></div><span class="tip_font">阻挡物</span></li>
<br /><br />
<li><span class="tip_short"><b>游戏操作说明：</b></span></li>
<li><span class="tip_short">1.用户可自定义贪食蛇行走速度（数字越大速度越快）及阻挡物个数（随机生成）。</span></li>
<li><span class="tip_short">2.按“回车键”或“开始游戏”按钮开始游戏。</span></li>
<li><span class="tip_short">3.按“方向键”控制贪食蛇行走方向。</span></li>
<li><span class="tip_short">4.按“空格”或“开始/暂停游戏”按钮开始/暂停游戏。</span></li>
</ul>
</div>
</div>
</body>
</html>
?
4、js
?
// 游戏名称：贪食蛇
// 作者：Sailqi
// 版本：1.0
// 日期：2011-09-22
var ground_rows = 60;//场地行数
var ground_columns = 60;//场地列数
var ground_width = 600;//场地宽度
var ground_height = 600;//场地高度
var x_step = ground_width / ground_columns;
var y_step = ground_height / ground_rows;
var points = new Array();//各点坐标数组
var snake = new Array();//贪食蛇各点数据
var refreshTimer = 200;//贪食蛇速度
var snakeHeadColor = "red";//蛇头颜色
var snakeColor = "green";//贪食蛇颜色
var foodColor = "#660000";//食物颜色
var wallColor = "#6699FF";//墙壁颜色
var groundObj;//场地JQuery对象
//行走方向 1左 2上 3右 4下
var direction = 3;
var pre_direction = direction;
var isStart = false;
var isPause = false;
//方块信息对象
function point(row, column, id, type){
this.row = row;
this.column = column;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
