Game Controllers
- Previous Page Game Components
- Next Page Game Obstacles
按下按钮可移动红色方块：
掌控一切
现在我们要控制红色方块。
添加四个按钮：上、下、左、右。
为每个按钮编写一个函数，以沿选定方向移动组件。
sa component 构造函数中创建两个新属性，并将它们命名为 speedX at speedY。这些属性被用作速度指示器。
sa component 构造函数中添加一个名为 newPos() 的函数，该函数使用 speedX at speedY 属性来更改组件的位置。
在绘制组件之前，从 updateGameArea 函数调用 newPos 函数：
实例
<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>
鍵盤作為控制器
我們還可以通過鍵盤上的方向鍵來控制紅色方塊。
創建一個方法來檢查是否按下了某個鍵，並將 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);
}
}
sa ganito, kung magpinindot ng alinman sa mga arrow key, maaari naming ililipat ang puting bloke:
实例
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
kung ang (myGameArea.key at ang myGameArea.key == 37) {myGamePiece.speedX = -1; }
kung ang (myGameArea.key at ang myGameArea.key == 39) {myGamePiece.speedX = 1; }
kung ang (myGameArea.key at ang myGameArea.key == 38) {myGamePiece.speedY = -1; }
kung ang (myGameArea.key at ang myGameArea.key == 40) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}
magpinindot ng ilang key
ano kung magkakasalungat ang ilang key na pinindot?
sa itaas na halimbawa, ang komponente ay puwedeng ililipat sa pahaba o sa taas lamang. Ngayon ay gusto naming ang komponente ay makalilipat din sa diagonal. Kung ano kung magkakasalungat ang ilang key na pinindot? Magpinindot ng ilang key
para sa myGameArea ang object ay gumawa ng isang keys ang array, at magdagdag ng isang elemento para sa bawat na inililipat na key at magtatalaga ng halaga true，ang halaga ay mananatili sa true hanggang hindi na inililipat ang key，ang halaga ay sa keyup ang event listener function nagiging 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;
kung ang (myGameArea.keys at ang myGameArea.keys[37]) {myGamePiece.speedX = -1; }
kung ang (myGameArea.keys at ang myGameArea.keys[39]) {myGamePiece.speedX = 1; }
kung ang (myGameArea.keys at ang 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();
kung ang myGameArea.x && myGameArea.y, {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
触摸屏幕来控制游戏
我们还可以在触摸屏上控制红色方块。
sa 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();
kung ang 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();
}
Magdagdag ng isang bagong function na maghatid ng pananagot kung ang anumang komponente (sa kasalukuyan ay isang button) ay na-click.
Unang magdagdag ng event listener upang suriin kung ang mouse button ay na-click (mousedown at mouseup）。Para tumugon sa touchscreen, kailangang magdagdag ng event listener upang suriin kung ang screen ay na-click (touchstart at 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);
}
}
Ngayon myGameArea Ang objekto ay may mga katangian na nagbibigay ng x at y coordinates ng klik. Ginagamit namin ang mga katangian na ito upang suriin kung isang click ay ginawa sa aming isa sa mga asul na button.
Ang bagong paraan na tinatawag na clicked，na component Isang paraan ng constructor na nagpapatyak na ang komponente ay na-click.
sa updateGameArea sa function, kung ang isang button na blue ang tinatanggap, gagawin namin ang kinakailangang aksyon:
实例
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;
kung ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)), {
clicked = false;
}
return clicked;
}
}
function updateGameArea() {
myGameArea.clear();
kung ang myGameArea.x && myGameArea.y, {
kung ang myUpBtn.clicked(), {
myGamePiece.y -= 1;
}
kung ang myDownBtn.clicked(), {
myGamePiece.y += 1;
}
kung ang myLeftBtn.clicked(), {
myGamePiece.x += -1;
}
kung ang myRightBtn.clicked(), {
myGamePiece.x += 1;
}
}
myUpBtn.update();
myDownBtn.update();
myLeftBtn.update();
myRightBtn.update();
myGamePiece.update();
}
- Previous Page Game Components
- Next Page Game Obstacles
