【游戏教程向】第二课 听说你们都在写游戏，那我也写个贪吃蛇吧~

Hello 大家好，我就是每次脱稿才爽的⑨君~

 

今天我又来新一期的作死~让我们一起愉快地写一个贪吃蛇吧~

这是你会问到楼主上次的推箱子了？

 

别说话，我脸还是肿的……

 

于是我吸取的教训~发教材前一定先把游戏先写了……

 

于是奋斗了5个小时和杀死我无数脑细胞的产生的……

 

额……

 

 

 

 

 

 

 

准备工作~

·IDE （sublime text 优化版）

哈？你说什么!你没有啊？！我不是发过啦！

http://tieba.baidu.com/p/3877830707?pid=71101125357&cid=0#71101125357

·空白的游戏开发模块

呵呵，你说这有什么用啊？！

你不可能一个一个文件写吧~

http://pan.baidu.com/s/1kTGOdvD

·和能够看完我文章的心~

无论你是熊孩子还是什么都不懂的小白，请不要放弃看我的文章——

我的目的就是让不会编程的人都会写2D游戏！

 

（本文可能会非常的长……）

 

 

 

第一 ： 了解我们要干什么~

 

解压文件你会看到这些东东~

这时，英语4级人士开始发话了~

Images不是 图片吗~Script不是剧本吗~

呵呵，的确没错~

Images本来就是装游戏所需要的什么图片啊之类的~

不过贪吃蛇需要什么图片啊？！

那你写个Images文件夹干嘛啊！？闲的蛋疼？！

呵呵，其实它装的是的与图片文件息息相关的CSS文件~

CSS文件又是什么……

待会就讲（你是不是写十万个为什么的？！）

 

那Script了？呵呵你看看VBScript是不是有个Script了？

没错，在计算机中他就被称为脚本……

 

什么是VBScript，什么是脚本了？

VBScript就是我们今天的我们要讲的主角，然而脚本又是什么他就是类似于EXE文件可以直接运行，但是如果没可以解释我们的写的脚本的解释软件，他就和TXT文件一模一样……

 

你都讲了两个文件夹了，但还有一个……

是不是index.hta文件

呵呵我就知道你不知道，实际上在web前端工作很久的人，都很少知道有hta文件的存在。不过，多亏了这种文件才是VBScript这个本来没有界面的脚本却可以开发游戏~

 

然而你告诉我：其实我想问的是参考文件夹是什么鬼

你不认识英语，你总会认识中文吧……

就是关于贪吃蛇设计的文件

 

 

 

哦，对了你不是hta文件是VBScript编写游戏的关键

那我打开index.hta看看会有什么？！

恩，没错就是一个空白的窗口……

呵呵，我给你的空白的游戏模块，你认为我会直接把游戏给你嘛~

当然，为了和标题相互呼应我肯定还是要写~

不过，我们要一步一步的来~

首先我们要从这个游戏窗口（index.hta）做起~

 

 

 

 

 

第二步：如何让游戏可以运行了？

现在你已经知道index.hta是运行游戏主体和显示的重要窗口，但是你根本就没有讲游戏是怎么允许的啊？！

不着急，首先你需要已经安装了sublime text 这款软件，然后在你的右键菜单就会出现神奇的事情对了一个使用sublime text 打开

然后你可以使用sublime text编写软件了~（当然你可以完全使用记事本搞定，但是何必了？）

但是这时你开始犯嘀咕了？这上面的代码什么都不懂诶~

呵呵，然而我是干嘛啦~

 

 

首先是这一句！之间包括的的Tuixiangzi是什么了？

我就差没写成中文了，Tuixiangzi （推箱子）就是我上次写的推箱子标题，我几乎没有改动的，但是你当时既然你没有改动，那为什么你的软件标题栏上的标题是正确贪吃蛇了？

呵呵，之后再讲。其实这句是完全可以删掉，但是如果你想显示标题栏的内容就可以修改它们之间的字符

第二个句子就是

其实它的作用就是设置咱们的游戏窗口。

