ตัวควบคุมเกม
กดปุ่มเพื่อย้ายสี่เหลี่ยมสีแดง:
เข้าควบคุม
ตอนนี้เราต้องการควบคุมสี่เหลี่ยมสีแดง
เพิ่มสี่ปุ่ม ขึ้น ลง ซ้าย และขวา
เขียนฟังก์ชันสำหรับแต่ละปุ่มเพื่อย้ายส่วนประกอบไปในทิศทางที่เลือก
สร้างคุณสมบัติใหม่สองตัวในตัวcomponentสร้าง และเรียกคุณสมบัติเหล่านั้น
speedX
และspeedY. คุณสมบัติเหล่านี้ถูกใช้เป็นตัวบ่งชี้ความเร็ว
เพิ่มฟังก์ชันในตัวcomponentสร้างที่เรียกว่า
newPos()ซึ่งใช้speedXand speedY
คุณสมบัติเพื่อเปลี่ยนตำแหน่งของส่วนประกอบ
ฟังก์ชัน newpos ถูกเรียกจากฟังก์ชัน updateGameArea ก่อนวาดส่วนประกอบ:
ตัวอย่าง
<script>
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
}
function moveup() {
myGamePiece.speedY -= 1;
}
function movedown() {
myGamePiece.speedY += 1;
}
function moveleft() {
myGamePiece.speedX -= 1;
}
function moveright() {
myGamePiece.speedX += 1;
}
</script>
<button onclick="moveup()">UP</button>
<button onclick="movedown()">DOWN</button>
<button onclick="moveleft()">LEFT</button>
<button onclick="moveright()">RIGHT</button>
หยุดเคลื่อนไหว
หากต้องการ คุณสามารถทำให้สี่เหลี่ยมสีแดงหยุดเมื่อคุณปล่อยปุ่ม
เพิ่มฟังก์ชันที่จะตั้งค่าตัวแสดงความเร็วเป็น 0
เพื่อจัดการกับทั้งหน้าจอปกติและหน้าจอสัมผัส เราจะเพิ่มรหัสสำหรับอุปกรณ์ทั้งสอง:
ตัวอย่าง
function stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">UP</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">DOWN</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">RIGHT</button>
คีย์บอร์ดเป็นคอนโทรลเลอร์
นอกจากนี้เรายังสามารถควบคุมสี่เหลี่ยมสีแดงโดยใช้ปุ่มลูกศรบนแป้นพิมพ์
สร้างวิธีการที่ตรวจสอบว่ามีการกดปุ่มหรือไม่ และตั้งค่าkey
คุณสมบัติของmyGameAreaวัตถุให้เป็นรหัสคีย์ เมื่อปล่อยคีย์ ให้ตั้งค่าkeyคุณสมบัติเป็นfalse:
ตัวอย่าง
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function (e) {
myGameArea.key = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
จากนั้นเราสามารถย้ายสี่เหลี่ยมสีแดงได้หากกดปุ่มลูกศรอันใดอันหนึ่ง:
ตัวอย่าง
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}
กดปุ่มหลายปุ่ม
จะเกิดอะไรขึ้นหากกดปุ่มมากกว่าหนึ่งปุ่มพร้อมกัน?
ในตัวอย่างข้างต้น ส่วนประกอบสามารถเคลื่อนที่ได้ในแนวนอนหรือแนวตั้งเท่านั้น ตอนนี้เราต้องการให้ส่วนประกอบเคลื่อนที่ในแนวทแยงมุมด้วย
สร้าง
keys อาร์เรย์สำหรับmyGameAreaออบเจกต์ และแทรกหนึ่งองค์ประกอบสำหรับแต่ละคีย์ที่กด และให้ค่าtrueค่ายังคงเป็นจริงจนกว่าจะไม่มีการกดคีย์อีกต่อไป ค่าจะกลายเป็น
falseฟังก์ชันฟังเหตุการณ์คีย์ อัพ:
ตัวอย่าง
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = true;
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}
การใช้เคอร์เซอร์ของเมาส์เป็นตัวควบคุม
หากคุณต้องการควบคุมสี่เหลี่ยมสีแดงโดยใช้เคอร์เซอร์ของเมาส์ ให้เพิ่มเมธอดในmyGameAreaออบเจ็กต์ที่อัปเดตพิกัด x และ y ของเคอร์เซอร์ของเมาส์:
ตัวอย่าง
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.canvas.style.cursor = "none"; //hide the original cursor
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('mousemove', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
จากนั้นเราสามารถย้ายสี่เหลี่ยมสีแดงโดยใช้เคอร์เซอร์ของเมาส์:
ตัวอย่าง
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
แตะหน้าจอเพื่อควบคุมเกม
นอกจากนี้เรายังสามารถควบคุมสี่เหลี่ยมสีแดงบนหน้าจอสัมผัส
เพิ่มวิธีการในmyGameAreaวัตถุที่ใช้พิกัด x และ y ของตำแหน่งที่สัมผัสหน้าจอ:
ตัวอย่าง
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('touchmove', function (e) {
myGameArea.x = e.touches[0].screenX;
myGameArea.y = e.touches[0].screenY;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
จากนั้น เราสามารถย้ายสี่เหลี่ยมสีแดงถ้าผู้ใช้สัมผัสหน้าจอ โดยใช้รหัสเดียวกับที่เราทำสำหรับเคอร์เซอร์ของเมาส์:
ตัวอย่าง
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
ตัวควบคุมบนผ้าใบ
เรายังสามารถวาดปุ่มของเราเองบนผืนผ้าใบ และใช้เป็นตัวควบคุมได้:
ตัวอย่าง
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myUpBtn = new component(30, 30, "blue", 50, 10);
myDownBtn = new component(30, 30, "blue", 50, 70);
myLeftBtn = new component(30, 30, "blue", 20, 40);
myRightBtn = new component(30, 30, "blue", 80, 40);
myGameArea.start();
}
เพิ่มฟังก์ชันใหม่ที่ระบุว่าส่วนประกอบ ในกรณีนี้คือปุ่ม ถูกคลิกหรือไม่
เริ่มต้นด้วยการเพิ่มตัวฟังเหตุการณ์เพื่อตรวจสอบว่ามีการคลิกปุ่มเมาส์ ( mousedownและmouseup) หรือไม่ ในการจัดการกับหน้าจอสัมผัส ให้เพิ่มตัวฟังเหตุการณ์ด้วยเพื่อตรวจสอบว่ามีการคลิกหน้าจอหรือไม่ ( touchstartและtouchend):
ตัวอย่าง
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('mousedown', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
window.addEventListener('mouseup', function (e) {
myGameArea.x = false;
myGameArea.y = false;
})
window.addEventListener('touchstart', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
window.addEventListener('touchend', function (e) {
myGameArea.x = false;
myGameArea.y = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
ตอนนี้myGameAreaวัตถุมีคุณสมบัติที่บอกพิกัด x และ y ของการคลิกให้เราทราบ เราใช้คุณสมบัติเหล่านี้เพื่อตรวจสอบว่ามีการคลิกบนปุ่มสีน้ำเงินปุ่มใดปุ่มหนึ่งของเราหรือไม่
วิธีการใหม่นี้เรียกว่าclickedเป็นวิธีการของตัว
componentสร้าง และตรวจสอบว่ามีการคลิกส่วนประกอบหรือไม่
ในupdateGameAreaฟังก์ชันนี้ เราจะดำเนินการที่จำเป็นหากมีการคลิกปุ่มสีน้ำเงินปุ่มใดปุ่มหนึ่ง:
ตัวอย่าง
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.clicked = function() {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var clicked = true;
if ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
clicked = false;
}
return clicked;
}
}
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
if (myUpBtn.clicked()) {
myGamePiece.y -= 1;
}
if (myDownBtn.clicked()) {
myGamePiece.y += 1;
}
if (myLeftBtn.clicked()) {
myGamePiece.x += -1;
}
if (myRightBtn.clicked()) {
myGamePiece.x += 1;
}
}
myUpBtn.update();
myDownBtn.update();
myLeftBtn.update();
myRightBtn.update();
myGamePiece.update();
}