找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5网页游戏和微信小游戏极速入门教程(三)基础知识III

3
回复
1030
查看
[ 复制链接 ]

22

主题

36

帖子

237

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
237
2018-8-1 20:55:37 显示全部楼层 阅读模式
在前面两篇基础知识教程中,我们先后了解了变量、函数以及变量的作用域。本篇教程中,我们一起来了解关于程序的逻辑判断和循环执行的相关问题。

逻辑判断是程序运行的核心知识,随着程序的不断运行,我们定义的变量会发生值的变化。例如英雄的血量减少了,攻击力减弱了,魔法值提升了等等。在这些数值发生变化时,游戏的功能也要有对应的反馈。比如当英雄血量减少到0,程序就需要告诉玩家GameOver。这些功能都是通过逻辑判断语句来实现的。

先来看一个最简单的逻辑判断(请注意本代码只能在通过D5PowerEditor创建的项目中运行):

  1. var a:number = 10;
  2. if(a<20)
  3. {
  4. trace('这是一个比20小的数');
  5. }
复制代码


第一句代码我们已经非常熟悉了,我们定义了一个名称为a的变量,值为10。

然后就是我们今天接触到的逻辑判断语句了,假如一对小括号中的条件能够成立,那么一对大括号中的代码就会被运行。我们可以完全用中文来表达下这段代码:

  1. 如果(a小于20)
  2. {
  3.     输出('这是一个比20小的数')
  4. }
复制代码



是不是看起来亲切多了?所以,无论条件判断有多么复杂,首先都应该把它当成一个最简单的判断结构来看,差不多是这样的:


  1. if(这里的条件成立)
  2. {
  3. 那就运行这里的代码
  4. }
复制代码


那么来练习一下吧:


  1. if(a>5)
  2. {
  3. trace('这是一个比5大的数');
  4. }
复制代码


还有


  1. if(a>50)
  2. {
  3. trace('这是一个比50大的数');
  4. }
复制代码


怎么样?是不是可以看懂了呢?

接下来,我们把完成的代码贴下来。你可以考虑一下,如果这段代码运行起来,你能看到的输出结果是什么呢?



  1. var a:number = 10;
  2. if(a<20)
  3. {
  4. trace('这是一个比20小的数');
  5. }

  6. if(a>5)
  7. {
  8. trace('这是一个比5大的数');
  9. }

  10. if(a>50)
  11. {
  12. trace('这是一个比50大的数');
  13. }

复制代码


想好了的话,可以回复本帖,看看你想的记过对不对:)

游客,如果您要查看本帖隐藏内容请回复


是不是挺简单的。另外不知道你是否发现,你所编写的程序是如何运行的?对,从上到下。一般情况下,程序会自顶向下去运行。就如同飞流直下的瀑布。那么判断相当于什么呢?判断语句就如同瀑布流动过程中的石头。当瀑布的水碰到石头后会如何?是的,会被分开向左右两个不同的方向流去。这也就决定了程序不同的运行结果。

或许你会问,我们现在所编写的代码,只是做到了如果符合条件,就输出一条语句。也就是说,程序要么执行,要么不执行。好像不太符合上面所说的瀑布的这个比喻。好吧,被你发现了,作为程序员要严谨,那么,我们来完善一下我们的代码,让它尽可能的符合我们这个比喻。



  1. var a:number = 10;
  2. if(a>5)
  3. {
  4. trace('这是一个比5大的数');
  5. }else{
  6. trace('这是一个比5小的数');
  7. }
复制代码


现在,你可以修改a的值。然后运行程序。看看,是不是产生了不同的结果?当你使A的值比5小的时候,就会输出,这是一个比5小的数,而如果A比5大,则会输出,这是一个比5大的数。程序的“流向”因为A的值的不同,走向了不同的方向。

是的,我们通过else进行“否则”的判断。当前面的条件不成立的时候,就会运行else后面,大括号包裹起来的程序块。我们还是用中文来翻译一下:


  1. 如果(这里的条件成立)
  2. {
  3. 那就运行这里的代码
  4. }否则{
  5. 就运行这里的代码
  6. }
复制代码


是不是跟我们所熟悉的自然语言差不多?比如女朋友跟你说,下班回家的时候,如果看到买西瓜的,就买2个。否则买1个冰棍回来。嗯。。。这是一个标准的if...else语句。

让我们通过图形的方法来认识一下条件判断语句,让你在视觉上有一个深刻的印象:


黑色箭头代表程序的运行顺序,自顶向下,如同我们所说的“瀑布”,而条件判断,我们一般用菱形来表示,如同一块会将瀑布分向不同方向的巨石。当A的值大于5的时候,运行顺序偏向一个方向,否则偏向另一个方向。


接下来,我们来写一段更复杂的代码,你可以动动脑筋考虑一下,这个代码会如何去运行呢?



  1. var a:number = 10;
  2. if(a>5)
  3. {
  4. trace('这是一个比5大的数');
  5. }else if(a>3){
  6. trace('这是一个比3大的数');
  7. }else{
  8. trace('这个数比3都小');
  9. }
