DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> 利用HTML5 Canvas制作一個簡單的打飛機游戲
利用HTML5 Canvas制作一個簡單的打飛機游戲
編輯:HTML5教程     

   之前在當耐特的DEMO裡看到個打飛機的游戲,然後就把他的圖片和音頻扒了了下來。。。。自己憑著玩的心情重新寫了一個。僅供娛樂哈。。。。。。我沒有用框架,所有js都是自己寫的。。。。。。所以就可以來當個簡單的教程,對那些剛玩canvas的,或許能有些幫助,樓主玩canvas也不是很久,技術不是很好,請見諒哈。

  閒話不多說,先上DEMO撒:飛機游戲 樓主寫這個人純碎娛樂,沒想著寫成多正式的游戲哈。

  步入主題啦:打飛機游戲文件有index.html入口文件,allSprite.js精靈的邏輯處理文件,loading.js加載處理文件以及data.js(初始化的一些數據)。

  首先,正常的游戲基本上都需要一個loading,loading頁面就是用來預加載數據的,包括精靈表圖片,音頻等,因為這是個小游戲,要加載的就只有一些音頻和圖片。裡面的加載代碼主要就下面這些,其他是制作loading動畫的,那個比較簡單,就不貼了,如果有興趣的直接在DEMO裡看控制台就行了:

  XML/HTML Code復制內容到剪貼板

  loadImg:function(datas){

  var _this = this;

  var dataIndex = 0;

  li();

  function li(){

  if(datas[dataIndex].indexOf("mp3")>=0){

  var audio = document.createElement("audio");

  document.body.appendChild(audio);

  audio.preload = "auto";

  audio.src = datas[dataIndex];

  audio.oncanplaythrough = function(){

  this.oncanplaythrough = null;

  dataIndex++;

  if(dataIndex===datas.length){

  _this.percent = 100;

  }else {

  _this.percent = parseInt(dataIndex/datas.length*100);

  li.call(_this);

  }

  }

  }else {

  preLoadImg(datas[dataIndex] , function(){

  dataIndex++;

  if(dataIndex===datas.length){

  _this.percent = 100;

  } else {

  _this.percent = parseInt(dataIndex/datas.length*100);

  li.call(_this);

  }

  })

  }

  }

  },

  //再貼出preLoadImg的方法

  function preLoadImg(src , callback){

  var img = new Image();

  img.src = src;

  if(img.complete){

  callback.call(img);

  }else {

  img.onload = function(){

  callback.call(img);

  }

  }

  }

  我先在data.js裡面用一個數組保存文件的鏈接,然後判斷這些鏈接是圖片還是音頻,如果是圖片就用preLoadImg加載,預加載圖片的代碼很簡單,就是new一個圖片對象,然後把鏈接賦給它,加載完後再回調。音頻的加載則是通過生成一個HTML5的audio dom對象,把鏈接賦給它,audio有一個事件“canplaythrough”,浏覽器預計能夠在不停下來進行緩沖的情況下持續播放指定的音頻/視頻時,會發生 canplaythrough 事件,也就是說當canplaythrough被調用時,音頻就已經被加載的差不多了,可以進行下一個音頻的加載了。就這樣當把所有東西都加載完後,再進行回調,開始游戲。

  游戲開始了,一個游戲,會需要很多的對象,所以我就統一寫成了一個精靈對象,不同對象之間的每一幀的運動情況直接用behavior來分別編寫就行了。

  XML/HTML Code復制內容到剪貼板

  W.Sprite = function(name , painter , behaviors , args){

  if(name !== undefined) this.name = name;

  if(painter !== undefined) this.painter = painter;

  this.top = 0;

  this.left = 0;

  this.width = 0;

  this.height = 0;

  this.velocityX = 3;

  this.velocityY = 2;

  this.visible = true;

  this.animating = false;

  this.behaviors = behaviors;

  this.rotateAngle = 0;

  this.blood = 50;

  this.fullBlood = 50;

  if(name==="plan"){

  this.rotateSpeed = 0.05;

  this.rotateLeft = false;

  this.rotateRight = false;

  this.fire = false;

  this.firePerFrame = 10;

  this.fireLevel = 1;

  }else if(name==="star"){

  this.width = Math.random()*2;

  this.speed = 1*this.width/2;

  this.lightLength = 5;

  this.cacheCanvas = document.createElement("canvas");

  thisthis.cacheCtx = this.cacheCanvas.getContext('2d');

  thisthis.cacheCanvas.width = this.width+this.lightLength*2;

  thisthis.cacheCanvas.height = this.width+this.lightLength*2;

  this.painter.cache(this);

  }else if(name==="badPlan"){

  this.badKind = 1;

  this.speed = 2;

  this.rotateAngle = Math.PI;

  }else if(name==="missle"){

  this.width = missleWidth;

  }else if(name==="boom"){

  this.width = boomWidth;

  }else if(name==="food"){

  this.width = 40;

  this.speed = 3;

  this.kind = "LevelUP"

  }

  this.toLeft = false;

  this.toTop = false;

  this.toRight = false;

  this.toBottom = false;

  this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);

  if(args){

  for(var arg in args){

  this[arg] = args[arg];

  }

  }

  }

  Sprite.prototype = {

  constructor:Sprite,

  paint:function(){

  if(this.name==="badPlan"){this.update();}

  if(this.painter !== undefined && this.visible){

  if(this.name!=="badPlan") {

  this.update();

  }

  if(this.name==="plan"||this.name==="missle"||this.name==="badPlan"){

  ctx.save();

  ctx.translate(this.left , this.top);

  ctx.rotate(this.rotateAngle);

  this.painter.paint(this);

  ctx.restore();

  }else {

  this.painter.paint(this);

  }

  }

  },

  update:function(time){

  if(this.behaviors){

  for(var i=0;i

  this.behaviors[i].execute(this,time);

  }

  }

  }

  }

  寫出精靈類後,就可以通過編寫每個的painter以及behavior來生成不同的對象了。接下來就是寫painter了,painter分成兩種,一種是普通的painter,一種就是精靈表painter,因為像爆炸動畫,飛機開槍動畫,都不是一張圖片就能搞定的,所以就需要用到精靈表了:

