HTML5技术

手起刀落-一起来写经典的贪吃蛇游戏 - OkayChen

字号+ 作者:H5之家 来源:H5之家 2017-12-03 08:04 我要评论( )

回味 小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效果吧!! 功能和小时候玩的贪吃蛇一样, 1、选择

回味

小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效果吧!!

效果图

功能和小时候玩的贪吃蛇一样,

1、选择速度 slow normal fast 2、选择是否有墙作为障碍物 on off

看完效果就先附上地址喽:大山深处修炼的小龙虾,欢迎fork.

结构分解

如果构建一个简单的经典贪吃蛇游戏呢?我们根据面板可以分解出如下结构:

面板结构分解

因为其他面板比较简单,我们重点来看一下游戏面板

游戏面板

游戏面板是核心,在游戏面板中,我们来分解一下游戏面板我们需要的因素:

场景、snake、食物

首先我们需要一个游戏场景、snake、食物这些基础设施
这里使用canvas作为我们的整个游戏的场景:

<canvas class="wrap" id="snake" width="400" height="400" tabindex="1"></canvas>

需要一只snake,后面初始化他的位置

var activeDot = function (x, y) { ctx.fillStyle = "#eee"; ctx.fillRect(x * 10, y * 10, 10, 10); }

需要食物作为对象(关于食物我们需要定义一些规则,如食物的产生)

var food = { x: 0, y: 0 }; 规则

规则是游戏的核心

1、关于游戏的规则

snake的方向控制:(使用键盘的上下左右键控制蛇的方向)

(key) snake_dir != 2) { snake_next_dir (key snake_dir != 3) { snake_next_dir (key snake_dir != 0) { snake_next_dir (key snake_dir != 1) { snake_next_dir

关于食物,如果食物被吃掉,我们就需要产生新的食物

() ...(i i(.snake[i].checkBlock (x

接下来是核心的函数,根据选择的速度和是否有墙体作为障碍物的设置,让蛇运动起来,并且实现

1、根据选择slow、norma、fast决定蛇运动速度速度
2、如果蛇碰到自己==自杀,游戏结束
3、有墙模式碰到墙体,游戏结束
4、无墙模式蛇穿过墙体,从另一侧出现
5、使蛇碰到食物就加入自身身体的一部分,执行增加食物函数

_x _y = snake[0].y; snake_dir (snake_dir) _y_x_y_x._x_y }) ) snake[.snake[.(x i ) { snake[i].((snake[i]..width / 10) { snake[i].((snake[i].) { snake[i].((snake[i]..height / 10) { snake[i].((i isnake[i].snake[i].(..y)) { snake[snake[snake[0].y }; score (score)(.....(i isnake[i].(.

ok以上展示出一些核心部分,构建出一个舞台中一只小蛇的故事.

小时候爸妈手机里有一款小游戏叫贪吃蛇。就是一条小蛇,不停地在屏幕上游走,吃各个方向出现的蛋,越吃越长。只要蛇头碰到屏幕四周,或者碰到自己的身子,小蛇就立即毙命。方寸的舞台间,亦有无限精彩;PS:到现在也没有通关过..现在不知道能不能通关了...

最后在附上次源码,欢迎fork交流:大山深处修炼的小龙虾...因为自己测试用的服务器被占用,目前只有做的效果图供大家参考喽.
掘金地址:手起刀落-一起来写经典的贪吃蛇游戏

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 和真正的程序员在一起是怎样的体验 - 静儿1986

    和真正的程序员在一起是怎样的体验 - 静儿1986

    2017-05-10 18:03

  • 一起来玩echarts系列(二)------echarts图表自适应问题 - 谦一

    一起来玩echarts系列(二)------echarts图表自适应问题 - 谦一

    2017-01-14 09:04

  • 小公司的一年,一起看看小公司的前端可以怎么做 - 叶小钗

    小公司的一年,一起看看小公司的前端可以怎么做 - 叶小钗

    2017-01-01 09:00

  • 和transformjs一起摇摆 - 【当耐特】

    和transformjs一起摇摆 - 【当耐特】

    2016-12-01 18:00

网友点评
i