复制代码


恭喜你,你已经掌握了控制程序流向的秘诀。

循环

认识了条件判断语句后,我们再来认识一下程序控制中另一个非常重要的功能,循环语句。

认真思考下,如果场景里面有10个角色,现在你需要一个群体加血功能,你要怎么写?如果这些角色的名字分别是juese1,juese2,juese3....juese10。你是不是想这么写(以下代码不是程序代码,不可以运行)?


  1. 给juese1加血500
  2. 给juese2加血500
  3. 给juese3加血500
  4. 给juese4加血500
  5. 给juese5加血500
  6. 给juese6加血500
  7. 给juese7加血500
  8. 给juese8加血500
  9. 给juese9加血500
  10. 给juese10加血500
复制代码


好像挺简单是吧,写完以后除了手有点酸,好像也还好。嗯,接下来,场景里有1000个角色,需要写一个群体加血的功能。如果你还想按照上面这种写法来做。估计骂娘的心都有了吧。“这特么不是人干的活”。嗯,对,所以我们才有了循环语句。仔细思考以下上面的功能,实际上,我们对每个角色的操作都是一样的,只是加了500的血而已。不同的是针对不同的角色来进行了操作。所以,只要我们做好编号,依次运行就可以了。先用中文来表达下我们的想法:


  1. 现在的编号是1
  2. 给编号是1的角色加血
  3. 编号加1(变成了2)
  4. 如果编号大于10,结束程序,否则跳转到第一行重新运行
复制代码


以上语句仅仅帮助各位理解循环的运行原理,可能并没有那么严谨。我们来看以下:

当程序的瀑布流流下来的时候,编号是1,于是我们给编号为1的角色加血,之后给编号加1,这时编号变成了2,我们会做一个判断,如果编号大于10,就结束程序,否则跳转到第一行继续运行。很显然,2是不会大于10的,于是又回到第一行,

这次编号是2,于是我们给编号是2的角色加血,之后给编号加1,编号成了3,继续做判断,依次循环……

直到编号变成11,程序结束。

也就是说,如果我们要变成给10000个角色加血,也只要在判断的位置修改下,把10改成1000就可以了,其他代码完全不需要修改,是不是很爽。

那么,我们用正正经经的程序来实现下这个功能:


  1. for(var i:number = 1;i<=10;i++)
  2. {
  3.      trace("给juese"+i+'加血500');
  4. }
复制代码


你是不是觉得,我去,这比中文写的字少多啦!嗯。。所以程序员其实是很懒的。。

这个语句包括了以下几个重要的部分:

1.for
2.var i:number = 1;
3.i<=10;
4.大括号里面包裹起来的代码
5.i++

for关键字和后面的小括号,声明了这是一个循环语句。
我们定义了一个变量i,并且初始值是1
i是不是小于或者等于10
大括号里包裹起来的代码运行
让i增加1。

这里要特别说明的,是i++这句代码。你可以把它理解成程序员偷懒的写法,等同于i=i+1,把i的值增加1,然后在赋给i。你是不是也觉得i++敲的字母要少多了。

实际上,程序的运行顺序也是按照我们上面的这个过程来运行的:

首先,我们告诉计算机,接下来我要做一个循环运行。并且定义了一个值为1的变量,紧接着,就会判断i是不是小于或者等于10,如果是的,就会运行大括号里的代码,否则就结束循环。大括号里的代码运行完以后,就会运行i++,让i的值增加1。然后回到i<=10这里判断

是的在上面这些语句中,for只会运行一次,var i:number=1只会运行一次,接下来,程序会在第3部分(这里的第三部分是指我们上面列出来的5个重要部分中的第三个)到第5部分之间循环运行。想象一下下面这张图





程序的“瀑布”流过来,首先运行了var i:number=1,然后我们挖了一个坑,坑里面是我们在大括号里的代码。并且给这个坑设定了一个条件,当i<=10的时候,不允许程序流出这个坑(换句话说,这个坑还没填满),随着坑里的代码运行一次,i的值会变大(坑里的水越来越多)。当坑里的水太多的时候,就流出这个坑,继续向前运行了。


这就是循环语句的运行方式。你可以试着在自己的代码里来编写一下,并作出不同的修改。

学会了条件控制和循环控制,你已经变成一个准程序员啦。下一次,我们会接触一些更好玩的东西。一起期待把

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

22

主题

36

帖子

237

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
237
楼主 2018-8-22 16:25:17 显示全部楼层
第三篇上线
回复

使用道具 举报

0

主题

1

帖子

18

积分

新手上路

Rank: 1

积分
18
2018-9-11 23:28:22 显示全部楼层
想要跟的楼主学习
回复

使用道具 举报

22

主题

36

帖子

237

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
237
楼主 2018-9-12 08:27:51 显示全部楼层
ryanlll3 发表于 2018-9-11 23:28
想要跟的楼主学习

基础知识部分已完结。游戏实战制作视频教程正在更新中
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则