查看: 8523|回复: 70
收起左侧

[图文教程] 参考日英资料自翻原创/Html5游戏开发秘诀 SLG战棋游戏制作

[复制链接]

[图文教程] 参考日英资料自翻原创/Html5游戏开发秘诀 SLG战棋游戏制作[复制链接]

hirocon 发表于 2017-12-30 20:08:10 [显示全部楼层] |只看大图 回帖奖励 |倒序浏览 |阅读模式 回复:  70 浏览:  8523
翻译,制作:hirocon(小希) 合作咨询:ageofgame@163.com
本文为作者参考了日语书籍和英语书籍后,自研+翻译的一篇帖子文章。最近发现有不法分子在未经过作者同意的情况下,将本免费教程发布于某宝兜售。小希在此再次重申,本教程全程免费。

书籍译名:Html5游戏开发秘诀 SLG战棋游戏制作
为保护本书著权,在此不公示实际书名和书封面图片。
本帖仅供学习使用,请勿复制内容作商业用途!外文书价格不菲,加上国家运费每本要300多,希望读者且读且珍惜。

译者序:hirocon,笔名小希。hiro取自W高达里的主角希罗,同时也取自PS游戏舞王(bust-a-move)中的2P角色hirocon,是个自信阳光的青年。从业已有8年,计算机软件专业科班出生。研究u3d已有3年,先后在多家大型游戏公司任全职兼职翻译及内容编辑工作。课余时间,也一直在实践学习游戏3D美术,最喜欢的游戏角色就是高达等酷炫机体机甲,所以此次翻译的书籍都将会围绕硬派机体对战展开。本书是小希翻译的五部曲的第一部,之后还会为读者奉献战棋游戏开发,冒险游戏开发,UE4开发和特效制作研发。敬请期待!

为了保护版权,本次不提供素材,但是会详细地把行行代码都解释清楚。


案例最后完成图:100%能让读者做到如图效果

参考日英资料自翻原创/Html5游戏开发秘诀 SLG战棋游戏制作

参考日英资料自翻原创/Html5游戏开发秘诀 SLG战棋游戏制作


评分

参与人数 3泰斗币 +31 收起 理由
泰课_robin + 10 为您的才华点赞
doufans + 1 感谢分享
admin + 20 很给力!

查看全部评分

相关推荐
+1
8586°C
70
  • hirocon
  • hirocon
  • admin
  • jhszs
  • hirocon
过: 他们
因分享而快乐,学习以自强!
hirocon
 楼主|
发表于 2017-12-30 20:29:12 显示全部楼层
P038——
(基础内容从第38页开始)
第一次用JavaScript编写代码,写一句“你好,世界(Hello World)”

在程序员的世界里,在一开始学某种新语言,或者使用新框架前,都会让程序运行一句“Hello World”。这可以说成为了程序教学的传统。在此,笔者就给大家演示下如何用JavaScript代码让程序在页面上输出“Hello World”。
既然要写JavaScript代码,我们需要选择合适的浏览器。笔者推荐使用Chrome浏览器,因为它带有Debug工具。我们就用它来开刀。当然有读者用的是Mac系统,那么打开Chrome的Debug工具的方式应该是同时按下快捷键“Command”+“Option”+“i”键。一般读者用Windows系统,按F12键,或者同时按下快捷键“Ctrl”+“Shift”+“i”键。打开Debug工具后,我们选择最右边的那个选项卡——“控制台(Console)”。

038-1.jpg
选项卡下面紧连的一行一行的是可以输入JavaScript代码的命令行(Command Line),或者也可以叫命令提示行(Command Prompt)。

一开始,我们先试着弹出一个写有“Hello World”的对话框吧。在命令行中拷贝下面的代码。然后按“回车(enter)键”。

alert("Hello World!");

按下“回车键”后,弹出下页上的对话框。

因分享而快乐,学习以自强!
hirocon
 楼主|
发表于 2017-12-30 20:30:01 显示全部楼层
039——

