一、前言
很久没写文章了。。。也不知大家还记不记得以前给大家的承诺——写几篇有关html5开发游戏的文章。今天总算有时间了,不过我还得抓紧时间,因为种种原因,明天我还得投入紧张的工作之中。
言归正传,现在让我们来说说html5开发游戏。有的朋友认为html5开发游戏不就是用javascript开发吗?游戏中的图片可以用<img>贴上去吗?何必还用什么html5嘛。(或许大家都不是这样认为的,但我初学html5时就是这样想的。因此才出现了前面我写的有关javascript开发《三国志曹操传》的系列文章)但并不是这样的,html5开发游戏主要用的是<canvas>标签,<canvas>里的图片是不可以拖动复制的,而<img>是可以的。因此这就体现了html5开发游戏的关键。不过在<canvas>里贴图可不是用一个src属性可以解决的,它要用javascript贴上图片。。。毕竟开发游戏可不是那么简单的工程嘛。。。(废话又多说了两句,不过以前曾有为朋友对我说,正是有了这些废话,才使文章"生动"起来的)
接下来我要向大家揭示html5开发游戏的内幕。
二、"动"的体现
html5究竟是怎样使静态的图片变为动态的呢?请看以下分析。
首先我们准备几张图片:
还是老图片,不过不是老代码:
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
欢迎继续关注我的博客
分享到:
相关推荐
行业文档-设计装置-串联式动静智能称重平台.zip
提出了一种动静结合的网络数据检测方法,在传统静态分析的基础上优化了检测算法,同时引入了动态模拟运行的检测方式;通过动静结合的双重检测提高了恶意代码的识别率,并能够在代码传入实际被保护程序运行前检测并...
实现在对话框中进行图形的绘制,讲解的比较详细,而且其中还有截图。
四年级作文动静结合写景片段训练
《Cocos2d-JS开发之旅——从HTML 5到原生手机游戏》以两个游戏为线索,每一章的学习都为最终实现游戏而准备。除了基础的Cocos2d-JS使用方法,本书还会探讨如何调试发布原生手机游戏和另外一些高级话题。 《Cocos2d-...
行业分类-电子-LED动静分离实现电路及具有所述电路的空调器的说明分析.rar
写作手法——动静结合[汇编].pdf
NULL 博文链接:https://ywu.iteye.com/blog/2246306
1个Nginx+2个tomcat+2个redis服务器(主从复制)实现反向代理,实现动静分离。 - 张相逢的博客 - CSDN博客 Nginx的个人理解 - fly1056601582的博客 - CSDN博客 Redis 集合(Set)_redis教程 mysql、zookeeper、redis和...
网络游戏-随机系统基于动静混合神经网络建模的抗干扰控制方法.zip
基于深度学习的动静结合的漏洞挖掘方法.pdf
行业文档-设计装置-DSI动静间隔教学法.zip
教育科研-学习工具-DSI动静间隔教学法.zip
针对同家族恶意软件行为具有相似性的特点进行研究,提出通过静态分析与动态运行程序相结合的方式度量软件行为的相似性。通过反编译和soot代码转换框架获取程序控制流图,利用行为子图匹配算法从静态方面对程序行为...
ASP实例开发源码—动静 ASP 聊天室(asphtmlchat)室豪华版 v10.0终结版.zipASP实例开发源码—动静 ASP 聊天室(asphtmlchat)室豪华版 v10.0终结版.zipASP实例开发源码—动静 ASP 聊天室(asphtmlchat)室豪华版 v10.0...
单片机数码管动静结合显示,前7位静态显示,最后一位动态显示数字
动静结合的循环结构选路方法,朱前超,张旭舟,面向路径的单元测试中,路径选择是重要的基础步骤。传统的静态选路过程中,循环结构的存在会导致生成大量的路径,其中大部分路径
Nginx Tomcat实现动静分离 就目前来说是Nginx结合Tomcat 比较好的一篇负载均衡应用文档
|---5、技术文章;-------------------------◇---------------◇---------------★--------| |---6、案例图片;-------------------------◇---------------◇---------------★--------| |---7、下载中心;-------...
一种基于Java虚拟机的动静结合自适应优化方法