snake怎么玩,这里就不做介绍,大家都应该知道。写这篇东西只是作为自己的一个学习测验跟记录用。因为俗话说的好,好记忆不如烂笔头,还是记下来比较好。
以前没有怎么用javascript写过小游戏。使用js的地方也仅仅是一些针对web页面的简单验证操作。知道网上有一大堆关于这个游戏的javascript实现,不过没怎么看,觉得还是用自己了解的javascript来写。这个过程虽然是在造轮子,但是对于一些概念的理解我想应该也是很有帮助的。起码可以直观的了解javascript面向对象的实现。
以下就是在写snake这个 js 实现的游戏中所想到的及最后的代码,存属自己学习使用,当然能有这样的想法也不是一下子就达到的,而是在不断的重构中才有了以下这些代码。其中涉及到的算法及代码如有雷同纯属巧合。
基本实现方式:
-
用div+span+css的形式绘制一个20×20的方格画布canvas,并且对每一个span表示的格子有唯一的ID确定;
-
snake用canvas的方格表示;
-
snake的移动表示为当蛇头前进一格就改变snake head所在canvas格子的颜色,而改变snake tail所在canvas的颜色为背景色
-
snake身体是由符合规则所在每个span表示的格子ID所造成的一个数组。
-
生成20×20画布的边缘即为snake运动边界;snake运动步长为一次一个格子。
-
snake水平运动head应为加减一;上线运动head为加减二十;
首先对于该游戏的目标定为:
-
snake运动的画布canvas可以生成;
-
可以使用键盘方向键控制snake 的移动;
-
可以为snake生成食物food,不同级别的食物;
-
当snake获取food时,记分并改变snake的身体;
-
当snake撞墙或是吃到自己时重新生成游戏;
-
显示当前snake的得分及玩家的历史记录;
为了完成以上目标需要设立以下几个对象:
-
画布对象Canvas,用来标记蛇运动场所;
-
蛇对象Snake,用来显示一条蛇;
-
蛇的食物Food;
-
记分牌对象Scoreboard;
-
贪吃蛇游戏对象SnakeGame;
画布Canvas对象。
首先画布如下形式:
那么该对象具有属性为canvas所规定的四面墙,也就是snake运动范围的四个边界,以此定义为northWall(北)、eastWall(东)、southWall(南)、westWall(西);
同时canvas对象应该具有两个方法,分别为:展示该画布的方法draw()及判断某快砖属于那面墙的方法whichWallForBrick(vBrick)。
实现如下:
Snake对象:
针对上图不难看出,定义一条snake需要制定该snake的head(图中绿色部分)及tail(图中灰色部分);snake的长度也就snake身体的所占span格子的个数.
因此一条snake具有属性:head(蛇头)、tail(蛇尾)、body(身体)及direction(蛇的前进方向)
snake应该具有的方法为:移动并且找到食物moveAndFindFood(oFood)、判断是否走出了canvas的方法isHitWall(oCanvas)以及在canvas上展示snake的方法draw()
实现如下:
Food对象:
图中的黄色即为snake's food;
Food对象很简单具有属性:iNo(食物位置编号)、iRank(食物等级)、bEat(是否被吃掉)及aColor(食物颜色);
方法为:productionFoodForSnake(oSnake)(生产食物)
分享到:
相关推荐
JavaScript贪吃蛇小游戏
javascript贪吃蛇网页小游戏
个人小练习,纯javascript开发贪吃蛇小游戏
javascript贪吃蛇游戏,欢迎下载!
javaScript贪吃蛇源代码,详细的javaScript贪吃蛇代码,里面都写了注释
原生Javascript贪吃蛇代码
javascript写的贪吃蛇游戏 运行界面:http://hi.baidu.com/roovent/blog/item/0b4c5e2aef8272f0e6cd4081.html
原生JavaScript贪吃蛇完美实现 思路绝对让你眼前一亮!
html+js+css写的贪吃蛇程序 注释详细
javascript贪吃蛇(面向对象)
javascript制作的简易贪吃蛇
分享一个基于JavaScript的贪吃蛇游戏源码,纯手写,如果对我的代码有更好的建议,可以给我留言。
用 Javascript 编程和其他语言的一个大的区别就是键盘的控制代码不同。js是通过 Key=event.keyCode 语句获取键盘码,再在多分支 switch 结构里分别处理。看完这些代码就会对浏览器里的键盘控制有所了解了。 当然...
瞎写的,很多功能没实现,比如暂停开始,本来想整合到一起
用JavaScript写的贪吃蛇游戏,键盘方向键控制方向,“+”键加速,"-"键减速。
html+JavaScript贪吃蛇原创,代码可以修改性比较高,大家可以按照自己的修改,使用比较通俗的写法写的,很容易理解!
JavaScript贪吃蛇游戏、 JavaScript贪吃蛇游戏、 JavaScript贪吃蛇游戏、 JavaScript贪吃蛇游戏、
JavaScript贪吃蛇小游戏——学习JavaScript的面向对象编程。适合前端初学者的学习。具体介绍可在主页博客里看到哦。
一款由javascript编写的贪吃蛇小游戏,互相探讨,互相学习。
贪吃蛇小游戏源码,可以实现分数累加,吃到食物可以随机变化颜色等