前面两个句子其实就是软件的名字和ID，这个可以以你游戏的名称修改。

VERSION的意思其实就是版本号，我写的是初始版本的意思，其实没啥作用删掉删掉

Icon 呵呵，这个就是图标的意思啦~！我文件中存在着默认图片

当然你觉得不好看，也可以换啦~

最三个句子，那是关系窗口样式的设置：

内边框不显示，滚动条不显示，右键菜单不显示

这时你就问：这有多大仇啊，都不显示。它不是和我有仇，而且它们的存在是会使游戏显示不正常

好我们讲完了，窗口样式设置，这个又是啥?

Script刚才不是讲过了吗？他就是脚本啦~没错就是在hta文件可以混合的编写VBScript，也就是说一个hta文件可能不是单单一种语言编写，而且多种？！

这时你会说：卧槽，这不是麻烦死了？！

但是就是这种机制才是VBScript编写2D游戏成为现实啊？！

 

终于讲到最后面了……

刚才我们说到一个hta可以混合编写多种语言，但是问题来了？！

假如，你的程序很少，可以几十句就搞定，那么你可以在hta文件里随便写，但是在比较大一点程序中，就不好了……

你可以想象一下：一篇小学生文章里他写上少量的英语，你会觉得：恩，孺子可教也~但是他写上一大堆英语，日语，法语……你就会认为：我去，你装什么逼啊？！

同理可得，在hta中你写了太多的其他语言程序就会造成结构上的不清晰，所以我们需要把他们分开，那怎么分开了？

就是使用我上面列举的方法…我们把其他的语言分门别类的放到其他的地方，然后在hta中使用上面的方法进行连接~

那么这个HTA文件就可以使用其他的分开到其他地方的其他语言了~

 

哎，终于讲完了HTA……等等，你还没讲了？！

那个是HTA显示部分，我们连游戏结构都没讲了，写啥

 

其实最后你会发现hta文件其实已经设置好了窗口样式，连接好了脚本~

没错就是我的功劳，还不感谢我哈哈哈哈…

 

笑你妹啊！你没讲怎么运行游戏了？！

额……

首先我们要解决这个问题首先就要知道贪吃蛇这个游戏是怎么显示的？

回忆一下，你是怎么躲过父母的搜身然后躲进被窝掏出那个又长又黑又硬的

——洛基亚山寨机。打开那个童年记忆：贪吃蛇

但是它是怎么动啊？！这时你可能会对着我说：你蠢啊？！动画不是由无数的图片，按照一定的时间在换一张，然后一直不停的换【就像一秒钟换一次图片】，然后成为我们眼睛认为它在动的动画

哦，那我们就知道：想要有动画就要像吃了炫迈一样不停的刷新窗口屏幕

那么，如何刷新窗口屏幕了？

呵呵，这时候就需要JavaScript帮助……

额……等等楼主你不是说VBScript是主角嘛？！

但我没说没有配角了

实际来讲：一来VBScript的定时运行的方法，我用起来不怎么爽，二来VBScript就没获得键盘按键的能力（不是使用API啊）

但是这些都不是理由……

而且JavaScript与VBScript可以相互调用！！！！！！

当我知道这个消息时，我的内心几乎崩溃了……

那么，VBScript不仅仅可以编写2D游戏了……他简直是万能的！！！

因为JavaScript就几乎万能了！

 

但是说这么多，你还不知道我在说什么~

咳咳……那我们就开始实际编程吧~

 

首先你可以把你最小化N久的sublime text 打开

这时我就可以回答你问了N久的问题：为什么这个地方是空着了？

首先我们要写的不是：楼主你在讲什么我怎么什么都听不懂。楼主整套教程都是你在自言自语我认识一个医生。楼主你是傻逼吗。

然而第一句是：

恩，没错那怕你不会编程都知道 65 这个莫名其妙的数值，放到keyCodeData这个名字取得乱七八糟的“盒子”（变量啦~）里……

我写这句不是闲的蛋疼啊！我是有目的！！

第一，我是说明有个“盒子”啊！它不是从石头里蹦来啊！（声明隐式变量）

