javascript 贪食蛇

标签: javascript 贪食蛇 | 发表时间:2011-10-18 05:48 | 作者:杨伟明 Xin
出处:http://www.cnblogs.com/

我的程序用javascript与Html中的table结合,实现的简单的贪食蛇游戏,游戏的主要特点,可调整蛇移动速度,可调整蛇移动范围,碰壁、咬到身体则“Game Over!”并且有关卡加速功能。游戏并不完善,只是实现了主要的功用,有设计不合理的地方,欢迎您感大家提意见!

       实现方法:由javascript语言中的setInterval方法驱动整个游戏程序,设置“nowDirection”即蛇的当前移动方向为全局变量,由setInterval方法定时获取蛇的移动方向,由document.onkeydown()捕捉当前按键(上、下、左、右)以修改nowDirection,这样就可以用方向按键控制蛇周期时间的定向移动。蛇的行走轨迹实现个人觉的实现的还算比较简单,蛇身的每一节存在数组中,数组中的元素为蛇的坐标,移动的时候数组根据方向在数组头部加一个元素,并且将数组最后一个元素删除,这样table就可以准确的显示蛇的行走轨迹,游戏结束比较容易判断,只需根据方向判断蛇的下一个移动单元的坐标是否超出范围(碰壁),或者下一个移动单元的坐标是否存在于蛇身的数组中(咬到身体)。游戏的关卡设计一蛇身数组的长度计算,不能关卡贮蓄改变全局变量speed并且重新启动setInterval方法即可。

      主要技术点:一、蛇的移动

                      二、蛇的移动轨迹显示

                      三、周期内不能接受两次按键指令

                      四、随机生成蛇的食物

                      (大体写写,其实根本没什么技术含量!)

IE测试环境;

截图

源码如下:

<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">

var maxScope = 30;
var interval;
var nowDirection = 'left';
var speed = 300;
var cellWeight = 10;
var snakeBody = new Array();
var foodStation = null;
var freeCell_x = new Array();
var freeCell_y = new Array();
var cornerList = new Array();
var cycleCount = 0;
function $(x) {
return document.getElementById(x);
}
        //页面加载
function init() {
_table
= document.getElementById("table");
for (var i = 0; i <= maxScope; i++) {
var row = document.createElement("tr");
row.id
= i;
for (var j = 0; j <= maxScope; j++) {
var cell = document.createElement("td");
cell.id
= i + "_" + j;
cell.width
= cellWeight;
cell.height
= cellWeight;
row.appendChild(cell);
}
document.getElementById(
"newbody").appendChild(row);
}
initSnake();
initFood();
snakeInterval();
}
        //移动动作驱动方法
function snakeInterval() {
interval
= window.setInterval('snakeMove();cycleCount=0', speed);
}
        //初始化蛇
function initSnake() {
var x = parseInt(Math.random() * (parseInt(maxScope) - 1) + 1);
var y = parseInt(Math.random() * (parseInt(maxScope) - 1) + 1);
var nowHeadStation = x + "_" + y;
snakeBody.push(nowHeadStation);
tdState(nowHeadStation);
}
        //设置食物位置
function initFood() {
var allCells = new Array();
for (var i = 0; i < maxScope + 1; i++) {
for (var j = 0; j < maxScope + 1; j++) {
allCells.push(i
+ '_' + j);
}
}
var addCellsString = allCells.join(',') + ',';
for (var i = 0; i < snakeBody.length; i++) {
_snakeBodyCell
= snakeBody[i] + ',';
addCellsString
= addCellsString.replace(_snakeBodyCell, "");
}
addCellsString
= addCellsString.substr(0, addCellsString.length - 1);
var _allCells = addCellsString.split(',');
foodStation
= _allCells[parseInt(Math.random() * (_allCells.length - 1) + 0)]
try {
foodState(foodStation);
}
catch (e) {
alert(foodStation);
}
}
        //接受按钮指令
function document.onkeydown() {
cycleCount
= cycleCount + 1;
if (cycleCount < 2) {
switch (event.keyCode) {
case 37:
if (nowDirection != 'right') {
nowDirection
= 'left';
}
break;
case 38:
if (nowDirection != 'down') {
nowDirection
= 'up';
}
break;
case 39:
if (nowDirection != 'left') {
nowDirection
= 'right';
}
break;
case 40:
if (nowDirection != 'up') {
nowDirection
= 'down';
}
break;
}
}
}
        //获取单元格坐标
function coordinate(i) {
switch (i) {
case 'x':
return $(snakeBody[0]).id.split('_')[0];
case 'y':
return $(snakeBody[0]).id.split('_')[1];
}
}
        //蛇移动
function snakeMove() {
foodX
= foodStation.split('_')[0];
foodY
= foodStation.split('_')[1];
var _xy;
switch (nowDirection) {
case 'left':
_x
= coordinate('x');
_y
= Math.floor(coordinate('y')) - 1;
_xy
= _y;
break;
case 'right':
_x
= coordinate('x');
_y
= Math.floor(coordinate('y')) + 1;
_xy
= _y;
break;
case 'up':
_x
= Math.floor(coordinate('x')) - 1;
_y
= coordinate('y');
_xy
= _x;
break;
case 'down':
_x
= Math.floor(coordinate('x')) + 1;
_y
= coordinate('y');
_xy
= _x;
break;
default:
_x
= coordinate('x');
_y
= Math.floor(coordinate('y')) - 1;
_xy
= _y;
}
if (_xy < 0 || _xy > maxScope) {
overCoordinate();
}
else if (rearEnd(_x, _y)) {
rearEndState();
}
else if (_x == foodX && _y == foodY) {
snakeBody.unshift(_x
+ '_' + _y);
level(snakeBody.length);
$(
'score').innerHTML = snakeBody.length * 10;
tdState(snakeBody[
0]);
initFood();
}
else {
snakeBody.unshift(_x
+ '_' + _y);
tdState(snakeBody[
0]);
tdStateBack(snakeBody.pop());
}
}
        //咬到蛇身
function rearEnd(x, y) {
var t = x + '_' + y;
for (var i = 0; i < snakeBody.length; i++) {
if (t == snakeBody[i]) {
return true;
}
}
return false;
}
        //咬到蛇身状态变化
function rearEndState() {
window.clearInterval(interval);
alert(
'game over')
}
        //碰壁状态变化
function overCoordinate() {
window.clearInterval(interval);
alert(
"game over");
}
        function tdState(targetTd) {
$(targetTd).style.background
= "red";
}
function foodState(targetTd) {
$(targetTd).style.background
= "green";
}
function tdStateBack(targetTd) {
$(targetTd).style.background
= "";
}
        //关卡设置
function level(max) {
switch (max) {
case 10:
levelShow(
"Second");
break;
case 20:
levelShow(
"Third");
break;
case 30:
levelShow(
"Forth");
break;
case 40:
levelShow(
"Fifth");
break;
case 70:
window.clearInterval(interval);
alert(
"NB!"); window.close();
break;
}
}
        //设置不同关卡速度变化
function levelShow(_show){
window.clearInterval(interval);
alert(_show);
speed
= speed - 50;
snakeInterval();
}
</script>
</head>
<body onload="init()">
<table id="table" align="center" bgcolor="pink">
<tbody id="newbody">
</tbody>
</table>
<table align="center">
<tr>
<td style="font-size: 12px">
score:<span id="score">0</span>
</td>
</tr>
</table>
</body>
</html>



作者: 杨伟明 发表于 2011-10-18 13:48 原文链接

评论: 8 查看评论 发表评论


最新新闻:
· 苹果周二发布第三季度财报 iPhone成信心保障(2011-10-18 20:46)
· 求解斯芬克斯之谜——《X光下看腾讯》序(2011-10-18 20:44)
· 预告:Android 4.0 将于明日香港首发(2011-10-18 20:39)
· Twitter活跃用户量超1亿 超50%用户每天登陆(2011-10-18 20:36)
· 调查称近八成人每天必登录Facebook(2011-10-18 20:33)

编辑推荐:最老程序员创业札记:全文检索、数据挖掘、推荐引擎应用48

网站导航:博客园首页  我的园子  新闻  闪存  小组  博问  知识库

相关 [javascript 贪食蛇] 推荐:

javascript 贪食蛇

- Xin - 博客园-首页原创精华区
我的程序用javascript与Html中的table结合,实现的简单的贪食蛇游戏,游戏的主要特点,可调整蛇移动速度,可调整蛇移动范围,碰壁、咬到身体则“Game Over. 游戏并不完善,只是实现了主要的功用,有设计不合理的地方,欢迎您感大家提意见.        实现方法:由javascript语言中的setInterval方法驱动整个游戏程序,设置“nowDirection”即蛇的当前移动方向为全局变量,由setInterval方法定时获取蛇的移动方向,由document.onkeydown()捕捉当前按键(上、下、左、右)以修改nowDirection,这样就可以用方向按键控制蛇周期时间的定向移动.

Javascript诞生记

- Milido - 阮一峰的网络日志
二周前,我谈了一点Javascript的历史. 今天把这部分补全,从历史的角度,说明Javascript到底是如何设计出来的. 只有了解这段历史,才能明白Javascript为什么是现在的样子. 我依据的资料,主要是Brendan Eich的自述. "1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.

JavaScript,你懂的

- dylan - keakon的涂鸦馆
经常有人问我,JavaScript应该怎么学. 先学基本语法,如果曾学过C等语言,应该1小时内就能掌握了. 再去使用内置的函数、方法和DOM API,熟悉它能干什么;而在学习DOM API的过程中,你还不得不与HTML和CSS打交道. 然后弄懂匿名函数和闭包,学会至少一个常用的JavaScript库(例如jQuery).

Javascript 里跑Linux

- rockmaple - Shellex&#39;s Blog
牛逼到暴的大拿 Fabrice Bellard,用Javascript实现了一个x86 PC 模拟器,然后成功在这个模拟器里面跑Linux(请用Firefox 4 / Google Chrome 11打开,Chome 12有BUG). 关于这个东西… 伊说 “I did it for fun“,大大啊大大啊….

高效 JavaScript

- xtps - ITeye论坛最新讨论
传统上,网页中不会有大量的脚本,至少脚本很少会影响网页的性能. 但随着网页越来越像 Web 应用程序,脚本的效率对网页性能影响越来越大. 而且使用 Web 技术开发的应用程序现在越来越多,因此提高脚本的性能变得很重要. 对于桌面应用程序,通常使用编译器将源代码转换为二进制程序. 编译器可以花费大量时间优化最终二进制程序的效率.

你得学JavaScript

- 蒋冰 - 伯乐在线 -博客
  注:本文由 敏捷翻译 - 蒋少雄 翻译自 Kenny Meyers 的博文.   如果三年前你问我应该学什么语言,我会告诉你是Ruby.   如果你现在想学一门语言的话,你应该学习JavaScript..   我认为,每一位Web开发人员都应该学习JavaScript. 目前推出的许多新技术都支持这个观点.

你不懂Javascript

- 英建 - 黑客志
过去几年我注意到技术圈一个很奇怪的现象,有太多程序员将那些他们只是有过非常浅显的了解,但其实根本就不懂的技术写到他们的简历中,这个现象几乎每种语言都有,但这其中最严重的就要数Javascript了. 出现这种状况的一个很大的原因就是现如今几乎每个开发者的工作都或多或少要依赖于Javascript,但大多数人并不真的理解这门语言,他们常用的学习方式是复制粘贴,使用这种方式,你永远不会真正学会这门语言,而只能得到一个你已经懂了的假象.

Javascript 中的 var

- - 酷壳 - CoolShell.cn
MelonCard发布了一篇文章——” how one missing var ruined our launch“(”少写了一个var毁了我的网站”),这篇文章是说MelonCard用Node.js做后台,因为出了一个小高峰——有50-100人注册,结果整个网站都不响应了,而且还出现了很多奇怪的问题.

用JavaScript截图

- - 四火的唠叨
文章系本人原创,转载请保持完整性并注明出自 《四火的唠叨》. 使用JavaScript截图,这里我要推荐两款开源组件:一个是 Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像;但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要 html2canvas,它可以将DOM对象转换成一个canvas对象.

javascript技巧

- - ITeye博客
oncontextmenu="window.event.returnValue=false"  将彻底屏蔽鼠标右键. < table border oncontextmenu=return(false)>< td>no< /table>  可用于Ta bl e.