HTML5 Canvas Game Movement

Chapter 2: [Tutorial] How to Move Plate

จาก Chapter 1 เราจะได้ Background ส่วนใน Chapter 2 นี้เราจะมาสร้าง Plate และมาทำให้มันเคลื่อนไหวกัน

ให้ทำการดาวโหลดรูป Plate และนำไปไว้ที่ image folder

ดาวโหลด Plate ได้ที่ pngtree.com

สร้าง JavaScript File ตั้งชื่อ Plate.js และสร้างฟังก์ชั่น Plate();

function Plate(canvas,x,y){
 this.canvas = canvas;
 this.ctx = canvas.getContext("2d");
 this.x = x;
 this.y = y;
 this.width = 100;
 this.height = 70;
 this.image = new Image();
 this.image.src = "./image/Plate.png";
}

สร้าง Method Update

Plate.prototype.update = function(dt) {

};

สร้าง method render

//Draw Plate
Plate.prototype.render = function(){
 var ctx = this.ctx;
 ctx.drawImage(this.image,this.x,this.y,this.width,this.height);
};

ให้ทำการ Save และกลับไปที่ Main.js ให้ทำการวาด Plate โดยใช้คำสั่ง

var Plate = new Plate(canvas, canvas.width/2, canvas.height-100);

และเพิ่ม Plate.render(); ไปในฟังก์ชั่น render();

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var Plate = new Plate(canvas, canvas.width/2, canvas.height-100);
var image = new Image();
image.src = "./image/bg1.jpg";
var render = function(){
 ctx.drawImage(image,0,0,canvas.width,canvas.height); 
 Plate.render();
};
var main = function(){
 render();
requestAnimationFrame(main);
};
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.WebkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
main();

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

<script type="text/javascript" src="./Plate.js"></script>

กดเปิด html จะต้องได้ตามนี้

เมื่อเราได้ Plate ขึ้นมาแสดงแล้ว เราจะมาทำให้ Plate เคลื่อนไปตามแนวแกน x โดยกดปุ่ม A, D และลูกศร ซ้าย, ขวา บน Keyboard

ทำการเรียกใช้ Event Keydown และประกาศตัวแปร k เพื่อรับค่า key Code

canvas.addEventListener("keydown",function(e){
 var k = e.keyCode;

},false);

สร้างเงื่อนไขเมื่อกดปุ่มซ้าย และขวา และกำหนดระยะทางที่ 10

canvas.addEventListener("keydown",function(e){
 var k = e.keyCode;
 if (k === 37 || k === 65) {
  Plate.x -= 10;
 }
 else if (k === 39 || k === 68) {
  Plate.x += 10;
 }
},false);

สร้างฟังก์ชั่น Update();

var update = function(dt){
 canvas.setAttribute('tabindex','0');
 canvas.focus();
};

ประกาศตัวแปร then และเก็บค่า Date time ปัจจุบันไว้

var then = Date.now();

เรียกใช้ฟังก์ชั่น Update ที่ Main();

var main = function(){
  var now = Date.now();
  var delta = now - then;
  update(delta/1000);
  render();
  then = now;
  requestAnimationFrame(main);
};

จากนั้นลองรันบน html Plate ของเราจะต้องสามารถเคลื่อนไหวได้

เราจะพบว่า Plate ของเราสามารถเคลื่อนไหวออกไปนอกจอเกมได้ ดังนั้นให้เรากลับไปที่ Plate.js ของเราไปที่ Method Update และใส่เงื่อนไขดังนี้

Plate.prototype.update = function(dt) {
 if(this.x < 0){
  this.x = 0;
 }
 if(this.x + this.width > this.canvas.width){
  this.x = this.canvas.width - this.width;
 }
};

จากนั้นกลับไปที่ Main.js ไปที่ ฟังก์ชั่น Update(); เรียกใช้งาน Plate.render();

var update = function(dt){
 Plate.update(dt);
 canvas.setAttribute('tabindex','0');
 canvas.focus();
};

จากนั้นให้ลองรันบน html อีกครั้งแล้วทดสอบ Plate จะต้องไม่ออกนอกฉาก

Chapter 1: Intro and Background

Chapter 2: [Tutorial] How to Move Plate

Chapter 3: [Tutorial] How to random cat

Chapter 4: [Tutorial] How to make scoring system

Chapter 5: [Tutorial] How to make Game Over