遊戲控制器
按下按鈕移動紅色方塊
掌握控制
現在我們想要控制紅色方塊。
新增四個按鈕：上、下、左、右。
為每個按鈕編寫一個函式，以指定的方向移動元件。
在 component 建構函式中新增兩個新屬性，並將其命名為 speedX 和 speedY。這些屬性用作速度指示器。
在 component 建構函式中新增一個名為 newPos() 的函式，該函式使用 speedX 和 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()">上</button>
<button onclick="movedown()">下</button>
<button onclick="moveleft()">左</button>
<button onclick="moveright()">右</button>
自己動手試一試 »
停止移動
如果您願意，可以在釋放按鈕時讓紅色方塊停止。
新增一個函式來將速度指示器設定為 0。
為了同時處理普通螢幕和觸控式螢幕，我們將為這兩個裝置新增程式碼
示例
function stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">上</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">下</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">左</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">右</button>
自己動手試一試 »
鍵盤作為控制器
我們也可以透過使用鍵盤上的箭頭鍵來控制紅色方塊。
建立一個方法來檢查是否按下了某個鍵，並將 myGameArea 物件的 key 屬性設定為鍵碼。當釋放按鍵時，將 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();
}
自己動手試一試 »
同時按下多個鍵
如果同時按下多個鍵怎麼辦？
在上面的示例中，元件只能水平或垂直移動。現在我們希望元件也能對角線移動。
為 myGameArea 物件建立一個 keys 陣列，為按下的每個鍵插入一個元素，並將其值設定為 true，該值會一直保持為 true 直到按鍵不再被按下，在 keyup 事件監聽器函式中，該值變為 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"; //隱藏原始游標
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 物件具有指示單擊座標的屬性。我們使用這些屬性來檢查單擊是否發生在我們的藍色按鈕之一上。
新方法名為 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();
}
自己動手試一試 »
