2017-09-12 35 views
1

スペースを押してボールを動かそうとしているが、どうやってそれを行うかわからない。Javascriptがボールを動かす

createjs libaryでバニラのJavascriptです。誰も私を助け、私に少しヒントを与えることができますか?

window.addEventListener('load', preload); 
var canvas = document.getElementById('myCanvas'); 

var stage, queue; 
var ball; 
var paddle; 
var settings = { 
    lives: 3, 
    points: 0, 
    speed: 3, 
    ballMovingSpeed: 7 
} 
var fingerDown = false; 
var keys = { 
    left: false, 
    right: false, 
    shoot: false 
} 
var ballSettings = { 
    ballRadius: 10, 
    dx: 2, 
    dy: -2 
} 
var canvasWidth = canvas.width; 
var canvasHeight = canvas.height; 



function preload() { 
    "use strict"; 
    stage = new createjs.Stage("myCanvas"); 
    queue = new createjs.LoadQueue(true); 
    createjs.Ticker.setFPS(60); 
    createjs.Ticker.addEventListener("tick", tickHappened); 
    drawPaddle(); 
    drawBall(); 
    window.addEventListener('keydown', keyDown); 
    window.addEventListener('keyup', keyUp); 
} 



function drawBall() { 
    "use strict" 
    ball = new createjs.Shape(); 
    ball.graphics.beginFill('red').drawCircle(0, 0, 10); 
    stage.addChild(ball); 
    ball.x = 400; 
    ball.y = 535; 
    canvasHeight += ballSettings.dy; 
    canvasWidth += ballSettings.dx; 

} 

// paddle Movement 
//--------------------------------* 

function keyDown(e) { 
    "use strict"; 
    console.log(e.keyCode); 
    switch (e.keyCode) { 
    case 37: 
     keys.left = true; 
     break; 
    case 39: 
     keys.right = true; 
     break; 
    case 32: 
     keys.shoot = true; 
     break; 
    } 
} 

function keyUp(e) { 
    "use strict"; 
    switch (e.keyCode) { 
    case 37: 
     keys.left = false; 
     break; 
    case 39: 
     keys.right = false; 
     break; 
    case 32: 
     keys.shoot = false; 
     break; 
    } 
} 


function movePaddle() { 
     "use strict"; 
    if (keys.left) { 
     paddle.x -= settings.speed; 
     if (paddle.x < 0 + paddle.regX) { 
      paddle.x = 0 + paddle.regX; 
     } 
    } else if (keys.right) { 
     paddle.x += settings.speed; 
     if (paddle.x > canvasWidth - paddle.width + paddle.regX) { 
      paddle.x = canvasWidth - paddle.width + paddle.regX; 
     } 
    } else if (keys.shoot) { 
     console.log("shoot ball"); 
     if (canvasWidth + ballSettings.dx > canvas.width - ballSettings.ballRadius || canvasWidth + ballSettings.dx < ballSettings.ballRadius) { 
     ballSettings.dx = -ballSettings.dx; 
    } 
     if (canvasHeight + ballSettings.dy > canvas.height - ballSettings.ballRadius || canvasHeight + ballSettings.dy <  ballSettings.ballRadius) { 
      ballSettings.dy = -ballSettings.dy; 
     } 
    } 
} 

function tickHappened(e) { 
    "use strict"; 
    movePaddle(); 
    stage.update(e); 
} 

答えて

0

オブジェクトを移動させるには、いくつかのことが必要です。まず、再描画する必要があります。これは、1秒間に60回再描画するように設定されているようです。次に、オブジェクトの位置を更新する必要があります。あなたのボールには、速度Xと速度Yの2つのものが必要です。それぞれの目盛りでball.x.x = ball.velXを設定して、移動速度とともに移動するようにします。一度それが何かを打つとball.velX = -ball.velXを設定するだけです。

あなたが作業しているプロジェクトはわかりませんが、私は自分のポンゲームで使用したコードの一部をレビューしたり使いたいのであれば、ポンと多少似ていると思います - http://pongio.bitballoon.com/

関連する問題