HTML5游戏开发技术基础整理

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

JavaScript中的面向对象编程

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

在JavaScript中函数(function)就是就是一个类(class)

//声明一个函数
function MyClass(){}
//实例化一个对象
var cls1 = new MyClass();

使用this关键字就可以为类增加属性

//声明一个类并定义其构造函数
function MyClass(name,age)
{
    this.name = name;
    this.age  = age;
};
//实例化一个对象
var cls1 = new MyClass("张三",20)
//输出cls1的两个属性值
alert("name=" + cls1.name + "&" + cls1.age)

使用prototype属性可以为类添加方法

//声明一个类并定义其构造函数
function MyClass(name,age)
{
    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方法实现属性和方法的继承

//定义一个父类People
function People()
{
    this.type="人"
};
//为父类定义一个方法
People.prototype=
{
    getType:function()
    {
        alert("type=" + this.type)
    }
};

//定义一个子类Student
function Student(name,age,sex)
{
   //继承父类的属性type
   People.apply(this,arguments);
   this.name = name;
   this.age = age;
   this.sex = sex;
};

//声明一个Student实例
var stu = new Student("张三",20,"男")；
//输出type
alert(stu.type)

//下面我们来了解下如何继承父类的方法，继承父类方法主要通过循环使用父对象的prototype进行复制来实现，如
//重新定义子类Student
function Student(name,age,sex)
{
    //继承父类的属性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();

静态类的实现

function staticClass()
{
    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标记即可，如

<canvas id="myCanavs" width="800" height="480"></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();

如果需要对矩形进行填充

//创建路径
ctx.beginPath()
//绘制矩形
ctx.fillRect(10,10,70,40)

使用Canvas绘制圆

//创建路径
ctx.beginPath();
//定义圆
ctx.arc(100,100,50,0,360*Math.PI/180,true);
//绘制圆
ctx.stroke();

同样地，可以使用fill进行填充绘制

//创建路径
ctx.beginPath();
//定义圆
ctx.arc(100,100,50,0,360*Math.PI/180,true);
//绘制圆
ctx.fill();

使用Canvas绘制圆角矩形

绘制圆角矩形需要arcTo函数配合lineTo来完成

//创建路径
ctx.beginPath();
ctx.moveTo(40,20);
ctx.lineTo(100,20);
ctx.arcTo(100,20,120,40,20);
ctx.lineTo(120,70);
ctx.arcTo(120,90,100,90,20);
ctx.lineTo(40,90);
ctx.arcTo(20,90,100,70,20);
ctx.lineTo(20,40);
ctx.arcTo(20,20,40,20,20);
//绘制圆角矩形
ctx.stroke();

使用Canvas绘制复杂图形

在HTML5中可以通过quadraticCurveTo函数绘制二次贝塞尔曲线，通过bezierCurveTo函数绘制三次贝塞尔曲线,具体代码请参考API文档。

使用Canvas绘制文字

//设置字体
ctx.font="30px Arial";
//绘制文字
ctx.strokeText("Hello HTML5",100,50);

使用Canvas绘制图片

绘制图片使用drawImage函数，其函数原型如下：

drawImage(image,dx,dy);

其中image可以是HTML中的标签或者是JavaScript中的Image对象。如

//定义一个img标签
<img id="img_source" src="source.jpg" width="240" height="240"/>

接下来通过getElementById来取得图像数据，并将其绘制出来

var img=document.getElementById("img_source");
ctx.draw(img,200,200);

如果直接使用JavaScript代码

var img=new Image();
img.src="source.jpg";
ctx.draw(img,200,200)

图形的平移操作

使用translate函数实现在水平和垂直方向上的平移

图形的旋转操作

使用rotate函数实现旋转，需要注意的是传入的参数是弧度

图形的伸缩操作

使用scale函数实现伸缩，当参数为负值时表示在该方向上翻转

图形高级特效

这里主要介绍线性渐变、径向渐变、颜色反转、灰度。

线性渐变

//创建一个线性渐变容器
var grd=ctx.createLinearGradient(0,0,200,0);
//添加颜色
grd.addColorStop(0.2,"#00ff00");
grd.addColorStop(0.8,"#ff0000");
//应用渐变
ctx.fillStyle=grd;

径向渐变

//创建一个径向渐变容器
var grd=ctx.createRadialGradient(100,100,10,100,100,50);
//添加颜色
grd.addColorStop(0,"#00ff00");
grd.addColorStop(,"#ff0000");
//应用渐变
ctx.fillStyle=grd;

颜色反转

遍历每个像素并对RGB值进行取反

灰度

灰度计算公式：gary=red*0.3+green*0.59+blue*0.11

基础的内容就是这些了，以后如果碰到需要HTML5的地方可以回过头来看看。

时间： 2024-10-05 04:42:45

HTML5游戏开发技术基础整理的相关文章

html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

开言: 以前lufy前辈写过叫" HTML5游戏开发-零基础开发RPG游戏"的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为视点,为大家讲述如何开发一款简单的游戏.希望大家看了这篇文章,能使你对理解游戏开发有帮助. 你可以先测试一下游戏: http://lufylegend.com/lufylegend_developers/yorhom_Christmas/index.html 1,如何进行游戏开发 1.1游

HTML5游戏开发中基础的Tag讲解

一般在HTML5游戏开发中,基础的Tag都用在标题,段落以及分行上,下面就来讲解下几种最常用的Tag.当然最好用的HTML5学习方式就是跟随示例,今天我们的HTML5游戏开发教程也从实例开始. 首先来看一下标题中的Tag应用.在HTML5游戏开发中,我们用从h1至h6的几个Tag来定义文章的标题,每个正文中的标题都是自成一段的.例如这样: <html>  <head></head>  <body>   <h1>This is a heading&

Html5游戏开发-145行代码完成一个RPG小Demo

lufy前辈写过<[代码艺术]17行代码的贪吃蛇小游戏>一文,忽悠了不少求知的兄弟进去阅读,阅读量当然是相当的大.今天我不仿也搞一个这样的教程,目地不在于忽悠人,而在于帮助他人. 先看demo效果图: 测试URL: http://www.cnblogs.com/yorhom/articles/3157553.html 关注我的blog的人不仿会看到我最近发布了新引擎lufylegendRPG 1.0.0,今天就算来推广一下这个引擎吧.也好让大家见证一下封装的力量. 引擎下载地址:http://

【整理】HTML5游戏开发学习笔记（1）-骰子游戏

<HTML5游戏开发>,该书出版于2011年,似乎有些老,可对于我这样没有开发过游戏的人来说,却比较有吸引力,选择自己感兴趣的方向来学习html5,css3,相信会事半功倍.不过值得注意的是,该书的游戏是些小的游戏,内容相对比较基础,而且html5标准已经正式发布,可能会和书中所描述有少许出处.当然了,书中的小游戏还是比较不错的,适合我这样的前端开发不咋地的来练手,学习方式是在以自己的思路实现之后,再来看书中的实现思路,因为每个人有自己的开发习惯. 1.预备知识在做第一个骰子游戏开发前,必须知

HTML5游戏开发都需要掌握哪些技能？

很多人都会问H5游戏有前途吗?其实我个人是比较看好H5的前景,尤其是在这个移动互联网的时代,Web技术的触角必然会深入到各个领域,包括题主关心的游戏领域. 当然H5目前仍然存在着不少缺点,包括大家所提到的性能较弱.碎片化问题和JS这门语言自身的缺点等等.但这不能抹杀H5自身的魅力,用户到达成本低,这是H5的杀手级优势.基于这个优势, H5前景必然是广阔的,更别提H5开发还有着开发效率高.部署迭代迅速等优势. 而H5也不是一成不变的,如运行效率.碎片化,和JavaScript自身的坑,这些令人困扰

《DirectX 9.0 3D游戏开发编程基础》 第一章 初始化Direct3D 读书笔记

REF设备 参考光栅设备,他能以软件计算方式完全支持Direct3D Api.借助Ref设备,可以在代码中使用那些不为当前硬件所支持的特性,并对这此特性进行测试. D3DDEVTYPE 在程序代码中,HAL设备用值D3DDEVTYPE_HAL来表示.该值是一个枚举变量.REF设备用D3DDEVTYPE_REF来表示.这种类型非常重要,你需要铭记,因为在创建设备的时候,我们必须指定使用哪种设备类型. COM(组件对象模型) 创建COM接口时不可以使用c++关键字new.此外使用完接口,应调用Rel

HTML5游戏开发实战--注意点

1.WebSocket是HTML5标准的一部分,Web页面可以用它来持久连接到socket服务器上.该接口提供了浏览器与服务器之间的事件驱动型连接,这意味着客户端不必再每隔一个时间段就需要向服务器发送一次新的数据请求.当有数据需要更新时,服务器就可以直接推送数据更新给浏览器.该功能的好处之一就是玩家之间可以实时进行交互.当一个玩家做了些事,就会向服务器发送数据,服务器将广播一个事件给其他已连接的所有浏览器,让它们知道玩家做了什么.这样就使得制作HTML5网络游戏成为可能. 2.随着现代浏览器对H

2014中国软件开发者调查（三）：移动应用、游戏开发技术应用特点

这份调查报告涵盖了移动应用开发和游戏开发两个领域. 这两个领域,一个是从业人员特别多,第二个是这方面的开发者也对数据特别敏感,希望这份调查报告能够给这两领域的人带来帮助. 移动应用开发的技术特点 在本次调查中,从事移动应用开发的从业人数占总调查人数的 18.69%,说实话,这样的比例与移动互联网产业规模相比有点低,不知道是不是因为移动互联网领域竞争白热化,导致一部分开发者无暇参与调查?好了,言归正传,在参与调查的受访者中,90% 的受访者从事移动开发的时间不超过 3 年. 不同从业时间的软件开发

HTML5游戏开发,剪刀石头布小游戏案例

剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长,现在是不是还会玩一下,剪刀石头布游戏的规则我们都知道是:剪刀剪布,石头砸剪刀,布包石头.跟朋友.同学.兄弟姐妹有意见分歧?通过“剪刀石头布游戏”来一局吧,谁赢了听谁的.躲猫猫的时候,通过“剪刀石头布游戏”来一局吧,谁输了谁找.洗衣服.做饭.扫地等等什么的,通过“剪刀石头布游戏”来一局吧,谁输了谁做.这是我的处女座游戏,学校的时候跟着培训老师一步一步写出来的,今天在这里将这款游戏分享给伙伴们,可