第二，做一个重要的“中转站”！（让JavaScript把按键值传值给VBScript）

 

这时钻牛尖的熊孩子会发现！这个句子怎么多了个；？！

呵呵，JavaScript和VBScript是两个完全不同的脚本语言，所以他们的写法也不同

JavaScript的每个句子（代码）的末尾是有个；是为了区分句子的，也就是说你可以吧句子都写出一堆……

然而这些和我们写程序没啥关系~

哦，对了！程序中不能出现任何中文标点符号！！也就是用输入法打出来的符号

程序中不能出现任何中文标点符号！！很重要所以要说两遍！！

 

好，但是我们这个程序没有什么实际功能

那么我们让他有点用怎么样~

 

首先！你需要在的之间写上

 

这句的意思便是：当按键按下时，运行一个我们写好的程序部分（事件），名为keyDown

既然我们可以检测键盘是否按下了，我们就要一个keyDown程序部分响应它啦~

要在之间写上

 

你看到这个结构头都大了？这是什么啊!

呵呵，由Function (){}是用来定义一个程序的部分(事件)

有花括弧框起来的就是一个部分，然而这句有什么用途了？

Event.keyCode这是一个神奇的东东，它装的有你当前按下的按键

我之前就说过了KeyCodeData中转站来着，那就要把你按下的按键存储起来，就像更新一样~

就是这个目的啦~

如果你蛋疼的话可以把这个这个HTA文件记下来，呵呵至于用途吗~你试一试就知道了~

 

但是楼主你还是没有说怎么刷新游戏窗口啊……

呵呵，你这么想知道的话~那就告诉你吧~

首先你需要在中写入

你们就不要吐槽我的变量名了……没错这个名为CallFunVBS的就是一个程序的部分。

而这个CallFunvbs就是我们刷新游戏窗口的核心！

Game.Main()是什么JavaScript的代码啊？呵呵其实这个就是Game.Main就是VBScript的一个程序部分（应该叫做方法了，因为这个游戏我都是用类编写的）这时英语好的不禁吐槽了，这个不是游戏主体（GameMain）吗？恩！没错就是不停的刷新游戏主体得动画！

然而不停刷界面的奥秘就是SetTimeeout（“CallFunVBS（）”,100）他的意思就是每1/10秒的时间运行一下CallFunVBS程序部分，也就是本身！（啊就是递归算法）

这是你就问到1/10秒这个怎么来的啊？

其实上面的那个句子是一种特殊的解决问题的方法！（实际上的确是方法）帮助我们解决各种问题，但是有些问题不是一样的，需要一些不一样的解决方法就需要我们来设置它哦~但是需要一些特殊的像什么文字啊，数字啊，这些作为参数来生成效果不同的方法

这个最后面的100就是一个参数，是用来设置多少毫秒内运行的，没错单位就是毫秒！一毫秒就像把一秒切成一千份这样的大小。

那前面的“CallFunVBS”也是一个参数就是我们要运行的程序部分的名称，没错就是就是他自身！每1/10秒运行一次自身，这句就等于每1/10刷新一下游戏界面

 

嘿嘿，你说我们不会写出来吗~

那你双击Index.hta会发什么了？

卧槽，怎么还是白的！！！

 

你不是废话么……连游戏结构都没写，你会看到动画吗~呵呵呵呵呵呵呵

 

 

 

 

第三步 游戏结构设计（可不看，反正我都要发模块的，不过这个挺重要的）

都说我们的主角是VBScript，当然游戏的主体结构就由VBScript编写啦~

不过我们要编写游戏结构……额，把句子翻译一下就是让你的蛇动起来，并且让他活在你的游戏世界里，你想让他挂他就挂了喽~

这时候就需要把回忆拉回你捂得热烘烘的被窝里了~

在你那个小屏幕的贪吃蛇游戏中，无非就是3种东西

墙，蛇，食物。

上面三个都是让你头疼的东西

墙的话，它的位置是被固定下来的就是最外围的一圈

