Controlador de juego
- Página anterior Componentes de juego
- Página siguiente Obstáculo de juego
按下按钮可移动红色方块：
掌控一切
现在我们要控制红色方块。
添加四个按钮：上、下、左、右。
为每个按钮编写一个函数，以沿选定方向移动组件。
在 component 构造函数中创建两个新属性，并将它们命名为 speedX y speedY。这些属性被用作速度指示器。
在 component 构造函数中添加一个名为 newPos() 的函数，该函数使用 speedX y 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()">ARRIBA</button>
<button onclick="movedown()">ABAJO</button>
<button onclick="moveleft()">IZQUIERDA</button>
<button onclick="moveright()">DERECHA</button>
Detener el movimiento
Si es necesario, puede hacer que el cuadrado rojo se detenga al soltar el botón.
Añadir una función que establezca el indicador de velocidad en 0.
Para hacer frente a pantallas normales y táctiles, agregaremos código para ambos dispositivos:
实例
function stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">ARRIBA</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">ABAJO</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">IZQUIERDA</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">DERECHA</button>
teclado como controlador
también podemos controlar el cuadrado rojo con las teclas de dirección del teclado.
crea un método para verificar si se ha pulsado alguna tecla y luego myGameArea objeto key propiedades establecidas como código de tecla. Al soltar el botón, se key propiedades establecidas como 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"; //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();
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();
}
Agregar una nueva función para determinar si se ha hecho clic en un componente (en este caso, un botón).
Primero, agrega un escucha de eventos para verificar si se ha hecho clic en el botón del ratón (mousedown y mouseup）。Para manejar pantallas táctiles, también es necesario agregar un escucha de eventos para verificar si se ha realizado un clic en la pantalla (touchstart y 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);
}
}
Ahora myGameArea El objeto tiene propiedades que nos pueden decir las coordenadas x e y del clic. Usamos estas propiedades para verificar si se ha realizado un clic en uno de nuestros botones azules.
Este nuevo método se llama clickedes component Un método de constructor que verifica si el componente ha sido clicado.
在 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();
}
- Página anterior Componentes de juego
- Página siguiente Obstáculo de juego
