html5游戏开发实践（网页游戏开发基础）

敗傢籽 2022-11-15 03:27:53

　　对于初学编程的朋友来说，这篇文章有点长，而且会有点难懂。但是请不要放弃，我尽量以通俗的语言解释相关的编程概念，这里只讲解编写一个游戏需要的相关编程概念（如需要会在后面的文章中随时补充相关概念），对其余未涉及的编程概念大家可以自行搜索学习。本文都是简单的编程概念，请耐心看完，如有疑问欢迎与我交流。本人水平有限，如有错误欢迎指正。

　　正如有人的地方就有江湖，有浏览器的地方就有JavaScript。那么什么是JavaScript呢？JavaScript 是世界上最流行的脚本语言，它适用于PC、笔记本电脑、平板电脑和手机。JavaScript 是一种轻量级的编程语言，JavaScript 是可插入HTML 页面的代码，JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行，JavaScript 很容易学习，没有想象中的那么复杂。

　　一、如何在网页中添加JavaScript代码

　　HTML 中的脚本必须位于<script>与</script>标签之间，有两种方式，第一种方式，在<script>与</script>标签之间直接添加JavaScript代码，例如：<script type="text/javascript">alert("Hello World!");</script>，打开含有上述代码的网页将显示一个对话框（alert是一个函数，作用是弹出一个含有信息的对话框），如下图所示：

html5游戏开发实践（网页游戏开发基础）(1)

　　第二种方式是把JavaScript脚本保存到外部文件中，这样代码可以被多个网页使用。外部 JavaScript 文件的文件扩展名是js。如以外部文件方式引用JavaScript，需要在<script>标签的 "src" 属性中设置该.js文件位置及名称，　例如：

　　<html>

　　</body>

　　</html>

　　first.js文件代码如下：

　　function main(){

　　　　alert("Hello World!");

　　}

　　打开这个网页，显示的结果与上图一致。其中<body>标签中的onload="main()"表示网页加载完毕后调用main()函数（后面会介绍什么是函数）。

　　二、JavaScript变量

　　变量用来存储值或计算结果，JavaScript使用关键字var来定义变量，使用等号来为变量赋值，例如：

　　var x, length;

　　x = 5;

　　length = 6;

　　执行以上语句后，变量x的值为5，变量length的值为6。（提示：为保持代码可读性建议每行以;结尾，每行开头适当添加空格缩进）

　　变量名约定：JavaScript变量名必须以字母、下划线_或美元符$开头，后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便 JavaScript 可以轻易区分开标识符和数字），注意：变量名区分大小写。

　　注意：JavaScript变量名不能是保留字（详细的保留字请自行搜索），否则会出现语法错误提示，如下图：

html5游戏开发实践（网页游戏开发基础）(2)

　　三、注释

　　为了增强代码的可读性，可以对相应代码进行注释，有两种方式，第一种：多行注释，以"/*"开头，然后增加注释文字，最后以"*/"结尾，例如：

html5游戏开发实践（网页游戏开发基础）(3)

　　第二种：单行注释，以"//"开头，只能添加一行注释文字，例如：

html5游戏开发实践（网页游戏开发基础）(4)

　　四、数据类型

　　JavaScript 有多种数据类型：数字，字符串，数组，对象等等，例如：

html5游戏开发实践（网页游戏开发基础）(5)

　　其中数字、字符串类型较简单，数组、对象类型较复杂，下面再简单说说数组和对象类型。

　　1、数组

　　JavaScript 数组（Array）是有序数据的集合，数组中的每个成员被称为元素（Element），每个元素的名称（键）被称为数组下标（Index），注意：下标从0开始。JavaScript 常用的定义（创建或者声明）数组方法有两种：构造数组和数组直接量。

html5游戏开发实践（网页游戏开发基础）(6)

　　a4[2]表示访问a4数组的第三个元素（下标从0开始），即3。

　　数组的元素可以为数字、字符串、对象，还可以是数组，元素为数组的数组称为多维数组，下面是一个二维数组（可以把它想像成一个9行8列的表格）

html5游戏开发实践（网页游戏开发基础）(7)

　　如何定义这个数组呢？分两步来定义，首先定义一个数组（有9个元素）：

　　var a=new Array(9);

　　然后将这个数组的元素依次定义成一个数组

　　a[0]=new Array(8);

　　a[1]=new Array(8);

　　……

　　a[8]=new Array(8);