2015511181456172.png (168×24)
2015511181533636.png (896×64)

  而繪制這些就要為他們定制一個精靈表繪制器,下面這個是最簡單的精靈表繪制器,針對游戲的復雜性可以相對的修改精靈表寫法,直到合適,不過原理都大同小異,就是小修小改而已:

  XML/HTML Code復制內容到剪貼板

  var SpriteSheetPainter = function(cells){

  this.cells = cells || [];

  this.cellIndex = 0;

  }

  SpriteSheetPainter.prototype = {

  advance:function(){

  if(this.cellIndex === this.cells.length-1){

  this.cellIndex = 0;

  }

  else this.cellIndex++;

  },

  paint:function(sprite){

  var cell = this.cells[this.cellIndex];

  context.drawImage(spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left , sprite.top , cell.w , cell.h);

  }

  }

  而普通的繪制器就更簡單了,直接寫一個painter,把要畫的什麼東西都寫進去就行了。

  有了精靈類和精靈表繪制器後,我們就可以把星星,飛機,子彈,爆炸對象都寫出來了:下面是整個allSprite.js的代碼:

  JavaScript Code復制內容到剪貼板

  (function(W){

  "use strict"

  var planWidth = 24,

  planHeight = 24,

  missleWidth = 70,

  missleHeight = 70,

  boomWidth = 60;

  //精靈類

  W.Sprite = function(name , painter , behaviors , args){

  if(name !== undefined) this.name = name;

  if(painter !== undefined) this.painter = painter;

  this.top = 0;

  this.left = 0;

  this.width = 0;

  this.height = 0;

  this.velocityX = 3;

  this.velocityY = 2;

  this.visible = true;

  this.animating = false;

  this.behaviors = behaviors;

  this.rotateAngle = 0;

  this.blood = 50;

  this.fullBlood = 50;

  if(name==="plan"){

  this.rotateSpeed = 0.05;

  this.rotateLeft = false;

  this.rotateRight = false;

  this.fire = false;

  this.firePerFrame = 10;

  this.fireLevel = 1;

  }else if(name==="star"){

  this.width = Math.random()*2;

  this.speed = 1*this.width/2;

  this.lightLength = 5;

  this.cacheCanvas = document.createElement("canvas");

  this.cacheCtx = this.cacheCanvas.getContext('2d');

  this.cacheCanvas.width = this.width+this.lightLength*2;

  this.cacheCanvas.height = this.width+this.lightLength*2;

  this.painter.cache(this);

  }else if(name==="badPlan"){

  this.badKind = 1;

  this.speed = 2;

  this.rotateAngle = Math.PI;

  }else if(name==="missle"){

  this.width = missleWidth;

  }else if(name==="boom"){

  this.width = boomWidth;

  }else if(name==="food"){

  this.width = 40;

  this.speed = 3;

  this.kind = "LevelUP"

  }

  this.toLeft = false;

  this.toTop = false;

  this.toRight = false;

  this.toBottom = false;

  this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);

  if(args){

  for(var arg in args){

  this[arg] = args[arg];

  }

  }

  }

  Sprite.prototype = {

  constructor:Sprite,

  paint:function(){

  if(this.name==="badPlan"){this.update();}

  if(this.painter !== undefined && this.visible){

  if(this.name!=="badPlan") {

  this.update();

  }

  if(this.name==="plan"||this.name==="missle"||this.name==="badPlan"){

  ctx.save();

  ctx.translate(this.left , this.top);

  ctx.rotate(this.rotateAngle);

  this.painter.paint(this);

  ctx.restore();

  }else {

  this.painter.paint(this);

  }

  }

  },

  update:function(time){

  if(this.behaviors){

  for(var i=0;i

  this.behaviors[i].execute(this,time);

  }

  }

  }

  }

  // 精靈表繪制器

  W.SpriteSheetPainter = function(cells , isloop , endCallback , spritesheet){

  this.cells = cells || [];

  this.cellIndex = 0;

  this.dateCount = null;

  this.isloop = isloop;

  this.endCallback = endCallback;

  this.spritesheet = spritesheet;

  }

  SpriteSheetPainter.prototype = {

  advance:function(){

  this.cellIndex = this.isloop?(this.cellIndex===this.cells.length-1?0:this.cellIndex+1):(this.cellIndex+1);

  },

  paint:function(sprite){

  if(this.dateCount===null){

  this.dateCount = new Date();

  }else {

  var newd = new Date();

  var tc = newd-this.dateCount;

  if(tc>40){

  this.advance();

  this.dateCount = newd;

  }

  }

  if(this.cellIndex

  var cell = this.cells[this.cellIndex];

  ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left-sprite.width/2 , sprite.top-sprite.width/2 , cell.w , cell.h);

  } else if(this.endCallback){

  this.endCallback.call(sprite);

  this.cellIndex = 0;

  }

  }

  }

  //特制飛機精靈表繪制器

  W.controllSpriteSheetPainter = function(cells , spritesheet){

  this.cells = cells || [];

  this.cellIndex = 0;

  this.dateCount = null;

  this.isActive = false;

  this.derection = true;

  this.spritesheet = spritesheet;

  }

  controllSpriteSheetPainter.prototype = {

  advance:function(){

  if(this.isActive){

  this.cellIndex++;

  if(this.cellIndex === this.cells.length){

  this.cellIndex = 0;

  this.isActive = false;

  }

  }

  },

  paint:function(sprite){

  if(this.dateCount===null){

  this.dateCount = new Date();

  }else {

  var newd = new Date();

  var tc = newd-this.dateCount;

  if(tc>sprite.firePerFrame){

  this.advance();

  this.dateCount = newd;

  }

  }

  var cell = this.cells[this.cellIndex];

  ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , -planWidth/2 , -planHeight/2 , cell.w , cell.h);

  }

  }

  W.planBehavior = [

  {execute:function(sprite,time){

  if(sprite.toTop){

  sprite.top = sprite.top

  }

  if(sprite.toLeft){

  sprite.left = sprite.left

  }

  if(sprite.toRight){

  sprite.left = sprite.left>canvas.width-planWidth/2? sprite.left : sprite.left+sprite.velocityX;

  }

  if(sprite.toBottom){

  sprite.top = sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top+sprite.velocityY;

  }

  if(sprite.rotateLeft){

  sprite.rotateAngle -= sprite.rotateSpeed;

  }

  if(sprite.rotateRight){

  sprite.rotateAngle += sprite.rotateSpeed;

  }

  if(sprite.fire&&!sprite.painter.isActive){

  sprite.painter.isActive = true;

  this.shot(sprite);

  }

  },

  shot:function(sprite){

  this.addMissle(sprite , sprite.rotateAngle);

  var missleAngle = 0.1

  for(var i=1;i

  this.addMissle(sprite , sprite.rotateAngle-i*missleAngle);

  this.addMissle(sprite , sprite.rotateAngle+i*missleAngle);

  }

  var audio = document.getElementsByTagName("audio");

  for(var i=0;i

  console.log(audio[i].paused)

  if(audio[i].src.indexOf("shot")>=0&&audio[i].paused){

  audio[i].play();

  break;

  }

  }

  },

  addMissle:function(sprite , angle){

  for(var j=0;j

  if(!missles[j].visible){

  missles[j].left = sprite.left;

  missles[j].top = sprite.top;

  missles[j].rotateAngle = angle;

  var missleSpeed = 20;

  missles[j].velocityX = missleSpeed*Math.sin(-missles[j].rotateAngle);

  missles[j].velocityY = missleSpeed*Math.cos(-missles[j].rotateAngle);

  missles[j].visible = true;

  break;

  }

  }

  }

  }

  ]

  W.starBehavior = [

  {execute:function(sprite,time){

  if(sprite.top > canvas.height){

  sprite.left = Math.random()*canvas.width;

  sprite.top = Math.random()*canvas.height - canvas.height;

  }

  sprite.top += sprite.speed;

  }}

  ]

  W.starPainter = {

  paint:function(sprite){

  ctx.drawImage(sprite.cacheCanvas , sprite.left-sprite.width/2-sprite.lightLength , sprite.top-sprite.width/2-sprite.lightLength)

  },

  cache:function(sprite){

  sprite.cacheCtx.save();

  var opacity = 0.5,addopa = 1/sprite.lightLength;

  sprite.cacheCtx.fillStyle = "rgba(255,255,255,0.8)";

  sprite.cacheCtx.beginPath();

  sprite.cacheCtx.arc(sprite.width/2+sprite.lightLength , sprite.width/2+sprite.lightLength , sprite.width/2 , 0 , 2*Math.PI);

  sprite.cacheCtx.fill();

  for(var i=1;i<=sprite.lightLength;i+=2){

  opacity-=addopa;

  sprite.cacheCtx.fillStyle = "rgba(255,255,255,"+opacity+")";

  sprite.cacheCtx.beginPath();

  sprite.cacheCtx.arc(sprite.width/2+sprite.lightLength , sprite.width/2+sprite.lightLength , sprite.width/2+i , 0 , 2*Math.PI);

  sprite.cacheCtx.fill();

  }

  }

  }

  W.foodBehavior = [

  {execute:function(sprite,time){

  sprite.top += sprite.speed;

  if(sprite.top > canvas.height+sprite.width){

  sprite.visible = false;

  }

  }}

  ]

  W.foodPainter = {

  paint:function(sprite){

  ctx.fillStyle = "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",1)"

  ctx.font="15px 微軟雅黑"

  ctx.textAlign = "center";

  ctx.textBaseline = "middle";

  ctx.fillText(sprite.kind , sprite.left , sprite.top);

  }

  }

  W.missleBehavior = [{

  execute:function(sprite,time){

  sprite.left -= sprite.velocityX;

  sprite.top -= sprite.velocityY;

  if(sprite.left<-missleWidth/2||sprite.top<-missleHeight/2||sprite.left>canvas.width+missleWidth/2||sprite.top<-missleHeight/2){

  sprite.visible = false;

  }

  }

  }];

  W.misslePainter = {

  paint:function(sprite){

  var img = new Image();

  img.src="../planGame/image/plasma.png"

  ctx.drawImage(img , -missleWidth/2+1 , -missleHeight/2+1 , missleWidth , missleHeight);

  }

  }

  W.badPlanBehavior = [{

  execute:function(sprite,time){

  if(sprite.top > canvas.height || !sprite.visible){

  var random = Math.random();

  if(point>=200&&point<400){

  sprite.fullBlood = 150;

  if(random<0.1){

  sprite.badKind = 2;

  sprite.fullBlood = 250;

  }

  }else if(point>=400&&point<600){

  sprite.fullBlood = 250;

  if(random<0.2){

  sprite.badKind = 2;

  sprite.fullBlood = 400;

  }

  if(random<0.1){

  sprite.badKind = 3;

  sprite.fullBlood = 600;

  }

  }else if(point>=600){

  sprite.fullBlood = 500;

  if(random<0.4){

  sprite.badKind = 2;

  sprite.fullBlood = 700;

  }

  if(random<0.2){

  sprite.badKind = 3;

  sprite.fullBlood = 1000;

  }

  }

  sprite.visible = true;

  sprite.blood = sprite.fullBlood;

  sprite.left = Math.random()*(canvas.width-2*planWidth)+planWidth;

  sprite.top = Math.random()*canvas.height - canvas.height;

  }

  sprite.top += sprite.speed;

  },

  shot:function(sprite){

  this.addMissle(sprite , sprite.rotateAngle);

  var missleAngle = 0.1

  for(var i=1;i

  this.addMissle(sprite , sprite.rotateAngle-i*missleAngle);

  this.addMissle(sprite , sprite.rotateAngle+i*missleAngle);

  }

  },

  addMissle:function(sprite , angle){

  for(var j=0;j

  if(!missles[j].visible){

  missles[j].left = sprite.left;

  missles[j].top = sprite.top;

  missles[j].rotateAngle = angle;

  var missleSpeed = 20;

  missles[j].velocityX = missleSpeed*Math.sin(-missles[j].rotateAngle);

  missles[j].velocityY = missleSpeed*Math.cos(-missles[j].rotateAngle);

  missles[j].visible = true;

  break;

  }

  }

  }

  }];

  W.badPlanPainter = {

  paint:function(sprite){

  var img = new Image();

  img.src="../planGame/image/ship.png"

  switch(sprite.badKind){

  case 1:ctx.drawImage(img , 96 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);

  break;

  case 2:ctx.drawImage(img , 120 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);

  break;

  case 3:ctx.drawImage(img , 144 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);

  break;

  }

  ctx.strokeStyle = "#FFF";

  ctx.fillStyle = "#F00";

  var bloodHeight = 1;

  ctx.strokeRect(-planWidth/2-1 , planHeight+bloodHeight+3 , planWidth+2 , bloodHeight+2);

  ctx.fillRect(planWidth/2-planWidth*sprite.blood/sprite.fullBlood , planHeight+bloodHeight+3 , planWidth*sprite.blood/sprite.fullBlood , bloodHeight);

  }

  }

  W.planSize = function(){

  return {

  w:planWidth,

  h:planHeight

  }

  }

  })(window);

  這些繪制方法之類的都相對比較簡單。

  主要說一下飛機的運動以及對象數量的控制,飛機怎麼運動?毫無疑問,通過鍵盤控制它運動,可能很多人就會想到通過keydown這個方法按下的時候通過判斷keyCode來讓飛機持續運動。但是有個問題,keydown事件不支持多鍵按下,也就是說,當你按下X鍵時,keyCode是88,與此同時你按下方向鍵後,keyCode會瞬間變成37,也就是說,如果你單純的想靠keydown來控制飛機運動,飛機就只能做一件事,要麼只可以往某個方向移動,要麼只會開槍。

  所以,我們要通過keydown和keyup來實現飛機的運動,原理很容易理解:當我們按下往左的方向鍵時,我們給飛機一個往左的狀態,也就是讓飛機的toLeft屬性為true,而在動畫循環中,判斷飛機的狀態,如果toLeft為true則飛機的x值不停地減少,飛機也就會不停地往左移動,然後當我們抬起手指時觸發keyup事件,我們就再keyup事件中解除飛機往左的狀態。飛機也就停止往左移動了。其他狀態也一樣的原理,這樣寫的話,就能夠讓飛機多種狀態於一生了。可以同時開槍同時到處跑了。

  實現的代碼如下:

  XML/HTML Code復制內容到剪貼板

  //keydown/keyup事件的綁定

  window.onkeydown = function(event){

  switch(event.keyCode){

  case 88:myplan.fire = true;

  break;

  case 90:myplan.rotateLeft=true;

  break;

  case 67:myplan.rotateRight=true;

  break;

  case 37:myplan.toLeft = true;

  break;

  case 38:myplan.toTop = true;

  break;

  case 39:myplan.toRight = true;

  break;

  case 40:myplan.toBottom = true;

  break;

  }

  }

  window.onkeyup = function(event){

  switch(event.keyCode){

  case 88:myplan.fire = false;

  break;

  case 90:myplan.rotateLeft=false;

  break;

  case 67:myplan.rotateRight=false;

  break;

  case 37:myplan.toLeft = false;

  break;

  case 38:myplan.toTop = false;

  break;

  case 39:myplan.toRight = false;

  break;

  case 40:myplan.toBottom = false;

  break;

  }

  }

  //飛機每一幀的狀態更新處理代碼

  execute:function(sprite,time){

  if(sprite.toTop){

  spritesprite.top = sprite.top

  }

  if(sprite.toLeft){

  spritesprite.left = sprite.left

  }

  if(sprite.toRight){

  spritesprite.left = sprite.left>canvas.width-planWidth/2? sprite.left : sprite.left+sprite.velocityX;

  }

  if(sprite.toBottom){

  spritesprite.top = sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top+sprite.velocityY;

  }

  if(sprite.rotateLeft){

  sprite.rotateAngle -= sprite.rotateSpeed;

  }

  if(sprite.rotateRight){

  sprite.rotateAngle += sprite.rotateSpeed;

  }

  if(sprite.fire&&!sprite.painter.isActive){

  sprite.painter.isActive = true;

  this.shot(sprite);

  }

  就是如此簡單。

  然後說下對象控制,打飛機游戲,會發射大量子彈,產生大量對象,包括爆炸啊,飛機啊,子彈等,如果不停地進行對象的生成和銷毀,會讓浏覽器的負荷變得很大,運行了一段時間後就會卡出翔了。所以,我們要用可以循環利用的對象來解決這個問題,不進行對象的銷毀,對所有對象進行保存,循環利用。

  我的做法就是,在游戲初始化的時候,直接生成一定數量的對象,存放在數組裡面。當我們需要一個對象的時候,就從裡面取,當用完後,再放回數組裡面。數組裡的所有對象都有一個屬性,visible,代表對象當前是否可用。

  舉個例子,當我的飛機發射一發炮彈,我需要一發炮彈,所以我就到炮彈數組裡遍歷,如果遍歷到的炮彈visible為true,也就說明該對象正在使用著,不能拿來用,所以繼續遍歷,直到遍歷到visible為false的炮彈對象,說明這個對象暫時沒人用。然後就可以拿過來重新設置屬性,投入使用了。當炮彈擊中敵人或者打出畫布外的時候,把炮彈的visible設成false,又成了一個沒人用的炮彈在數組裡存放起來等待下一次調用。

  所以,我們要預算算好頁面大概要用到多少個對象,然後就預先准備好對象,這樣,在游戲進行中,不會有對象進行生成和銷毀,對游戲性能方面就有了提升了。

  最後再說下音頻,游戲裡面要用到多個同樣的audio才能保證音效的不間斷性:

  復制代碼

  XML/HTML Code復制內容到剪貼板

  var audio = document.getElementsByTagName("audio");

  for(var i=0;i

  console.log(audio[i].paused)

  if(audio[i].src.indexOf("boom")>=0&&audio[i].paused){

  audio[i].play();

  break;

  }

  }

  好吧,基本上就這樣了。技術或許還不夠好,純碎做個記錄,如果代碼有不當正處,歡迎指出,共同學習。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved