学习：HTML5 游戏《银河系的掠取》图片加载进度条
日期：2014-05-16 浏览次数：20671 次
学习：HTML5 游戏《银河系的掠夺》图片加载进度条
游戏来源网址：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://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、绘制进度条，每加载一张图片，绘一次进度条。
代码：
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="itemLo
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