　　即，先将数组的行定义出来，再定义每一行中的元素。现在要访问数组a的元素的话需要两个坐标——行、列坐标，例如：访问第5行第4列的元素，a[4][3]

　　2、对象

　　对象可以存储复杂的数据，那么什么是对象呢？计算机程序设计教材上关于对象的定义比较抽象，用我自己的话来说，就是将客观世界中的事物特征和行为用计算机语言来描述并保存至一个变量中，这个变量就叫对象。以人为例，每个人的特征都不一样（性别、身高、体重……），但都有相同的行为（说话、行走、睡觉……）。常用的对象定义方式有两种：构造对象和直接定义对象，先看看构造对象的方法

html5游戏开发实践（网页游戏开发基础）(8)

　　上面是构造对象的一般方法，即先构造一个Object对象，然后再定义对象的属性（特征），接着定义对象的方法（行为），为遵循面向对象的程序设计方法，一般需要提供访问属性的方法，例如：获取年龄的方法getAge和修改年龄的方法setAge，注意这两个方法中的this表示的是当前对象。将以上代码复制到HTML文件<script></script>标签之间，保存并在浏览器里打开，控制台（chrome浏览器按F12键显示控制台）显示结果如下：

html5游戏开发实践（网页游戏开发基础）(9)

　　下面看看直接定义对象

html5游戏开发实践（网页游戏开发基础）(10)

　　将以上代码复制到HTML文件<script></script>标签之间，保存并在浏览器里打开，显示结果如下：

html5游戏开发实践（网页游戏开发基础）(11)

　　五、运算符

　　JavaScript常用的运算符有算术运算符、比较运算符和逻辑运算符

html5游戏开发实践（网页游戏开发基础）(12)

　　注意自增和自减运算符，如果运算符在变量前面则先执行自增（自减）运算，再将结果赋给x

html5游戏开发实践（网页游戏开发基础）(13)

html5游戏开发实践（网页游戏开发基础）(14)

　　注意：TRUE、FALSE表示真、假，用于条件判断，例如：if语句（见本文后面部分）。运算符的优先级为：算术运算符最高，比较运算符其次，逻辑运算符最低，可以通过小括号改变运算优先级。

　　六、函数

　　为了让代码能重复使用，把实现某一功能的代码写在一段代码块内（以{开头，}结尾），这段代码就叫函数，函数的定义如下：

　　function 函数名(参数1,参数2,……){

　　　实现函数功能的代码

　　　……

　　}

　　举个例子，编写一个实现两个数相加的函数，代码块如下：

html5游戏开发实践（网页游戏开发基础）(15)

　　将以上代码复制到HTML页面中的<script></script>之间，保存并在浏览器中打开，显示结果如下：

html5游戏开发实践（网页游戏开发基础）(16)

　　函数的定义以function开头，后面跟一个空格，然后是函数名，函数名遵循变量的命名方式，函数名后面是括号，括号内是函数的参数，可以没有参数，也可以有多个参数（多个参数之间用逗号隔开），如果需要返回计算结果，使用return语句返回（无需返回结果的话就不需要使用return语句）。

　　七、控制语句

　　1、条件判断

　　顾名思义，条件判断就是判断某一条件是否成立，然后再根据条件结果执行相应代码。常用的条件判断语句为if语句，有三种常用形式：if、if else、if else if else，如下所示：

html5游戏开发实践（网页游戏开发基础）(17)

　　以上代码运行结果如下：

html5游戏开发实践（网页游戏开发基础）(18)

　　2、循环

　　循环就是让一段代码反复执行，直到不满足循环条件而退出，常用的循环结构有三种for循环、while循环和do while循环，先看看for循环

　　for(语句1;语句2;语句3){

　　　反复执行的代码

　　}

　　举个例子：

　　for (var i=0; i<5; i ){

　　　console.log(i);

　　}

　　上面的例子在浏览器控制台显示如下：

　　上面的for循环语句1为var i=0;定义循环初始变量i并赋值0；循环语句2为i<5;是循环运行判断语句，判断当前循环变量i是否小于5；语句3是循环内的代码块执行完后执行的语句，即循环内代码块执行完后i的值加1，循环执行完5次后i的值为5（第1次，i=0），判断i<5时不成立，所以循环不会执行第6次。循环内的代码还可以是另一个循环，从而构成多重循环，以前面那个二维数组为例，看看二重循环的简单应用

html5游戏开发实践（网页游戏开发基础）(19)