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 tôi 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 hàm tạo component và gọi chúng là speedX và speedY . Những thuộc tính này đang được sử dụng làm chỉ báo tốc độ.
Thêm một hàm trong hàm tạo component , được gọi là newPos() , sử dụng các thuộc tính speedX và 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:
Ví 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> Hãy tự mình thử » 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 nhả nút.
Thêm một chức năng sẽ đặt các chỉ báo tốc độ về 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ị:
Ví 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>
Hãy tự mình thử »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 tính key của đối tượng myGameArea thành mã khóa. Khi khóa được giải phóng, hãy đặt thuộc tính key thành false :
Ví 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 nhấn một trong các phím mũi tên:
Ví 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();
} Hãy tự mình thử »Đã nhấn nhiều phím
Điều gì sẽ xảy ra nếu nhấn nhiều phím cùng 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 này cũng di chuyển theo đường chéo.
Tạo một mảng keys cho đối tượng myGameArea và chèn một phần tử cho mỗi phím được nhấn và đặt cho nó giá trị true , giá trị vẫn đúng cho đến khi không còn nhấn phím nữa, giá trị trở thành false trong hàm nghe sự kiện keyup :
Ví 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();
} Hãy tự mình thử »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 đối tượng myGameArea để cập nhật tọa độ x và y của con trỏ chuột:.
Ví 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 con trỏ chuột:
Ví dụ
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
} Hãy tự mình thử »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 ô vuông màu đỏ trên màn hình cảm ứng.
Thêm một phương thức trong đối tượng myGameArea sử dụng tọa độ x và y của nơi màn hình được chạm vào:
Ví 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:
Ví dụ
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Hãy tự mình thử »Bộ điều khiển trên Canvas
Chúng ta cũng có thể vẽ các nút của riêng mình trên khung vẽ và sử dụng chúng làm bộ điều khiển:
Ví 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ó được nhấp vào hay không.
Bắt đầu bằng cách thêm trình xử lý sự kiện để kiểm tra xem nút chuột có được nhấp hay không ( mousedown và mouseup ). Để xử lý màn hình cảm ứng, hãy thêm trình xử lý sự kiện để kiểm tra xem màn hình có được nhấp vào không ( touchstart và touchend ):
Ví 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ờ đối tượng myGameArea 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 là clicked , nó là một phương thức của hàm tạo component và nó kiểm tra xem thành phần đó có được nhấp vào hay không.
Trong chức năng updateGameArea , chúng tôi thực hiện các hành động cần thiết nếu nhấp vào một trong các nút màu xanh lam:
Ví 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();
} Hãy tự mình thử »