MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

球板及键盘控制

这篇翻译不完整。请帮忙从英语翻译这篇文章

这是Gamedev Canvas tutorial中的第四章。You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson4.html.

你可以看到球自由的、无限次的在墙壁上反弹,但是没有和我们发生任何交互。如果我们没有对它的控制操作,这仍然不是一个游戏。下面,我们新增一些用户操作:一个可以控制球的球板。

定义一个球板去接球

我们需要添加一个球板去接球:为此需要先定义一些变量。在你的代码的顶部的其它变量下方添加下列代码:

var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;

然后定义球拍的长和宽,以及为了之后的处理同时定义x轴上的初始位置。新建一个方法来在页面上描绘球板。把下列代码添加到你的drawBall()方法里去

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

允许用户控制球板

我们可以如愿的描绘出球板,也需让它听从用户的控制。是时候实现用键盘控制它了。我们需要:

  • 两个变量以保存左右方向键是否被按下的信息。
  • 两个事件监控器来捕捉按键的按下和松开动作。我们需要运行一些代码以在按键被按下时可以控制球拍的移动
  • 两个用于处理按键被按下或松开后的事件处理方法
  • 实现左右移动球拍

按键可以使用boolean变量来初始定义。在你的其它变量附近添加下列代码:

var rightPressed = false;
var leftPressed = false;

这两个变量的默认值都是false,因为在开始时按键没有被按下。为了监听按键的按下动作,我们需要添加两个监听器。把下列代码添加到底部的setInterval()的上一列去:

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

当你按下任何键盘上的按键,按下事件被激活时keyDownHandler()方法会被调用。对于松开时的处理也是类似的:当松开按键时keyUpHandler()方法会被调用。把下列代码添加到addEventListener()下方

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
}

当按下一个按键,这个信息会被储存在一个变量中。The relevant variable in each case is set to true. When the key is released, the variable is set back to false.

Both functions take an event as a parameter, represented by the e variable. From that you can get useful information: the keyCode holds the information about the key that was pressed. For example key code 37 is the left cursor key and 39 is the right cursor. If the left cursor is pressed, then the leftPressed variable is set to true, and when it is released the leftPressed variable is set to false. The same pattern follows with the right cursor and the rightPressed variable.

球拍移动逻辑

We now have the variables for storing the info about the pressed keys, event listeners and relevant functions set up. Now we'll get onto the actual code to use all that and move the paddle on the screen. Inside the draw() function, we will check if the left or right cursor keys are pressed when each frame is rendered. Our code might look like this:

if(rightPressed) {
    paddleX += 7;
}
else if(leftPressed) {
    paddleX -= 7;
}

If the left cursor is pressed, the paddle will move 7 pixels to the left, and if the right cursor is pressed, the paddle will move 7 pixels to the right. This currently works ok, but the paddle disappears off the edge of the canvas if we hold either key for too long. We could improve that and move the paddle only within the boundaries of the Canvas by changing the code as follows:

if(rightPressed && paddleX < canvas.width-paddleWidth) {
    paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
    paddleX -= 7;
}

The paddleX position we're using will move between 0 on the left side of the Canvas and canvas.width-paddleWidth on the right hand side, which will work exactly as we want it.

Add the above code block into the draw() function at the bottom, just above the closing curly brace.

The only thing left to do now is call the drawPaddle() function from within the draw() function, to actually print it on the screen. Add the following line inside your draw() function, just below the line that calls drawBall():

drawPaddle();

比较你的代码

Here's the working code for you to compare yours against:

Exercise: make the paddle move faster or slower, or change its size.

下一步

Now we have something resembling a game; the only trouble now is that you can just continue hitting ball with the paddle forever. This will all change in the fifth chapter, Game over, when we start to add in an endgame state for our game.

文档标签和贡献者

 此页面的贡献者: longzhengxiong, lixuanh
 最后编辑者: longzhengxiong,