• <acronym id="2ng7a"><wbr id="2ng7a"><meter id="2ng7a"></meter></wbr></acronym>
      1. <nav id="2ng7a"></nav>

         找回密码
         立即注册

        QQ登录

        只需一步,快速开始

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

        9
        回复
        3201
        查看
        打印 上一主题 下一主题
        [ 复制链接 ]

        26

        主题

        45

        帖子

        341

        积分

        管理员

        Rank: 9Rank: 9Rank: 9

        积分
        341
        在前面两篇基础知识教程中,我们先后了解了变量、函数以及变量的作用域。本篇教程中,我们一起来了解关于程序的逻辑判断和循?#20998;?#34892;的相关问题。

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

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

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


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

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

        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. }
        复制代码


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

        接下来,我?#21069;?#23436;成的代码贴下?#30784;?#20320;可以考虑一下,如果这段代码运行起来,你能看到的输出结果是什么呢?



        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. }

        复制代码


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

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


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

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



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


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

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


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


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

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


        黑色箭?#21453;?#34920;程序的运行顺序,自顶向下,如同我们所说的“瀑布”,而条件判断,我们一般用菱形来表示,如同一块会将瀑布分向不同方向的巨石。当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
        复制代码


        好像挺简单?#21069;桑?#20889;完以后除了手有点酸,好像?#19981;?#22909;。嗯,接下来,场景里有1000个角色,需要写一个群体加血的功能。如果你还想按照上面这?#20013;?#27861;来做。估计骂娘的心都有了吧。“这特么不是人干的活”。嗯,对,所以我们才有?#25628;?#29615;语句。仔细思考以下上面的功能,?#23548;?#19978;,我们对每个角色的操作都是一样的,只是加了500的血而?#36873;?#19981;同的是针对不同的角色来进行了操作。所以,只要我们做好编号,?#26469;?#36816;行就可以了。先用中文来表达下我们的想法:


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


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

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

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

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

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

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


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


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

        这个语句包括了以?#24405;?#20010;重要的部分:

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

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

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

        ?#23548;?#19978;,程序的运行顺序也?#21069;?#29031;我们上面的这个过程来运行的:

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

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





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


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

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

        使用道具 举报

        26

        主题

        45

        帖子

        341

        积分

        管理员

        Rank: 9Rank: 9Rank: 9

        积分
        341
        沙发
        楼主 2018-8-22 16:25:17 只看该作者
        第三篇上线
        回复

        使用道具 举报

        0

        主题

        1

        帖子

        18

        积分

        新手上路

        Rank: 1

        积分
        18
        板凳
        2018-9-11 23:28:22 只看该作者
        想要跟的楼主学习
        回复

        使用道具 举报

        26

        主题

        45

        帖子

        341

        积分

        管理员

        Rank: 9Rank: 9Rank: 9

        积分
        341
        地板
        楼主 2018-9-12 08:27:51 只看该作者
        ryanlll3 发表于 2018-9-11 23:28
        想要跟的楼主学习

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

        使用道具 举报

        0

        主题

        4

        帖子

        12

        积分

        新手上路

        Rank: 1

        积分
        12
        5#
        2018-11-23 14:03:20 只看该作者
        学习一下
        回复

        使用道具 举报

        26

        主题

        45

        帖子

        341

        积分

        管理员

        Rank: 9Rank: 9Rank: 9

        积分
        341
        6#
        楼主 2018-11-23 16:19:33 只看该作者

        有问题欢迎回复,另外后续的视频教程已经上线,请查看置顶帖:)
        回复

        使用道具 举报

        0

        主题

        1

        帖子

        4

        积分

        新手上路

        Rank: 1

        积分
        4
        7#
        2018-12-18 15:09:58 只看该作者
        不错不错!!!!
        回复

        使用道具 举报

        0

        主题

        1

        帖子

        6

        积分

        新手上路

        Rank: 1

        积分
        6
        8#
        2019-1-3 22:12:42 只看该作者
        谢谢楼主分享
        回复

        使用道具 举报

        0

        主题

        1

        帖子

        4

        积分

        新手上路

        Rank: 1

        积分
        4
        9#
        2019-2-24 20:35:53 只看该作者
        谢谢分享
        回复

        使用道具 举报

        0

        主题

        2

        帖子

        1

        积分

        新手上路

        Rank: 1

        积分
        1
        10#
        2019-3-6 11:54:20 只看该作者
        谢谢分享                                                                        
        回复

        使用道具 举报

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

        本版积分规则

        特码生肖图2018
      2. <acronym id="2ng7a"><wbr id="2ng7a"><meter id="2ng7a"></meter></wbr></acronym>
          1. <nav id="2ng7a"></nav>

          2. <acronym id="2ng7a"><wbr id="2ng7a"><meter id="2ng7a"></meter></wbr></acronym>
              1. <nav id="2ng7a"></nav>