随着HTML5标准最终敲定，HTML5将有望成为游戏开发领域的的热门平台。HTML5游戏能够运行于包括iPhone系列和iPad系列在内的计算机、智能手机以及平板电脑上，是目

随着HTML5标准最终敲定，HTML5将有望成为游戏开发领域的的热门平台。HTML5游戏能够运行于包括iPhone系列和iPad系列在内的计算机、智能手机以及平板电脑上，是目前跨平台应用开发的最佳实施方案。本文系根据[HML5 Canvas游戏开发实战]一书中的内容整理而成，是了解和学习HTML5游戏开发的基础内容，希望能够帮助到那些和博主一样致力于游戏开发的朋友们！

JavaScript中的面向对象编程

对于游戏开发来说，面向对象编程(OOP)是一种重要而且必要的方法，所以在了解HTML5游戏开发前，首先应该了解JavaScript中的面向对象编程。JavaScript是一种基于对象的语言，可它并不是一种真正的面向对象的编程语言，因为在JavaScript的语法中不存在类(Class)的概念。下面我们将分析和解决在JavaScript中实现封装、继承等面向对象的问题。

在JavaScript中函数(function)就是就是一个类(class) {} //实例化一个对象 var cls1 = new MyClass(); 使用this关键字就可以为类增加属性 { this.name = name; this.age = age; }; //实例化一个对象 var cls1 = new MyClass("张三",20) //输出cls1的两个属性值 alert("name=" + cls1.name + "&" + cls1.age) 使用prototype属性可以为类添加方法 { this.name = name; this.age = age; }; //为MyClass增加方法 MyClass.prototype= { toString:function() { alert("name=" + this.name + "&" + this.age) }, getName:function() { alert("name=" + this.name) }, getAge:function() { alert("age=" + this.age) } }; 使用apply方法实现属性和方法的继承 { this.type="人" }; //为父类定义一个方法 People.prototype= { getType:function() { alert("type=" + this.type) } }; { //继承父类的属性type People.apply(this,arguments); this.name = name; this.age = age; this.sex = sex; }; //声明一个Student实例 var stu = new Student("张三",20,"男")； //输出type alert(stu.type) { //继承父类的属性type People.apply(this,arguments); //继承父类的方法，略显抽象 var prop; for(prop in People.prototype) { var proto = this.constructor.prototype; if(!proto[prop]) { proto[prop] = People.prototype[prop]; } proto[prop]["super"] = People.prototype; } //属性定义 this.name = name; this.age = age; this.sex = sex; }; //实例化Student对象 var stu = new Student("张三",20,"男"); stu.getType(); 静态类的实现 { staticClass.name = "张三"; staticClass.toString=function { alert("name=" + staticClass.name ) }; }; alert(staticClass.name); staticClass.toString(); Canvas绘图基础

HTML5提供了图像、视频、音频、表单、位置、本地数据库、离线存储、websocket等各种全新的特性，对于HTML游戏开发而言，我们主要关注图像、音频、本地数据库以及websocket等，首先我们来了解下Canavs绘图的基础内容。

Canvas是HTML5为我们提供的一张画布，可以让我们在HTML上直接绘制图形，因此Canvas可以作为HTML5游戏开发的基本元素，即HTML5游戏引擎的底层都是以Canvas元素来驱动的。Canvas本身没有绘图的能力，需要借助于JavaScript来实现绘图的功能。使用Canvas元素只需要在网页中添加canvas标记即可，如

=>

接下来我们通过JavaScript来获取这个Canvas并通过相关API实现绘图环境的初始化

//获取Canvas元素 var canvas = document.getElementById('myCanvas'); //检查canvas合法性 if(canvas && canvas.getContext) { //获取当前上下文 var ctx = canvas.getContext('2d') }

因为目前Canvas只支持2D绘图，因此，这里的参数暂时只能为2d。因为Cnavas绘图的API都封装在ctx这个实例中，因此下面的所有操作都是基于ctx来实现的：

使用Canvas绘制线 //设置线宽 ctx.lineWidth = 10; //设置画笔颜色 ctx.strokeStyle = "red"; //创建一个路径 ctx.beginPath(); //路径起点 ctx.moveTo(10,10); //路径终点 ctx.lineTo(150,50); //绘制路径 ctx.stroke(); 使用Cnavas绘制矩形 //设置线宽 ctx.lineWidth=5; //设置画笔颜色 ctx.strokeStyle-"red" //创建路径 ctx.beginPath(); //绘制矩形 ctx.strokeRect(10,10,70,40);

或者

//定义矩形 ctx.rect(10,10,70,40); //绘制矩形 ctx.stroke();