039-1.jpg

接下来我们试试不要弹出对话框,而是直接在控制台上输出“Hello World”。这样做是因为在实际开发中或者确认代码有没有问题时,我们经常会将数据显示到控制台上。

console.log("Hello World!");

039-2.jpg
039-3.jpg

因分享而快乐,学习以自强!
admin 发表于 2017-12-31 01:11:26 显示全部楼层
值得鼓励哦
因分享而快乐,学习以自强!
jhszs 发表于 2017-12-31 01:48:44 显示全部楼层
一次把内容发出,要不看的眼睛蛋疼
因分享而快乐,学习以自强!
hirocon
 楼主|
发表于 2017-12-31 10:15:47 显示全部楼层
040——
在命令行上输入JavaScript代码的时候,每次写完执行的时候,先前的代码就要重新输一遍,非常地不方便。此外,代码也没办法得到配置。所以这次,我们将JavaScript代码保存在一个文件当中。最简单的方法就是把JavaScript代码保存在后缀名为HTML的文件当中。为了能让代码执行,我们需要给代码段加一个<script>标签。

<html>
        <head>
                <script>
                        alert("Hello World!");
                </script>
        </head>
</html>

将上面的这段代码保存在HTML文件当中,比方说保存的文件名叫hello.html(只要后缀名是html结尾起什么名字都可以)。然后双击这个文件,就会打开chrome浏览器(需要设置默认浏览器是chrome),这样也能得到我们想要的弹窗输出语句的效果。

040-1.jpg
这里需要说明一下的是,代码一定要在<script>和</script>标签之内。但是,随着游戏运行的时间变长,参数的变更,我们不可能将代码写在一个静态文件里,让所有玩家共享数据。所以,我们淘汰了HTML中写代码的方式,而是采用在别的、不是HTML后缀名的文件中写代码,但也要让它能够适应HTML网页环境,这里我们推荐在后缀名为js的文件中写代码。例如,将代码写在一个名为myScript.js的文件中就是一个不错的选择。我们可以在myScript.js文件中只写一行。

alert("Hello World!");

因分享而快乐,学习以自强!
hirocon
 楼主|
发表于 2017-12-31 10:16:30 显示全部楼层
041——
js文件中代码写完后,我们再创建一个html后缀名的文件,然后在该文件的<head>和</head>标签中加入一句引用js文件的代码即可达成目的。需要注意:js文件和html文件应该放在同一个文件夹中。

<html>
        <head>
                <script src="myScript.js"></script>
        </head>
</html>

运行后发现效果和直接写代码在html中一模一样。
本文采用的是enchant.js,它也是一个比较庞大的文件,大部分代码都写在这一个文件当中。接下来我们会围绕enchant.js文件展开游戏制作,因此,上面的这种html导入js文件的写法就很有用。
本书并不是一本JavaScript的入门书籍,不会展开详细地介绍JavaScript。但在以后,如果用到了和游戏开发相关的函数,会花篇幅对这些函数的作用进行说明。

console.log
前面我们已经实现了用两种方法输出Hello World!这句话,其中第二种方法(console.log)是在Debug工具的Console面板上,以命令行的形式输出。在游戏实际运行时,通过这种方法在Debug工具中检验自己的代码有没有问题,是很不错的方案。这里再介绍几种console.log的适用规范。注意首字母c不要大写。

输出文字:
console.log("Hello World!");
输出Hello World!

输出数字:
console.log(7);
输出7
输出队列(队列会在后文中介绍):
console.log([1,2,3,4,5]);
输出[1, 2, 3, 4, 5]
输出物体(物体会在后文中介绍):
console.log({hp:100,mp:50});
输出Object {hp: 100, mp: 50}
因分享而快乐,学习以自强!
hirocon
 楼主|