但是蛇的身体和食物，他们可不是乖乖的在一个地方啊~

所以我们就需要的一个专门的盒子（变量）来装这些它们的位置

那么，就要打开那个神秘的Script文件夹找到WinMain.vbs文件并使用sublime text打开它，你会发现只有个

这句的作用就像土地局的：你们不要给我到处建房子啊！（禁止隐式声明）

然而，我们不管它，我们首先需要一个存储蛇的信息的房子吧？（变量）

首先我们需要两个房子分别记录所有蛇身的位置（分为X轴，Y轴）

我们虽然知道了蛇身的位置，但是我们还需要蛇的长度啦~

最后就是最碉堡的~决定蛇的生死的变量&……

最后的代码实现就是这样的

 

但是这些都是关于蛇的变量啊！！写的这么乱那行了

于是楼主就魔改了一下~

额，其实VBScript没有自定义类型（Type）

为何宇宙的和平怎么可以样写了，于是楼主就写成了类的形式了

为了增强阅读性~（就是为了嘚瑟）

 

我们虽然写了蛇，但是食物还没表达出了诶~

相比之下食物就简单一些了~

我们只要知道食物的位置，和他是不是被吃掉了就行了~

但是他们还没有声明出诶~

好这个Snake和Food才能被使用！

虽然我们吧这些都处理好了~但是问题是我们要怎么显示游戏界面

 

好了，经过一天的折腾，我们最起码的写出了可以不断刷新窗口界面，我们是不是可以庆祝一下啦~

去你妹的，都一天了你都没有讲怎么显示的游戏啊！！

额……

然而我们要解决这个问题我们需要知道贪吃蛇是怎么显示的

把你的回忆又拉回你的被窝

在那种分辨率低的连图片都看不到的显示器，是怎么运行贪吃蛇了？其实道理很简单，贪吃蛇根本就不用使用图片，而是使用的“方块”（像素）

什么是方块了？你可以拿一本你看的不爽的书啊，本子啊，把它撕成一片片大小相同的小正方形，用这些小正方形拼成更大的正方形啊或者是长方形啊，而我们使用的那些小小的小正方形就是“方块”

 

 

这时你会说

哈哈，你可把大的正方形的四边的小方块涂上黑色作为墙，随便在中间找个方块涂成红色作为红色，然后再把一些方块涂成灰色作为蛇身。

你看是不是就有点像贪吃蛇了~

所以我们就需要一个逻辑结构，不过这些都不是重要的，我们需要在屏幕上显示方块

当然不是让你把纸片帖在屏幕上！

 

首先我们需要写出一个主要类模块

（抱歉啊，本来想着用比较贴切的语言来讲的

但是第一我不可能跪着把类的知识都讲完吧……所以不懂的话请多多看书。

第二楼主已经写了5000字的教程了，堪称史上最废话教程了……

所以请大家原谅我哦~）

千万不要忘了声明哦~

这是细心的小伙伴就发现为什么我要JavaScript写上Game.Main了，原来是为了和主体结构对应~

但是初始化Game类中有个Call (New View_).Init

其实字面翻译没错就是初始化界面~

然后我们声明一个View_类她可是显示游戏的法宝了~

呵呵，这个模块其实就是我上次写的推箱子的显示模块~堪称万能的（好吧，要根据游戏内容要改的）

首先Init方法就是初始化游戏界面，实际上它只是向HTA写入代码而已……

没错！Document.write 就是写入HTML代码，你说连网页都可以使用HTML出来，小小的方块又成什么问题啦~

CreatWindow方法就是控制窗口大小，你要想多大就有多大，不过在这里要注意的是

整个窗口的大小而不是去掉什么边框啊，标题栏的的实际大小啊！所以你要自己微调一下~

说道最后不少人可能会问我Display方法是什么用途，其实你看到动画就是这个方法

你会说这么短你在逗我啊！

其实这个方法的就是把所有方块的颜色进行更改！

所以你需要一个记录整个游戏窗口中所有方块颜色的二维数值和记录物品颜色的数组~

最后你打开index.hta游戏窗口

