jQuery实现贪吃蛇小游戏附源码下载

前言

相信贪吃蛇的游戏大家都玩过。在那个水果机还没有流行,人手一部诺基亚的时代,贪吃蛇是手机中的必备游戏。笔者闲的无聊的时候就拿出手机来玩上几局,挑战一下自己的记录。

后来上大学了,用c语言做过贪吃蛇的游戏,不过主要是通过函数来控制(PS:现在让我看代码都看不懂(⊙﹏⊙))。现在学习前端框架之后,通过jQuery来实现一个贪吃蛇的游戏效果,虽然游戏界面比(bu)较(ren)简(zhi)陋(shi),但是主要学习一下游戏中面向对象和由局部到整体的思想。

设计思想

在开始写代码前首先让我们来构思一下整体游戏的实现过程:

需要的对象

首先既然是贪吃蛇,那么游戏中肯定要涉及到两个对象,一个是蛇的对象,另一个是食物的对象。食物对象肯定要有一个属性就是食物的坐标点,蛇对象有一个属性一个数组,用来存放蛇身体所有的坐标点。

如何移动

另外全局需要有一个定时器来周期性的移动蛇的身体。由于蛇的身体弯弯曲曲有各种不同的形状,因此我们只处理蛇的头部和尾部,每次移动都根据移动的方向的不同来添加新的头部,再把尾部擦去,看起来就像蛇在向前爬行一样。

方向控制

由于蛇有移动的方向,因此我们也需要在全局定义一个方向对象,对象中有上下左右所代表的值。同时,在蛇对象的属性中我们也需要定义一个方向属性,用来表示当前蛇所移动的方向。

碰撞检测

在蛇向前爬行的过程中,会遇到三种不同的情况,需要进行不同的判断检测。第一种情况是吃到了食物,这时候就需要向蛇的数组中添加食物的坐标点;第二种情况是碰到了自己的身体,第三种是碰到了边界,这两种情况都导致游戏结束;如果不是上面的三种情况,蛇就可以正常的移动。

开始编程

整体构思有了,下面就开始写代码了。

搭建幕布

首先整个游戏需要一个搭建活动的场景,我们通过一个表格布局来作为整个游戏的背景。

rush:xhtml;">