发表于 2017-12-31 10:17:28 显示全部楼层
P42——
042-1.jpg
用console.log输出语句时,多个输出的参数写在一行里也是可以的。
console.log("Hello World!",7,[1,2,3,4,5],{hp:100,mp:50});
输出Hello World! 7 [1, 2, 3, 4, 5] Object {hp: 100, mp: 50}

变量(var,variable):
变量其实就相当于是一个带名字的箱子。箱子中装着计算结果或是玩家输入的内容,但是这个值并不固定,会随着计算结果或输入内容不同而发生改变。

var hoge="Hello World!";
右边引号内容为变量名。引号内的内容Hello World!会传递给左边的变量hoge。
console.log(hoge);
在控制台上显示出变量hoge的内容。和console.log("Hello World!")一个意思。

综上所述:变量的概念就是右边的数据内容作为变量内容传递给左边的变量名为hoge的变量。

因分享而快乐,学习以自强!
hirocon
 楼主|
发表于 2017-12-31 10:49:17 显示全部楼层
P043——
这里使用的“=(等号)”可不是数学里面“相等”的意思,在JavaScript里面它的作用是将右侧,也就是后面的数据传递给前面的变量,也就是“赋予”的意思。
比方说这个变量hoge如果要加3,正确的写法应该是hoge = hoge + 3。前一个hoge是加3后的变量值,后一个hoge是加3前的变量值。这里的“+(加号)”,也就是对变量等数值进行操作的记号,被称为代入演算符。
顺便要说一下的是,我们还可以改写成其它的代入演算符,利用写成“+=”这种,即hoge+=3,变量经常会遇到自身加减乘除的情况,这样写会更加简洁。

表5-1 代入演算符(一部分)
记号 意思 使用范例
+= 加号代入 a+=b(等同于a=a+b)
-= 减号代入 a-=b(等同于a=a-b)
*= 乘号代入 a*=b(等同于a=a*b)
/= 除号代入 a/=b(等同于a=a/b)
%= 除余代入 a%=b(等同于a=a%b)

另外,如果想要数值让递增,也就是加1。那么可以写成hoge++或者++hoge的样子。不管哪种写法都能加1。相反地如果要减1,那么可以写成hoge--或者--hoge的样子。虽然大部分情况下,++或--写在前面和++或--写在后面意思相同。但是还是存在某些特殊情况。
比方说,hoge=5的时候,fuga=hoge++就能让fuga变成6,而hoge则保持原先不变还是5。这是因为将hoge的值加1后赋予给fuga,但是由于++号写在hoge后面,所以不会使hoge的值发生改变。但如果++写在hoge前面,也就是fuga=++hoge,那么对不起,fuga和hoge的值都会变成6。这是因为hoge的值加1先赋予给hoge,然后再把这个加1后的hoge赋予给fuga。虽然有些绕口,但实际使用时经常会遇到这两种情况,还请读者能够记住。

函数(function)
游戏代码一般都写得很长,经常会重复多次对代码中的内容进行处理。这种对内容的处理简单来说就叫作函数。在前面我们用到的console.log也好,alert也好,就都是JavaScript的函数。
一个函数又分为输入和输出两种。函数中输入数值叫传递参数,函数中输出数值叫返回值。在函数中传入传递参数,然后经过计算处理,返回一个返回值。我们不必关心当中是如何进行处理的。只需关心传递参数和返回值即可。这些系统规定好的函数,就交给程序自己运行即可。

因分享而快乐,学习以自强!
泰课_robin 发表于 2017-12-31 11:10:46 显示全部楼层
辛苦辛苦鼓励鼓励
来自苹果客户端来自苹果客户端
因分享而快乐,学习以自强!
hirocon
 楼主|
发表于 2017-12-31 18:50:55 显示全部楼层
044——

传递参数1、传递参数2等->传入入口(变量)之中->函数处理->出口(由return返回)->数据结果
注释:下文中和这里出现的->都不是代码演算符,只是一个标识符。为了叙述方便,不是代码。

