- 浏览: 580623 次
- 来自: ...
文章分类
最新评论
-
lgh1992314:
相同的元素呢
一种离散化方法 -
HelloSummerR:
圆心的位置是随机的,于是圆的部分会落到canvas外,那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio:
好久没见到sokuban了,这有个java版的,带源码,可以参 ...
求推箱子的最小步数(java) -
肖泽文:
太好了,谢谢你。。有中文注释!
HTML5 推箱子游戏过关演示动画 -
swm8023:
删除操作,将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)(JAVA)
游戏来源网址:http://dougx.net/plunder/plunder.html
据网站介绍,这个游戏是用HTML5 Canvas 和Audio对象开发,游戏的第一级(第一关)已完全完成,第二级(第二关)正在开发之中。。。
游戏试玩与源码下载:http://www.108js.com/article/article11/b0020.html
试玩第一关后,感觉非常象流行的PC游戏“雷电”。今天先将它的图片加载方法写点笔记。
效果如图:
这个游戏的图片加载非常简单有特色,并配有进度条。它的加载方法是将所有图片文件用img标签写在html页面内,并绑定onload事件,如下所示:
<img id="splash_screen" src="splash_screen.jpg" onload="itemLoaded(this);">
在itemLoaded(item)函数中主要做四件事:
1、如果没有初始化canvas,则初始化画布canvas
2、绘制初始界面的2张图片(背景图和标题图片,这个游戏目前有46张图片)
3、g_itemsLoaded++,这是图片加载计数,到目前为止加载了多少张
4、绘制进度条,每加载一张图片,绘一次进度条。
代码:
本学习笔记演示与源码下载:
http://www.108js.com/article/article3/30094.html
据网站介绍,这个游戏是用HTML5 Canvas 和Audio对象开发,游戏的第一级(第一关)已完全完成,第二级(第二关)正在开发之中。。。
游戏试玩与源码下载:http://www.108js.com/article/article11/b0020.html
试玩第一关后,感觉非常象流行的PC游戏“雷电”。今天先将它的图片加载方法写点笔记。
效果如图:
这个游戏的图片加载非常简单有特色,并配有进度条。它的加载方法是将所有图片文件用img标签写在html页面内,并绑定onload事件,如下所示:
<img id="splash_screen" src="splash_screen.jpg" onload="itemLoaded(this);">
在itemLoaded(item)函数中主要做四件事:
1、如果没有初始化canvas,则初始化画布canvas
2、绘制初始界面的2张图片(背景图和标题图片,这个游戏目前有46张图片)
3、g_itemsLoaded++,这是图片加载计数,到目前为止加载了多少张
4、绘制进度条,每加载一张图片,绘一次进度条。
代码:
function itemLoaded(item){ if (g_context == undefined) { if ( !initCanvas() )//加载完第一张图片后初始化canvas { dbg("Critical error initializing canvas.", false); return; } } if (item.id == "splash_screen")//画背景 { g_context.drawImage(item,0,0); g_context.strokeRect(35,220, 500,40); } else if (item.id == "loading")//画loading..图片 { g_context.drawImage(item,0,0); g_context.fillStyle = "black"; g_context.fillRect(400,300, 300,30); g_context.fillStyle = "green"; g_context.fillText("Loading game sounds", 400,320); g_soundsLoaded= false; // loadGameSounds(); } g_itemsLoaded++;/当前加载完的图片数 alert(g_itemsLoaded); g_context.fillStyle = "black"; g_context.fillRect(400,300, 300,30); g_context.fillStyle = "green"; g_context.fillText(item.id, 400,320); var percent = g_itemsLoaded / g_totalItems; var width = Math.floor(percent * 500); g_context.fillRect(35,220, width,40);//画进度条 }
仔细看一下下面这个HTML文件,就明白了。 <!DOCTYPE HTML> <title>Canvas 游戏 </title> <script type="text/javascript"> var g_canvas; var g_context; //var g_soundsLoaded; // var g_onscreenControls; var g_totalItems; var g_itemsLoaded; //这个函数在Loader.js中,这里把它提出来了。 function itemLoaded(item){ if (g_context == undefined) { if ( !initCanvas() ) { dbg("Critical error initializing canvas.", false); return; } } if (item.id == "splash_screen") { g_context.drawImage(item,0,0); g_context.strokeRect(35,220, 500,40); } else if (item.id == "loading") { g_context.drawImage(item,0,0); g_context.fillStyle = "black"; g_context.fillRect(400,300, 300,30); g_context.fillStyle = "green"; g_context.fillText("Loading game sounds", 400,320); //g_soundsLoaded= false; // loadGameSounds(); } g_itemsLoaded++; alert(g_itemsLoaded); g_context.fillStyle = "black"; g_context.fillRect(400,300, 300,30); g_context.fillStyle = "green"; g_context.fillText(item.id, 400,320); var percent = g_itemsLoaded / g_totalItems; var width = Math.floor(percent * 500); g_context.fillRect(35,220, width,40); } //这个函数在Loader.js中,这里把它提出来了。 function initCanvas() { g_canvas = document.getElementById('theCanvas'); if (!g_canvas.getContext) { return false; } g_context = g_canvas.getContext('2d'); g_context.font = "14pt Helvetica"; g_context.lineWidth = 2; g_context.strokeStyle = "green"; g_totalItems = 46; g_itemsLoaded = 0; // g_onscreenControls = false; return true; } </script> </head> <body> <table cellpadding="0" border="0" cellspacing="0" frame="void"> <tr> <td valign="top"> <canvas align="left" id="theCanvas" width="600" height="400"></canvas> </td> <tr> <table> <div id="dbg"></div> <div id="hidden" style="visibility:hidden; width:1px; height:1px; overflow:hidden"> <img id="splash_screen" src="splash_screen.jpg" onload="itemLoaded(this);"> <img id="loading" src="loading.png" onload="itemLoaded(this);"> <img id="title" src="title.png" onload="itemLoaded(this);"> <img id="starfield" src="starfield.jpg" onload="itemLoaded(this);"> <img id="foreground" src="foreground.png" onload="itemLoaded(this);"> <img id="ship_center" src="ship_center.png" onload="itemLoaded(this);"> <img id="ship_up_1" src="ship_up_1.png" onload="itemLoaded(this);"> <img id="ship_up_2" src="ship_up_2.png" onload="itemLoaded(this);"> <img id="ship_up_3" src="ship_up_3.png" onload="itemLoaded(this);"> <img id="ship_down_1" src="ship_down_1.png" onload="itemLoaded(this);"> <img id="ship_down_2" src="ship_down_2.png" onload="itemLoaded(this);"> <img id="ship_down_3" src="ship_down_3.png" onload="itemLoaded(this);"> <img id="ship_icon" src="ship_icon.png" onload="itemLoaded(this);"> <img id="foreground_light" src="foreground_light.png" onload="itemLoaded(this);"> <img id="sky" src="sky.jpg" onload="itemLoaded(this);"> <img id="speed_image" src="speed_image.png" onload="itemLoaded(this);"> <img id="gun_image" src="gun_image.png" onload="itemLoaded(this);"> <img id="shot_image" src="shot_image.png" onload="itemLoaded(this);"> <img id="double_image" src="double_image.png" onload="itemLoaded(this);"> <img id="gem_image" src="gem_image.png" onload="itemLoaded(this);"> <img id="enemy_small" src="enemy_small.png" onload="itemLoaded(this);"> <img id="enemy_small_special" src="enemy_small_special.png" onload="itemLoaded(this);"> <img id="enemy_small_2" src="enemy_small_2.png" onload="itemLoaded(this);"> <img id="enemy_small_2_special" src="enemy_small_2_special.png" onload="itemLoaded(this);"> <img id="enemy_small_3" src="enemy_small_3.png" onload="itemLoaded(this);"> <img id="enemy_small_4" src="enemy_small_4.png" onload="itemLoaded(this);"> <img id="enemy_small_4_special" src="enemy_small_4_special.png" onload="itemLoaded(this);"> <img id="enemy_artifact" src="enemy_artifact.png" onload="itemLoaded(this);"> <img id="enemy_artifact_2" src="enemy_artifact_2.png" onload="itemLoaded(this);"> <img id="ship_death_1" src="ship_death_1.png" onload="itemLoaded(this);"> <img id="ship_death_2" src="ship_death_2.png" onload="itemLoaded(this);"> <img id="ship_death_3" src="ship_death_3.png" onload="itemLoaded(this);"> <img id="ship_death_4" src="ship_death_4.png" onload="itemLoaded(this);"> <img id="ship_death_5" src="ship_death_5.png" onload="itemLoaded(this);"> <img id="ship_death_6" src="ship_death_6.png" onload="itemLoaded(this);"> <img id="ship_death_7" src="ship_death_7.png" onload="itemLoaded(this);"> <img id="splode_1" src="splode_1.png" onload="itemLoaded(this);"> <img id="splode_2" src="splode_2.png" onload="itemLoaded(this);"> <img id="splode_3" src="splode_3.png" onload="itemLoaded(this);"> <img id="splode_4" src="splode_4.png" onload="itemLoaded(this);"> <img id="splode_5" src="splode_5.png" onload="itemLoaded(this);"> <img id="splode_6" src="splode_6.png" onload="itemLoaded(this);"> <img id="splode_7" src="splode_7.png" onload="itemLoaded(this);"> <img id="artifact_chard_image" src="artifact_chard.png" onload="itemLoaded(this);"> <img id="artifact_skull_image" src="artifact_skull.png" onload="itemLoaded(this);"> <img id="command_ship" src="command_ship.png" onload="itemLoaded(this);"> </div> </body> </html>
本学习笔记演示与源码下载:
http://www.108js.com/article/article3/30094.html
发表评论
-
HTML5 Canvas 旋转的“金字塔”
2015-12-24 13:25 10014效果图: 效果链接:http://www.108js.co ... -
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2346效果图: 效果链接: http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12882效果图: 效果链接: http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7369效果图: 效果链接: http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1573效果图: 点击观看效果:http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3186网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三(游戏面板)
2014-07-05 07:13 1365接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)
2014-07-04 13:08 1654接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)
2014-07-04 10:53 2319在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏(数字版)
2014-06-28 17:38 2475今天网上发现了一段代码,只有界面,很不错,学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1068效果图: 点击查看效果: http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 1923效果图: 点击看效果: http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1654先要准备应付各种浏览器的声音文件,什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1894看到哪,学到哪,记到哪。见谅,这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 2907一直在学习HTML5 Canvas相关内容,游戏,动画 ... -
javaScript 广度优先搜索法"自动推箱子"(一)
2014-06-12 09:45 1774用JS写了一个“广度优先搜索法”自动推箱子,理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2206欢迎访问博主的网站:http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1384点击这里可以查看动画效果: http://www.108js. ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2404<!DOCTYPE HTML> <html& ... -
HTML5 Canvas动画模板
2014-05-21 10:59 1008创建HTML5的画布动画,我们可以使用requestAn ...
相关推荐
试玩第一关后,感觉非常象流行的PC游戏“雷电”。学习HTML5游戏开发必备。
html5 canvas酷炫的银河系动画特效 html5 canvas酷炫的银河系动画特效
HTML5 Canvas绘制银河系特效是一款基于canvas 2D画布绘制酷炫的银河系动画,鼠标单击旋转拖动就能简单的绘制一条银河系场景特效。
破碎银河系M服原端,需要的下载,只做学习之用,如有达人修改后请再次发布!
此为仿破碎银河系单机版易语言源码。供学习游戏制作者学习参考
这是一张唯美蓝色银河系PPT背景图片,第一PPT模板网提供唯美幻灯片背景图片免费下载; 关键词:蓝色星空PPT背景图片,宇宙星系幻灯片背景图片,唯美PowerPoint图片免费下载,.PPTX格式;
HTML5 Canvas鼠标绘制银河系特效,按住鼠标左键进行绘画,光标速度会影响画笔的大小。
计算机行业周报:中标软件和银河麒麟正式合并,打造国产操作系统新旗舰
计算机行业周报:中标软件和银河麒麟正式合并,打造国产操作系统新旗舰.pdf
这是一款html5 canvas炫酷旋转银河系星空背景特效。该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷。
html5跟随鼠标移动银河星系背景动画特效
唯美的蓝色星海旋转银河系星空动画效果源码下载
2000年1月5日:银河系和仙女座星系没有发生碰撞的一天。 把它记录下来。 2000年1月6日:有一天,银河系和仙女座星系没有碰撞。 把它记录下来。 2000年1月7日:银河系和仙女座星系尚未发生碰撞的一天。 把它记录下来...
html5 canvas炫酷旋转银河系星空背景特效源码.zip
gmestan 该存储库提供了一些示例,这些示例使用Stan来创建多级模型,以使用来自示踪剂的运动学数据来估计银河系的质量。 提供了两个数据集: :球状星团数据集从 :从矮星系的数据集 斯坦代码在 。 有几种可用的模型...
HTML5 Canvas绘制银河系特效是一款基于canvas 2D画布绘制酷炫的银河系动画,鼠标单击旋转拖动就能简单的绘制一条银河系场景特效。
银河系的红外消光律,高健,姜碧沩,该文综述了星际尘埃在红外波段的消光律。现有的观测表明,在0.7μm≤λ≤5μm范围内的星际消光可以近似用幂律函数来拟合,对5μm ≤λ�
HTML5+Canvas实现的手绘银河系特效源码.zip
HTML5 Canvas绘制银河系特效是一款基于canvas 2D画布绘制酷炫的银河系动画,鼠标单击旋转拖动就能简单的绘制一条银河系场景特效。