Bộ điều khiển trò chơi
Nhấn các nút để di chuyển hình vuông màu đỏ:
Kiểm soát
Bây giờ chúng ta muốn kiểm soát hình vuông màu đỏ.
Thêm bốn nút, lên, xuống, trái và phải.
Viết hàm cho mỗi nút để di chuyển thành phần theo hướng đã chọn.
Tạo hai thuộc tính mới trong phương thức componentkhởi tạo và gọi chúng
speedX
và speedY. Các thuộc tính này đang được sử dụng làm chỉ số tốc độ.
Thêm một hàm trong hàm componenttạo, được gọi
newPos(), sử dụng các thuộc tính speedXvà speedY
để thay đổi vị trí của thành phần.
Hàm newpos được gọi từ hàm updateGameArea trước khi vẽ thành phần:
Thí dụ
<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>
Dừng di chuyển
Nếu muốn, bạn có thể làm cho hình vuông màu đỏ dừng lại khi bạn thả một nút.
Thêm một chức năng sẽ đặt các chỉ số tốc độ thành 0.
Để xử lý cả màn hình thường và màn hình cảm ứng, chúng tôi sẽ thêm mã cho cả hai thiết bị:
Thí dụ
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>
Bàn phím làm bộ điều khiển
Chúng ta cũng có thể điều khiển hình vuông màu đỏ bằng cách sử dụng các phím mũi tên trên bàn phím.
Tạo một phương thức kiểm tra xem một phím có được nhấn hay không và đặt thuộc key
tính của myGameAreađối tượng thành mã khóa. Khi khóa được phát hành, hãy đặt thuộc keytính thành false:
Thí dụ
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);
}
}
Sau đó, chúng ta có thể di chuyển hình vuông màu đỏ nếu một trong các phím mũi tên được nhấn:
Thí dụ
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();
}
Nhiều phím được nhấn
Điều gì xảy ra nếu nhiều phím được nhấn cùng một lúc?
Trong ví dụ trên, thành phần chỉ có thể di chuyển theo chiều ngang hoặc chiều dọc. Bây giờ chúng ta muốn thành phần cũng di chuyển theo đường chéo.
Tạo một
keys mảng cho myGameAreađối tượng và chèn một phần tử cho mỗi phím được nhấn và cung cấp giá trị cho nó true, giá trị vẫn đúng cho đến khi phím không được nhấn nữa, giá trị sẽ trở thành hàm lắng nghe sự kiện gõ
false phím :
Thí dụ
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();
}
Sử dụng Con trỏ chuột làm Bộ điều khiển
Nếu bạn muốn điều khiển hình vuông màu đỏ bằng cách sử dụng con trỏ chuột, hãy thêm một phương thức trong myGameAreađối tượng cập nhật tọa độ x và y của con trỏ chuột:.
Thí dụ
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);
}
}
Sau đó, chúng ta có thể di chuyển hình vuông màu đỏ bằng cách sử dụng con trỏ chuột:
Thí dụ
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Chạm vào màn hình để điều khiển trò chơi
Chúng ta cũng có thể điều khiển hình vuông màu đỏ trên màn hình cảm ứng.
Thêm một phương thức trong myGameAreađối tượng sử dụng tọa độ x và y của nơi màn hình được chạm vào:
Thí dụ
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);
}
}
Sau đó, chúng ta có thể di chuyển hình vuông màu đỏ nếu người dùng chạm vào màn hình, bằng cách sử dụng mã tương tự như chúng ta đã làm cho con trỏ chuột:
Thí dụ
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Bộ điều khiển trên Canvas
Chúng tôi cũng có thể vẽ các nút của riêng mình trên canvas và sử dụng chúng làm bộ điều khiển:
Thí dụ
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();
}
Thêm một chức năng mới để xác định xem một thành phần, trong trường hợp này là một nút, được nhấp vào.
Bắt đầu bằng cách thêm trình nghe sự kiện để kiểm tra xem nút chuột có được nhấp ( mousedownvà mouseup) hay không. Để đối phó với màn hình cảm ứng, hãy thêm trình nghe sự kiện để kiểm tra xem màn hình có được nhấp vào ( touchstartvà touchend) hay không:
Thí dụ
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);
}
}
Bây giờ myGameAreađối tượng có các thuộc tính cho chúng ta biết tọa độ x và y của một cú nhấp chuột. Chúng tôi sử dụng các thuộc tính này để kiểm tra xem nhấp chuột có được thực hiện trên một trong các nút màu xanh lam của chúng tôi hay không.
Phương thức mới được gọi clicked, nó là một phương thức của hàm
componenttạo, và nó kiểm tra xem thành phần có đang được nhấp hay không.
Trong updateGameAreahàm, chúng tôi thực hiện các hành động cần thiết nếu một trong các nút màu xanh lam được nhấp:
Thí dụ
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();
}