学习：HTML5 游戏《银河系的掠夺》图片加载进度条

128kj

浏览: 600550 次
来自: ...

最近访客更多访客>>

hcmfys

caizi12

sdtvyyb_007

hanqunfeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5 动画游戏

html javascript 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、绘制进度条，每加载一张图片，绘一次进度条。

代码：

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

查看图片附件

0
顶

0
踩

分享到：

HTML5 Canvas眨眼睛动画 | 用像素块遮挡图片的某部分

2013-12-06 15:21
浏览 1611
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论