HTML5画布游戏随机图像

กก第1＆2章ขึ้จะได้จะได้จะได้Canมใใในใน第3章นChapterราจะมาลองRandomรูปภาูปภาแบบสุ่มกัน

ำไปไว้ที่ารดาวโหลดรูปแมวและนำไปไว้ที่图像文件夹

• BeanBagglz：面向儿童，成人和家庭的终极33合1投掷游戏
• 甜蜜糖果狂热-我可以玩几个小时的糖果比赛3游戏
• 练习目标的最佳方法
• Neyin nesi bu'STEAM'吗？
• 在巴基斯坦在线购买游戏

วโหลดได้ที่ามารถดาวโหลดได้ที่我的猫

งร้างJavaScript文件ตั้งชื่อCat.jsและสร้างฟังก์ชั่นCat（）;

 函数Cat（canvas，x，y）{ 
  this.canvas = canvas; 
  this.ctx = canvas.getContext（“ 2d”）; 
  this.x = x; 
  this.y = y; 
  this.width = 50; 
  this.height = 50; 
  this.image = new Image（）; 
  } 

Randomาร随机รูปแมวนในจะใช้คำสั่งMath.random（）ในการสุ่ม

 函数Cat（canvas，x，y）{ 
  this.canvas = canvas; 
  this.ctx = canvas.getContext（“ 2d”）; 
  this.x = x; 
  this.y = y; 
  this.width = 50; 
  this.height = 50; 
  this.image = new Image（）; 
  this.image.src =“ ./image/cat"+(Math.floor((Math.random()*22))+1)+".png”; 
  } 

งร้าง方法更新และสั่งให้แมวตกลงมา

  Cat.prototype.update = function（dt）{ 
  this.y + = 100 * dt;}; 

renderร้าง方法渲染

  Cat.prototype.render = function（）{ 
  var ctx = this.ctx; 
  ctx.drawImage（this.image，this.x，this.y，this.width，this.height）; 
  }; 

保存และกลับไปที่Main.jsเพื่อเรียกใช้งานทำการประกาศArray

  var catsArr = []; 

ไปที่ฟังก์ชั่น渲染ทำการสั่ง渲染แมวน循环

  var render = function（）{ 
  ctx.drawImage（image，0,0，canvas.width，canvas.height）; 
  Plate.render（）; 
  for（var i = 0; i <catsArr.length; i ++）{ 
  catsArr [i] .render（）; 
  } 
  }; 

updateน更新โดยเราจะสั่งให้随机แมวทุกๆ0.7วินาทีดังนั้นให้ทำการสร้างตัวแปร时间

  var time = 0; 

Update UpdateทุกๆUpdate Updateแมวเพิ่มเข้แมวเพิ่มเข้Update Update Updateวิ0.7วินาที

สังเกตที่คำสั่ง推จะเป็นการเรียก对象โดยกำหนดค่าเอาไว้แบบ随机ตำแหน่งบนหน้าจอ

  var update = function（dt）{ 
  Plate.update（dt）;时间+ = dt; 
  if（时间> = 0.7）{ 
 时间= 0; 
  catsArr.push（new Cat（canvas，Math.floor（（Math.random（）*（canvas.width-50））），-50）） 
  } canvas.setAttribute（'tabindex'，'0'）; 
  canvas.focus（）; 
  }; 

Updateากนั้นให้ทำการเรียกใช้方法更新ในCat

  var update = function（dt）{ 
  Plate.update（dt）;时间+ = dt; 
  if（时间> = 0.7）{ 
 时间= 0; 
  catsArr.push（new Cat（canvas，Math.floor（（Math.random（）*（canvas.width-50））），-50）） 
  } for（var i = 0; i <catsArr.length; i ++）{ 
  catsArr [i] .update（dt）; 
  } canvas.setAttribute（'tabindex'，'0'）; 
  canvas.focus（）; 
  }; 

กใช้รียกใช้JavaScriptsบนhtml

รันhtmlแมวจะต้องตกลงมาแบบ随机