Trình điều khiển game
- Trang trước Thành phần game
- Trang tiếp theo Kháng cự game
按下按钮可移动红色方块：
掌控一切
现在我们要控制红色方块。
添加四个按钮：上、下、左、右。
为每个按钮编写一个函数，以沿选定方向移动组件。
trong component 构造函数中创建两个新属性，并将它们命名为 speedX và speedY。这些属性被用作速度指示器。
trong component 构造函数中添加一个名为 newPos() 的函数，该函数使用 speedX và speedY 属性来更改组件的位置。
在绘制组件之前，从 updateGameArea 函数调用 newPos 函数：
thực thể
<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()">TRÊN</button>
<button onclick="movedown()">DƯỚI</button>
<button onclick="moveleft()">TRÁI</button>
<button onclick="moveright()">PHẢI</button>
dừng di chuyển
Nếu cần, bạn có thể dừng khối đỏ khi nhả nút.
Thêm một hàm để thiết lập chỉ số tốc độ thành 0.
Để đối phó với màn hình thông thường và màn hình chạm, chúng ta sẽ thêm mã cho cả hai thiết bị này:
thực thể
function stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">TRÊN</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">DƯỚI</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">TRÁI</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">PHẢI</button>
bàn phím làm bộ điều khiển
Chúng ta có thể sử dụng phím mũi tên trên bàn phím để kiểm soát khối đỏ.
tạo một phương thức để kiểm tra xem phím nào được nhấn và sẽ myGameArea của đối tượng key thuộc tính được thiết lập thành mã phím. Khi nhả phím, sẽ key thuộc tính được thiết lập thành false：
thực thể
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);
}
}
Vậy, nếu nhấn một phím hướng dẫn nào đó, chúng ta có thể di chuyển khối đỏ:
thực thể
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
nếu (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
nếu (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
nếu (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
nếu (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}
Nhấn nhiều phím
Làm thế nào nếu nhấn nhiều phím cùng một lúc?
trong ví dụ trên, thành phần chỉ có thể di chuyển theo hướng ngang hoặc dọc. Bây giờ chúng ta muốn thành phần cũng có thể di chuyển theo đường chéo.
cho myGameArea tạo một keys mảng, và thêm một phần tử cho mỗi phím được nhấn, và gán giá trị cho nó trueđể giữ giá trị là true cho đến khi không nhấn phím nào, giá trị này trong keyup hàm nghe sự kiện trong sự kiện lắng nghe của chúng ta sẽ thay đổi thành false：
thực thể
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;
nếu (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
nếu (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
nếu (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 điều khiển
Nếu bạn muốn sử dụng con trỏ chuột để điều khiển khối đỏ, hãy trong myGameArea Thêm một phương thức vào đối tượng để cập nhật tọa độ x và y của con trỏ chuột:
thực thể
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.canvas.style.cursor = "none"; //ẩn con trỏ ban đầu
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ể sử dụng con trỏ chuột để di chuyển khối đỏ:
thực thể
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Chạm màn hình để điều khiển trò chơi
Chúng ta có thể điều khiển khối đỏ trên màn hình chạm:
trong myGameArea Thêm một phương thức vào đối tượng, phương thức này sử dụng tọa độ x và y của vị trí chạm màn hình:
thực thể
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 đó, khi người dùng chạm màn hình, chúng ta có thể sử dụng mã tương tự như con trỏ chuột để di chuyển khối đỏ:
thực thể
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Điều khiển trên canvas
Chúng ta có thể vẽ các nút của riêng mình trên canvas và sử dụng chúng làm điều khiển:
thực thể
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 hàm mới để xác định thành phần nào đó (trong ví dụ này là một nút) có bị nhấp hay không.
trước hết thêm bộ lắng nghe sự kiện để kiểm tra xem có nhấp vào nút chuột hay không (mousedown và mouseup）。Để đối phó với màn hình chạm, bạn cần thêm bộ lắng nghe sự kiện để kiểm tra xem màn hình có bị nhấp hay không (touchstart và touchend）：
thực thể
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ó thuộc tính có thể cho chúng ta biết tọa độ x và y của cú nhấp. Chúng ta sử dụng các thuộc tính này để kiểm tra xem có thực hiện cú nhấp trên một trong các nút xanh của chúng ta hay không.
phương thức mới này được gọi là clickedlà component Một phương thức của hàm构造函数, nó kiểm tra thành phần có bị nhấp chuột hay không.
trong updateGameArea Trong hàm, nếu单击 một trong các nút xanh lá cây, chúng ta sẽ thực hiện các bước cần thiết:
thực thể
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();
}
- Trang trước Thành phần game
- Trang tiếp theo Kháng cự game
