0

を使用して pong クローンを作成しようとしていcanvasます。ただし、イベントに関してキャンバスで座標系がどのように機能するかについて誤解しているようです。

playerPaddleクラスを作成しました。このクラスでは、マウスがホバリングしている場所にパドルの中心が正確に描画されるようにします。

// Paddle Object
function Paddle( h, w, x, y, fill) {
    this.h = h;
    this.w = w;
    this.midH = h / 2;

    this.x = x;
    this.y = y;
    this.fill = fill;
}

Paddle.prototype.draw = function(ctx) {
    ctx.fillStyle = this.fill;
    ctx.fillRect(this.x, this.y, this.w, this.h);
}

Paddle.prototype.updatePos = function(y) {
    this.y = y - this.midH
}

パドルの中心がイベント上になるようにパドルをオフセットする正しい方法は、上記mousemoveの方法で行っているように、パドルの新しい位置からパドルの高さの半分を引いて長方形を描くことだと思いましたupdatePos。

mousemoveただし、イベントが発生している場所にパドルの上部を正確に描画しているため、これは正しく機能していないようです。

ただし、イベントの y 位置から差し引くとうまくいきますがthis.h、これはまったく意味がありません。

以下は、パドルをインスタンス化し、canvas要素自体にイベント ハンドラーを追加するために使用するコードと、すべてをレンダリングするために使用する関数です。

// Paddle Globals
var paddleHeight = 50,
    paddleWidth = 10,
    paddleOffset = 10;
var playerPaddle = new Paddle( paddleHeight, paddleWidth, paddleOffset, midY, '#FFFFFF');

// Does the actual rendering
function render() {
    ctx.clearRect(0, 0, cWidth, cHeight);
    playerPaddle.draw(ctx);
}

//Event Handlers
canvas.addEventListener('mousemove', function(e) {
    e.preventDefault();
    var position = canvas.getBoundingClientRect();
    var y = e.clientY - position.top;
    playerPaddle.updatePos(y);
}, false);

また、私が説明している動作の例を次に示します: http://jsfiddle.net/u57QD/

4

1 に答える 1

0

私は問題を解決すると思います。Canvas の CSS スタイルを削除してみてください。パディングトップはキャンバスを下向きにしていると思います。したがって、yのように見えます-this.midHは機能していません:D頑張ってください

スタイルシートの次のコード行を削除

padding-top: 20px;
于 2013-05-22T07:27:56.153 に答える