能够开发一个游戏,听起来应该很酷吧,我曾无数次的畅想过,却没想过自己真的可以实现。“贪吃蛇”虽然只是一个小小的游戏,但是在这个小游戏中了解了很多javascript的活学活用,学习、思考和实验的过程虽然是痛苦的,也总算是完成了,这酣畅淋漓的感觉确实倍儿爽啊。
这里把这个功能的实现分作两次来完成,是为了更详尽的描述自己的理解和完成过程。
1、需求分析
相信大多数人都玩过“贪吃蛇”这个经典的小游戏,当年机皇诺基亚的很多机子上都会带着,这个就不用带个攻略了吧...
但是现在我们要来实现这个功能,我们就来分析一下我们都需要哪些呢?
1、一个开始按钮;还是主动权掌握在自己手中比较有安全感吧
2、一个贪吃蛇活动的区域;
3、一个贪吃蛇的目标对象;
另外我们还需要一部分相应的事件操作:
4、贪吃蛇的各种碰壁,游戏结束提示:碰到区域边界、碰到贪吃蛇自身
5、键盘的监听事件;上下左右按键进行操作
6、游戏级别的相应操作:贪吃蛇长度、贪吃蛇运行速度、级别
大概需求就这些了,至于功能的具体实现,各种事件的具体实现效果,我就不再赘述了,相信这都不是事,天空五个字。
2、功能实现
我们大概设想如下几个画面:
* 一个是单独的按钮;
* 一个单独的div;
* 一个存在贪吃蛇基础的div;
* 一个存在贪吃蛇和目标对象的div;
这就是我们今天要描述的贪吃蛇的基础:
首先,我们来编写html部分和相应的css样式设计
<div id="test" style="display:none;"></div>
<div id="ready">
<input type="button" onclick="go()" value="开始游戏" style="width: 100px;height: 50px;background-color: yellow;text-shadow: 2px 2px 3px red;">
</div>
就这样我们实现了第一个画面,当然这个样式可以随便自身设定
接下来,我们要弹出运行空间来:
function go(){
document.getElementById("ready").style.display="none";
document.getElementById("test").style.display="block";
init();
timerId=setInterval(move, 600);
}如果说这一个javascript语言的前两句是来显示运行空间,那么我用第三句来显示贪吃蛇的雏形:
function init(){
var gameZone=document.getElementById("test");
var oneSnake=createDiv(510,330);
snakes.push(oneSnake);
gameZone.appendChild(oneSnake);
var oneSnake=createDiv(510+snakeWidth,330);
snakes.push(oneSnake);
gameZone.appendChild(oneSnake);
var oneSnake=createDiv(510+snakeWidth+snakeWidth,330);
snakes.push(oneSnake);
gameZone.appendChild(oneSnake);
addFruit();
}这里就出现问题了,snakeWidth并未在之前出现过,那有如何应用呢?答案显而易见,在javascript的全局变量中设定var snakeWidth=30px,至于为什么要再全局中设定,则是因为在这个应用中它的应用比较频繁;同样,sankes也是在全局变量中进行设定的var snakes=new Array();而createDiv(510,330)的方法也是一个要点和开始时候的难点;
function createDiv(left,top){
var div=document.createElement("div");
div.style.position="absolute";
div.style.width="30px";
div.style.height="30px";
div.style.background="yellow";
div.style.border="2px dotted red";
div.style.left=left+"px";
div.style.top=top+"px";
return div;
}这个牵涉一些document的东西,暂时没法条理的说明白,就明白是用来创建一个div的就好了,好吧,就这么勉强的通过了吧...
接下来就是添加目标对象:
function addFruit(){
var left = Math.floor(Math.random() * (Math.floor(400/snakeWidth) - 1) + 1) * snakeWidth;
var top = Math.floor(Math.random() * (Math.floor(400/snakeWidth) - 1) + 1) * snakeWidth;
for(var i = 0; i < snakes.length ; i++){
var s = snakes[i];
if(left == parseInt(s.style.left) && top == parseInt(s.style.top)){
addFruit();
return;
}
}
var gameZone=document.getElementById("test");
fruit = createDiv(left,top);
gameZone.appendChild(fruit);
}
这里的fruit也是全局变量哦 var fruit;还有这里和之前都出现过的方法gameZone.appenChild实话说我之前还真没关注过这个方法哎。
这样我们需要的基本界面已经存在了吧,我们明天再来实现:
* 贪吃蛇的运动,也就是go()方法中出现的move;
* 贪吃蛇运动的判定
* 游戏级别的相关设定
最近又突发奇想,真想弄个网页发到网上啊,哪怕先整个单纯的网页,先发布下过过瘾嘛,回头得整整,嘿嘿.....

被折叠的 条评论
为什么被折叠?