function baiNiSuru(nyuryoku){
新建一个将传入参数变成2倍(翻倍)的函数
        var syuturyoku = nyuryoku * 2;
        return syuturyoku;
return表示函数的输出值。将return后的这个变量作为返回值进行返回
}

函数制作好了,那么应该怎么使用呢?方法如下:
var hoge = baiNiSuru(5);
将5这个数值变成2倍,把变成2倍后的新数值赋予hoge变量
console.log(hoge); //10
输出10
var hogeNoBai = baiNiSuru(hoge);
再次将hoge的新数值10变成2倍,但这次不赋予hoge变量,而是赋予新变量hogeNoBai
console.log(hoge,hogeNoBai); //10,20
输出10 20

JavaScript书写时的规则:
命名规则:
变量和函数的名字必须是字母(大小写皆可)、或者$、抑或_(下划线)作为第一个起始字母。虽然名字中除起始字母外含有数字也没多大问题,但是起始字母一定不能带数字。另外,特殊字符(如!"#%&'?><等)也都是不能在变量和函数中使用的。而且要区分大小写,即如果在代码中同时含有hoge,Hoge两个变量或函数,那它们代表的意义是不同的,程序将作为两个独立的变量或函数进行使用。

因分享而快乐,学习以自强!
hirocon
 楼主|
发表于 2017-12-31 19:13:46 显示全部楼层
045——
hoge ->OK
Hoge ->OK(从书写习惯上来说,在写类名的时候,第一个文字最好是大写)
hoGE ->OK
hoge2 ->OK
_hoge ->OK
$hoge ->OK
hoge! ->NG
2hoge ->NG
ho#ge ->NG

;(分号):
从笔者让大家写第一个程序开始,分号其实就存在于程序中,在一句代码处理结束时最后添上一个“;”(分号)来代表句子的结尾。它的作用很像中文里的句号“。”。

var hoge = 5;
分号代表结束

小贴士:
用分号作为句子结尾,在代码世界中使用分号的情况很多(比方说C语言、C++、C#、Java等等)。但是,在JavaScript里即便不加分号,代码也能顺畅处理。这是因为JavaScript没有强制规定。我们希望程序员作为一种习惯,还是加上这个分号为好。相反地如果作为文章分隔符来说,用的话又有麻烦之嫌。所以也有部分程序员不喜欢加分号。最简单的例子,就是服务端使用JavaScript的时候(会有一个文件叫Node.js)等,它里面就每行都用分号“;”来结尾,这对于部分程序员来说很是不便,他们觉得这是多此一举。考虑到喜欢用分号来结尾的读者更多一些,这里我们就每行都加分号了。如果您不喜欢加分号,也望谅解。

总之,这只是一种编写代码的风格,大家都适应了就没问题。

因分享而快乐,学习以自强!
hirocon
 楼主|
发表于 2017-12-31 19:27:03 显示全部楼层
046——
注释:
程序基本上作用就是对电脑发出指令,虽然话是这么说,但代码也是相对要给人看的,为了快速找出代码哪里还需要改善,或是为了让共同协作的程序员能够快速读懂您写的代码,写点注释是有百利而无一害的(顺带一提,这个共同协作的程序员很可能是几个月后的自己)。总之,代码看不明白,或者一时忘记的话写注释是个很好的习惯。对于电脑来说,会完全无视你写的注释,不会受其影响。所以不用担心注释加长了代码,导致程序执行效率慢等问题。

短注释:
只有一行的注释被称为短注释。这种注释在JavaScript中,要在注释的内容前加“//”,这是为了区分代码和注释,这样程序只运行代码,不会运行你的注释。也就是说,//右边写的内容程序运行时将完全无视。

//这行不会随程序运行而执行
var hoge = 5; //这部分内容不会随程序运行而执行
console.log(hoge); //笔记:hoge的输出值为5。

长注释:
以“/*”开始,以“*/”作为结束。夹杂在其中的内容部分不管你换多少行,程序都不会执行。

/* 这里是注释。
这里也是注释。
这里是注释的最后一行,到此结束。*/

虽然用上面的方法可以一口气对多行作注释,但由于不好区分等原因,实际写代码时我们常常用下面的方法来写长注释。

/**
* 这里是注释。
* 这里也是注释。
* 这里是注释的最后一行,到此结束。下面的那两个符号可写在本行结尾。
*/


因分享而快乐,学习以自强!
hirocon
 楼主|
发表于 2017-12-31 19:41:30 显示全部楼层
047——
"*"(星号)可以写很多行,一行里也可以写很多个。但是即便不写“*”,机器也会全都把这些行认作是长注释。尽管星号没有实际用处,但是写注释的是人不是电脑,为了便于程序员区分,加星号是个不错的方案。

放入注释:
如果读者一时间不知道问题出在哪一行,想停止代码执行,我们可以用放入注释来方便测试等操作。比方下面的代码初始时是这样的。

var hoge = 5;
console.log(hoge);

如果不想让它输出,我们可以把输出函数放入注释。

var hoge = 5;
//console.log(hoge);

Debug或是测试的时候,会经常用到这种放入注释。

代码块:
前面虽然我们已经介绍了函数的写法,但在JavaScript中,函数体内一般不会只写一行,而是很多行凑在一起组成一个函数的方法,规范地写出的函数体,需要先打上一对大括号,然后在大括号里书写代码,那便是所谓的代码块。

function doHoge(x){
        var y = (x+4)*2;
        return y;
}

之后我们再说明如何书写控制语句的时候基本上都会用到代码块。如果代码块中只有一行代码,那么不加大括号也没事。因此,就有些程序员会以为一行代码就不需要那么麻烦,再用什么代码块了,

因分享而快乐,学习以自强!
hirocon
 楼主|
发表于 2017-12-31 19:56:44 显示全部楼层
048——
其实这种想法是很危险的。特别是当你协同多名程序员一起写程序时,如果要给这行代码追加功能,增添几行代码,那么别人稍不注意,不加上代码块的符号“{}”,在程序运行时就会出问题。为了避免这种麻烦发生,建议在写函数方法时,即便一行代码也要用代码块的形式表现。

JavaScript的型:
变量都有一个型。这个型表示数据的种类,比如数字在计算的时候就会采用数值型的变量,在输出文字的时候就会采用字符或字符串型的变量。举个简单的例子,如果变量都是数值型的,那么1+1得出的结果就是2。如果变量都是字符型的,那么“1”+“1”得出的结果就是“11”(字符串同样地,是将两个字符串变量首尾相接。)。在JavaScript中,字符串和单字符之间没有严密的区分,加双引号和单引号都能输出一长串文字。

字符/字符串类型(String):
字符串类型的变量,在定义变量时,需要用“"”或“'”来囊括数据内容。如下所示:

var charaName = "キャプテン";
双引号“"”包括日语“船长”二字。
var charaName = 'キャプテン';
单引号“'”包括日语“船长”二字。

如果在字符串中还要使用引号来标注特殊内容,那么格式如下,记得千万不要字符串外用双引号囊括,字符串内的特殊内容处也用双引号标注,这样会报错。页记得千万不要字符串外用单引号囊括,字符串内的特殊内容处也用单引号标注,这样也会报错。

var answer = "It's ok";
双引号囊括的字符串中只能出现单引号,不能再出现双引号。

var answer = "He is called '太郎'";
双引号囊括的字符串中只能出现单引号,不能再出现双引号。
var answer = 'He is called "太郎"';
单引号囊括的字符串中只能出现单引号,不能再出现单引号。


因分享而快乐,学习以自强!
12345下一页
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

VR/AR版块|Unity3d|Unreal4|新手报道|小黑屋|站点地图|沪ICP备14023207号-9|【泰斗社区】-专注互联网游戏和应用的开发者平台 ( 沪ICP备14023207号-9 )|网站地图

© 2001-2013 Comsenz Inc.  Powered by Discuz! X3.4

1
QQ