博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
零基础HTML5游戏制作教程 第6章 贪吃蛇的实现及代码
阅读量:5300 次
发布时间:2019-06-14

本文共 2226 字,大约阅读时间需要 7 分钟。

第6章 贪吃蛇的实现及代码

讲了不少东西了,老讲理论的东西没劲呀,我们不如先试着做一个小游戏吧。

作为我们的第一个游戏,当然是越简单越好。《贪吃蛇》大家应该都玩过吧?我觉得我玩过的游戏中,她应该算是最简单的一个了。好,就让我们从做《贪吃蛇》开始,享受自己做游戏的乐趣吧。

由于这个游戏是本教程的第一个实际的游戏例子,我会讲的比较详细一些。请大家重点注意编程的思路和实现的方法,这些远比代码本身要重要。

 

一,蛇身的制作

蛇身由一系列方格组成,初始我们设定蛇身的长度是4,以后每吃到一次食物就增加1。

我们需要给组成蛇身的每一节一个坐标(可以保存在数组里),并设定一个变量var lenth=4;来存放蛇身的长度。

这样我们要画出蛇身的时候就很容易,只要用一个for循环for(i=0;i<lenth;i++)就可以根据坐标,一个一个格子地画出蛇身。

二,蛇的前进

这个对于初学者来说,可能有一点点困难。因为在某一时间点,整个蛇的前进方向可能是不一样的。

比如蛇头正在向下运动,而尾巴可能还在向右。

如果你仔细观察,你会发现,蛇的下一节的移动方向,就是她的前一节原来所在的地方。

比如蛇的第一节(也就是蛇头)正在向右移动一格,那么她的第二节,就正在移动到第一节原来所在的地方;同样,第三节正在移动到第二节原来所在的地方。

这样就好办了,我们只要让下一节的坐标直接等于上一节当前的坐标就可以了。

function move(){
for(i=(lenth-1);i>=1;i--) {worma[i]=worma[i-1]; wormb[i]=wormb[i-1]; }}

还剩第一节(蛇头),因为第一节是没有上一节的,所以第一节的坐标由蛇目前前进的方向(来自玩家的键盘输入)计算得出。

三,食物的随机出现

贪吃蛇的食物是随机出现的。比如在我做的例子里,地图的宽度是30,高度是20,那么我们可以使用random函数和floor函数来获得一个宽30高20范围内的随机坐标。

(函数中的foodboolean用于判断当前的food是否存在,如果不存在(=0),就生成新的food,如果已经存在(=1),就不新生成了。)

function getfood(){
if(foodboolean==0) {fooda=Math.floor(Math.random()*20); foodb=Math.floor(Math.random()*30); foodboolean=1; }

四,判断是不是咬到了自己

如果蛇头(第一节)碰到了她自己身体的其他任意一节,那么这个时候,这2节的坐标是一样的。我们可以根据这个来判断是不是咬到自己了。

for(i=1;i<=lenth-1;i++){
if ((worma[i]==worma[0])&&(wormb[i]==wormb[0])) {crash=1;}}

五,自动前进和防止后退

键盘有4个方向,但是贪吃蛇在前进时,只有3个方向。我们只能让她向前,或左转,或右转,而不能向后转。所以如果玩家按了和当前前进方向相反的键盘按键,我们必须防止贪吃蛇反向移动。

方法是设定一个变量,direction,用于储存当前的移动方向。如果玩家没有新的输入,那么贪吃蛇一直沿原来的方向走;如果有新的输入,那么在判断新的方向“合法”之后,存入direction变量,取代原来的方向。

例子中的direction变量用于储存当前移动方向,dnext变量用于储存下一个移动方向。

function fkeydown(kd){
if(Math.abs(direction-kd.keyCode)!=2) {dnext=kd.keyCode;};}

六,其他的一些说明

 

1,由于javascript不支持二维数组,所以用了2个数组来储存贪吃蛇的当前坐标,2个数组分别储存x和y坐标。(当然,可以用1维数组模拟2维,我们下一章讲地图的时候会讲到,但是这里没必要用,直接用2个数组更简单。)

2,有的人做《贪吃蛇》的时候喜欢把整个地图做成一个2维数组,然后在每一个地图的格子内储存一些值,比如0代表这一格是空的,1代表这一格有被贪吃蛇占据,2代表这一格是食物等等。这当然也可以,但是这样会比较复杂一点,也占用比较多的内存。因为贪吃蛇是最简单的游戏,所以我们可以把她尽量简化,我们可以完全不出现地图数组,只依靠坐标来判断。我们可以按照贪吃蛇和食物的坐标,而不是地图的值,直接把它们画出来;同样,根据坐标来直接判断贪吃蛇是否吃到食物,或者是否撞到她自己。

3,我下面的程序是今天新写的,为了这个教程才写的,没有改过,也没有经过简化(其实有部分函数可以合并)。但是我觉得作为零基础教程来说,每一个函数都很简单,反而更容易理解,所以就不去简化了。程序中的主要功能,已经在上面讲过了,剩余部分很简单。

4,本程序使用了结构化的方法,没有使用面向对象的方法。以后我们在做一些较复杂的游戏时,会使用面向对象。

5,本程序经测试,可以正常使用。

转载的话,请注明出处,谢谢

CSDN博客: 

博客园博客:   地球生活eev 

(连本段一起复制,就算是注明出处了)

下面是源程序:

greedy snake from eev

 

转载于:https://www.cnblogs.com/phyy/p/4192289.html

你可能感兴趣的文章
POJ 3579 Median(二分查找+找到第k大的值)(二分实例详解)
查看>>
【BZOJ-4213】贪吃蛇 有上下界的费用流
查看>>
FastBoot BootLoader Recovery 模式解释
查看>>
Android 上SuperUser获取ROOT权限原理解析
查看>>
CoreSight™ Technology
查看>>
LPC18xx/43xx OTP Controller driver
查看>>
[BZOJ4916]神犇和蒟蒻
查看>>
[BZOJ1691][Usaco2007 Dec]挑剔的美食家
查看>>
负载均衡基础知识(转)
查看>>
ABP框架系列之一:(Entity-实体)
查看>>
2014年总结
查看>>
图解分析mochiweb web server
查看>>
netstat 2
查看>>
as3.0 [Embed]标签嵌入外部资源
查看>>
Python 发 邮件
查看>>
mysql忘记密码的解决办法
查看>>
全面分析Java的垃圾回收机制2
查看>>
ssh中文乱码解决
查看>>
Day1:初识Python
查看>>
[Code Festival 2017 qual A] C: Palindromic Matrix
查看>>