密集恐惧症患者开始抓狂了~~~

 

但是我们要如何画物了？这里我们只需要修改二维数组的数值就行了~

首先一个贪吃蛇的结构具体如下：

这时，不少机智的小伙伴猜出我想干什么~

没错，我又写个逻辑类，名为Logic

不要忘声明啊！

这个类的工作就是计算出每个方块的颜色和判断自己碰到了什么~

首先我们面对的如何计算出外围边框的墙~

其实这个算法是很简单的~

我们的这些小小的方块虽然小，但是他们都是位置的！！

第一个方块的位置是（1,1）第二个方块的位置是（1,2）

（1,1）（1,2）（1,3）（1,4）（1,5）……

…………

(上下的方块数量，1)(上下的方块数量，2)(上下的方块数量，3)(上下的方块数量，4)

在这里，我的游戏界面是由30*30的小方块组成的大方块

所以我的游戏只要设置成 看到X（坐标前面的值）是1的和30的就坚定的把那个坐标的方块的颜色改为黑色！那么上下的边框我们就变成了黑色，然后Y（后面的）也是同样的设置一下

代码实现

打开一下看看了~

{

抱歉啊，忘了在HTA调用了

这样才能显示正常啊！

}

哈哈，是不是碉堡了~

我们搞定了墙，我们是不是还要画食物了？

其实食物显示很简单就是随机生成一个坐标然后判断一下不能在蛇身上和墙上~

算法~

这里我封装了一个随机数生成函数~

然后我们在看看~

表示一点都不好玩，我只是看了一天而已~

这里就是他没有判断食物是否吃掉所以产生了重叠~

所以我们要写下（判断一下食物是否存在）

这回就正常了~

那我们就来写键盘事件吧~

 

这时你可以编写一些特殊的功能比如按下ESC建退出这类的

哦对了退出事件就是

就是Game.ClassEnd

按下Enter键暂停游戏~

最后的上下左右键，你会纳闷为什么是RunX，RunY的加减了？

待会你就知道了~

最后就是我们最为动心的部分画蛇~

其实蛇的运动是很简单的，就是一个领头的老大，身后一群小弟，老大走过的地方小弟就紧跟着走`

也就是上一个蛇的方块的位置传给下个蛇的方块，

然后删除最末尾蛇尾的位置

恩，没错就是这么的简单！

代码实现~

然后我们就需要初始化蛇的位置

你会说为什么是3个因为蛇头其实和第二个方块重合的，而蛇尾是要被删除的

所以实际上显示只有一个蛇的方块

这时你就惊讶的发现！卧槽，竟然能动了？！

呵呵，但是他不能判断什么能吃~

所以就需要判断事件~

其实判断撞墙和咬自己是很简单的

就是判断蛇头的位置是不是与墙与自己的身体重叠就是了~

吃食就是判断蛇头和食物重叠，然后蛇增长一节，食物不存在就行了~

但是这里就涉及修改数组大小的问题！

这时我们就要在Snake类中写入一个修改数组大小的方法

在Game类中写一个重新游戏的方法

这时，我们的好朋友JavaScript又上线了~

楼主的重启游戏很脑残的就是重新打开一次游戏~

因为VBScript在插入IE的情况是不能调用Wscript.shell所以就麻烦一下JavaScript君了……

 

好了历时2天

我终于写完了…………

额，其实本来我决定是简单一些语言和通俗的比喻来讲的好让那些新手也可以开发出自己心仪的小游戏啊，，但是6000字的精简教程着实吃不消……


所以有什么不明白的，不懂的地方都可以来问我，我保证不会回答（反话）


还有大神们你们就要吐槽我写的这个了我算法不好当然如果你可以提出建议，请务必收下我的膝盖……


大家一起加油哦~





我就知道你们为什么来找我


游戏本体： http://pan.baidu.com/s/1x3IsI
游戏教程（排版好的）： http://pan.baidu.com/s/1eQJaoD0
(如果要转载没问题，不过要注明好作者ID哦~)


开源万岁！！！！