HTML5游戏开发技术基础整理
来源:互联网 发布:深圳网络大学报名时间 编辑:程序博客网 时间:2024/06/05 21:00
随着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方法实现属性和方法的继承
//定义一个父类Peoplefunction People(){ this.type="人"};//为父类定义一个方法People.prototype={ getType:function() { alert("type=" + this.type) }};//定义一个子类Studentfunction Student(name,age,sex){ //继承父类的属性type People.apply(this,arguments); this.name = name; this.age = age; this.sex = sex;};//声明一个Student实例var stu = new Student("张三",20,"男");//输出typealert(stu.type)//下面我们来了解下如何继承父类的方法,继承父类方法主要通过循环使用父对象的prototype进行复制来实现,如//重新定义子类Studentfunction 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的地方可以回过头来看看。
- HTML5游戏开发技术基础整理
- html5游戏开发的基础设置操作
- JX8NET游戏强大的HTML5游戏开发技术
- html5游戏开发-零基础开发《圣诞老人送礼物》小游戏
- html5游戏开发-零基础开发《圣诞老人送礼物》小游戏
- [数学基础]游戏开发数学技术
- 业界技术大牛答:html5游戏开发前景如何?
- html5游戏开发设计技术解析Egret篇
- html5基础标签整理
- HTML5 游戏开发---骰子游戏
- HTML5游戏开发实战
- HTML5游戏开发
- html5开发游戏总结
- html5进行游戏开发
- HTML5 游戏开发
- Html5 移动游戏开发
- HTML5游戏开发引擎
- HTML5开发游戏“2048”
- 【JAVA】【NIO】3、Java NIO Channel
- VS配色方案
- Cpp 运算符重载
- 设计模式之单例模式
- 如何在 Windows XP SP2 中解决与 WMI 相关的问题
- HTML5游戏开发技术基础整理
- Native Client初探
- com.mysql.jdbc.Connection.isValid(I)Z Error问题
- IO流学习
- Best Time to Buy and Sell Stock IV
- LeetCode Number of 1 Bits
- 【C++11】新特性——std::function
- C++强大背后
- git 命令笔记