javascriptの図面を右下に移動するにはどうすればいいですか？

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

ボールを上下左右に移動します。 X_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 
    } 
} 

のY_POSのグローバル変数を使用ここでfiddle