施用js实现贪食蛇游戏-JavaSript-爱易网页

施用js实现贪食蛇游戏

日期：2014-05-16　浏览次数：20467 次

使用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;

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

施用js实现贪食蛇游戏

相关资料更多>

推荐阅读更多>