一、前言

很久没写文章了。。。也不知大家还记不记得以前给大家的承诺——写几篇有关html5开发游戏的文章。今天总算有时间了，不过我还得抓紧时间，因为种种原因，明天我还得投入紧张的工作之中。

言归正传，现在让我们来说说html5开发游戏。有的朋友认为html5开发游戏不就是用javascript开发吗？游戏中的图片可以用<img>贴上去吗？何必还用什么html5嘛。(或许大家都不是这样认为的，但我初学html5时就是这样想的。因此才出现了前面我写的有关javascript开发《三国志曹操传》的系列文章)但并不是这样的，html5开发游戏主要用的是<canvas>标签，<canvas>里的图片是不可以拖动复制的，而<img>是可以的。因此这就体现了html5开发游戏的关键。不过在<canvas>里贴图可不是用一个src属性可以解决的，它要用javascript贴上图片。。。毕竟开发游戏可不是那么简单的工程嘛。。。(废话又多说了两句，不过以前曾有为朋友对我说，正是有了这些废话，才使文章"生动"起来的)

接下来我要向大家揭示html5开发游戏的内幕。

二、"动"的体现

html5究竟是怎样使静态的图片变为动态的呢？请看以下分析。

首先我们准备几张图片:


01.png	02.png	03.png

还是老图片，不过不是老代码：

main.js里的代码：

window.onload = function(){setInterval(function(){main();}, 150);
};var pic1 = "./01.png";
var pic2 = "./02.png";
var pic3 = "./03.png";var picArry = [pic1, pic2, pic3];var newImgName = new Image();
newImgName.src = pic1;var picArrsub = 0;function main(){var cElem = document.getElementById("CANVAS");var cxt = cElem.getContext("2d");cxt.clearRect(0, 0, 300, 300); cxt.drawImage(newImgName,100,100);cxt.save();//处理图片if(picArrsub >= picArry.length - 1){picArrsub = 0;}else{picArrsub += 1;}newImgName.src = picArry[picArrsub];
}

以上是鄙人写的javascript代码，但是众所周知，既然是叫html5而不是javascript5，说明html代码也至关重要。

接下来是html5代码：

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="./main.js"></script>
</head>
<body><canvas id="CANVAS" width="300px" height="300px" style="border:2px solid #c3c3c3; z-index:1;">Your browser does not support the canvas element. Please update your browser or download other browsers support html5.
</canvas></body>
</html>

解释一下：

<canvas>是html5新加标签，估计就是专门为开发游戏设计的。首先我们得对这个新加进来的标签添加id属性，这样就方便大家在javascript里操作了。具体一些信息可以看看w3cschool：http://www.w3school.com.cn/html5/html_5_canvas.asp

html代码就解释到此，接下来讲讲javascript里的代码：

var pic1 = "./01.png";
var pic2 = "./02.png";
var pic3 = "./03.png";var picArry = [pic1, pic2, pic3];

这段写得较明了，同样是把几张图片放进数组，这样方便以后循环播放图片。

var newImgName = new Image();
newImgName.src = pic1;

这段代码是建立一个贴图片的区域，并且给src赋值为pic，也就是刚才定义的变量，也就是./01.png

function main(){var cElem = document.getElementById("CANVAS");var cxt = cElem.getContext("2d");cxt.clearRect(0, 0, 300, 300); cxt.drawImage(newImgName,100,100);cxt.save();//处理图片if(picArrsub >= picArry.length - 1){picArrsub = 0;}else{picArrsub += 1;}newImgName.src = picArry[picArrsub];
}

这一段代码是该程序的主要部分。贴图，切换图片，处理图片都在这里。首先我取出canvas的id，然后绘图，图的src在一个用if()...else的死循环中反复切换，每切换一次就用setInterval()重复调用main()函数，由于src切换，因此重复调用main()时，又会重新绘图，导致图片无限的循环切换。

cxt.clearRect(0, 0, 300, 300);
cxt.drawImage(newImgName,100,100);
cxt.save();

这段代码是什么意思呢？首先为了不让画出的图不出现重叠——drawImage()函数画出的图是不会因下次要画图象而把上次画的清空的。所以如果不主动清空画布，那就会出现这次画的叠在上次画的上面，因此我首先用clearRect()函数把画布清空，这样的话就不会有重叠了。( cleatRect 语法如下：cleatRect(移至的x坐标, 移至的y坐标, 清空部分的宽度, 清空部分的高度);)

drawImage想必大家都知道，具体语法如下：drawImage(要画出对象的名称, 移至的x坐标, 移至的y坐标);

代码下载地址就不给了，直接复制代码吧。。。（各位读者且勿介意呀。。。）

demo演示位置：

http://www.cnblogs.com/yorhom/archive/2013/04/04/3000278.html

----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明：转自Yorhom's Game Box

欢迎继续关注我的博客

html5游戏开发--动静结合(一)-动态画面的实现相关推荐

html5游戏开发--动静结合(二)-用地图块拼成大地图初探lufylegend
一.前言本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画,毕竟& ...
业界技术大牛答：html5游戏开发前景如何？
编者按:作为2014年游戏业界现象级事件之一,<围住神经猫>的蹿红也为Egret(白鹭)这款游戏引擎博来了关注.Egret(白鹭)是一款可以一次开发,分别部署在Android.IOS和WP ...
HTML5游戏开发(四)：飞机大战之显示场景和元素
<HTML5游戏开发>系列文章的目的有:一.以最小的成本去入门egret小项目开发,官方的教程一直都是面向中重型:二.egret可以非常轻量:三.egret相比PIXI.js和sprite ...
HTML5游戏开发pdf
下载地址:网盘下载迈耶编著的<HTML5游戏开发>共10章,通过10个具体的游戏示例详细介绍HTML5的用法.每章都先列出相关的技术特性并给出了应用的描述,然后讨论了实现这个应用的关键需 ...
CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎
CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5 2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的 ...
HTML5游戏开发系列教程5(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-5/ 最终我决定准备下一篇游戏开发系列的文章,我们将继续使用can ...
html5游戏开发-零基础开发RPG游戏-开源讲座(四)
了解上三篇的内容请点击: html5[color=rgb(68, 68, 68) !important]游戏开发-零基础开发RPG游戏-开源讲座(一) http://www.html5cn.org/a ...
HTML5游戏开发(三)：使用webpack构建TypeScript应用
<HTML5游戏开发>系列文章的目的有:一.以最小的成本去入门egret小项目开发,官方的教程一直都是面向中重型:二.egret可以非常轻量:三.egret相比PIXI.js和sprite ...
Html5游戏开发-145行代码完成一个RPG小Demo
lufy前辈写过<[代码艺术]17行代码的贪吃蛇小游戏>一文,忽悠了不少求知的兄弟进去阅读,阅读量当然是相当的大.今天我不仿也搞一个这样的教程,目地不在于忽悠人,而在于帮助他人. 先看de ...

html5游戏开发--动静结合(一)-动态画面的实现

一、前言

二、"动"的体现

html5游戏开发--动静结合(一)-动态画面的实现相关推荐

最新文章

热门文章