Question

我想知道如何向右和向左移动红球（我已经做过，但它不起作用）以及如何上下移动它。

<canvas id="canvas" width="480" height="320"></canvas>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ball;
var obstacle;
var x = canvas.width / 2;
var y = canvas.height / 2;
var dx = 2;
var dy = -2;
var redballRadius = 10;
var ballRadius = 20;
var rightpressed = false;
var leftpressed = false;
var ballX = (canvas.width - redballDiameter) / 2;
var redballDiameter = redballRadius * 2;

function startGame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ball = new drawBall(30, 30, 'red', 20, 10);
    obstacle = new drawObstacle(40, 30, 'blue', 15, 10);
    if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }
    if(rightpressed && ballX < canvas.width-redballDiameter) {
        ballX += 7;
    }
    else if(leftpressed && ballX > 0) {
        ballX -= 7;
    }
}

//keyboard controls
document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);

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;
    }
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(30, 30, 15, 0, 2 * Math.PI);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();


}

function drawObstacle() {
    x += dx;
    y += dy;
    ctx.beginPath();
    ctx.arc(x, y, 20, 10, 1 * Math.PI);
    ctx.fillStyle = 'blue';
    ctx.fill();
    ctx.closePath();
}

setInterval(startGame, 10);

我基本上想知道如何用键向右和向左移动它。感谢

Answer 1

我看了你的代码。在您的生命周期中，您正在呼叫drawBall，现在确定您要在那里使用new做什么。无论如何，我更新了函数以使用ballX您的密钥处理逻辑更新。

function drawBall() {
    ctx.beginPath();
    ctx.arc(ballX, 30, 15, 0, 2 * Math.PI);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();
}

这是工作码笔。 http://codepen.io/poda/pen/aNPPEp

Answer 2

将球向上，向下，向右和向左移动。

使用object比使用x_pos的全局变量和球的y_pos更好

function drawBall() {
  this.ball_x = 30;
  this.ball_y = 30;

  this.draw = function() {
    ctx.beginPath();
    ctx.arc(this.ball_x, this.ball_y, 15, 0, 2 * Math.PI);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();
  },
  this.move = function() {
    if(rightpressed && this.ball_x < canvas.width-redballDiameter) {
        this.ball_x += 5;
    }
    else if(leftpressed && this.ball_x > redballDiameter) {
        this.ball_x -= 5;
    }
    else if(uppressed && this.ball_y > redballDiameter) {
        this.ball_y -= 5;
    }
    else if(downpressed && this.ball_y < canvas.height - redballDiameter) {
        this.ball_y += 5;
    }
  },
  this.collision = function() {
    //stuff
  }
}

这里是fiddle

如何在javascript中向右和向左移动绘图

2 个答案: