サイズ変更時にキャンバスゲームを反応させる

Question

私はサイズ変更に対応するポンキャンバスゲームを作ろうとしていますが、何が欠けているのか、また重いものを処理していない間に応答性を持たせるための最良の方法は何ですか？私はあなたには、洞察力のためのおかげで多くの、はるかに高く評価

http://jsfiddle.net/ut0hsvd4/1/

var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { 
    window.setTimeout(callback, 1000/60) 
}; 
var canvas = document.createElement("canvas"); 
var width = document.getElementById('pong').offsetWidth; 
var height = document.getElementById('pong').offsetHeight; 
canvas.width = width; 
canvas.height = height; 
var context = canvas.getContext('2d'); 
var player = new Player(); 
var computer = new Computer(); 
var ball = new Ball(width/2, height/2); 

var keysDown = {}; 

var render = function() { 
    context.fillStyle = "red"; 
    context.fillRect(0, 0, width, height); 
    player.render(); 
    computer.render(); 
    ball.render(); 
}; 

var update = function() { 
    player.update(); 
    computer.update(ball); 
    ball.update(player.paddle, computer.paddle); 
}; 

var step = function() { 
    update(); 
    render(); 
    animate(step); 
}; 

function Paddle(x, y, width, height) { 
    this.x = x; 
    this.y = y; 
    this.width = width; 
    this.height = height; 
    this.x_speed = 0; 
    this.y_speed = 0; 
} 

Paddle.prototype.render = function() { 
    context.fillStyle = "#0000FF"; 
    context.fillRect(this.x, this.y, this.width, this.height); 
}; 

Paddle.prototype.move = function(x, y) { 
    this.x += x; 
    this.y += y; 
    this.x_speed = x; 
    this.y_speed = y; 
    if (this.x < 0) { 
    this.x = 0; 
    this.x_speed = 0; 
    } else if (this.x + this.width > width) { 
    this.x = width - this.width; 
    this.x_speed = 0; 
    } 
}; 

function Computer() { 
    this.paddle = new Paddle(width/2 - 25, 10, 50, 10); 
} 

Computer.prototype.render = function() { 
    this.paddle.render(); 
}; 

Computer.prototype.update = function(ball) { 
    var x_pos = ball.x; 
    var diff = -((this.paddle.x + (this.paddle.width/2)) - x_pos); 
    if (diff < 0 && diff < -4) { 
    diff = -5; 
    } else if (diff > 0 && diff > 4) { 
    diff = 5; 
    } 
    this.paddle.move(diff, 0); 
    if (this.paddle.x < 0) { 
    this.paddle.x = 0; 
    } else if (this.paddle.x + this.paddle.width > width) { 
    this.paddle.x = width - this.paddle.width; 
    } 
}; 

function Player() { 
    this.paddle = new Paddle(width/2 - 25, height - 20, 50, 10); 
} 

Player.prototype.render = function() { 
    this.paddle.render(); 
}; 

Player.prototype.update = function() { 
    for (var key in keysDown) { 
    var value = Number(key); 
    if (value == 37) { 
     this.paddle.move(-4, 0); 
    } else if (value == 39) { 
     this.paddle.move(4, 0); 
    } else { 
     this.paddle.move(0, 0); 
    } 
    } 
}; 

function Ball(x, y) { 
    this.x = x; 
    this.y = y; 
    this.x_speed = 0; 
    this.y_speed = 3; 
} 

Ball.prototype.render = function() { 
    context.beginPath(); 
    context.arc(this.x, this.y, 5, 2 * Math.PI, false); 
    context.fillStyle = "#000000"; 
    context.fill(); 
}; 

Ball.prototype.update = function(paddle1, paddle2) { 
    this.x += this.x_speed; 
    this.y += this.y_speed; 
    var top_x = this.x - 5; 
    var top_y = this.y - 5; 
    var bottom_x = this.x + 5; 
    var bottom_y = this.y + 5; 

    if (this.x - 5 < 0) { 
    this.x = 5; 
    this.x_speed = -this.x_speed; 
    } else if (this.x + 5 > width) { 
    this.x = width - 5; 
    this.x_speed = -this.x_speed; 
    } 

    if (this.y < 0 || this.y > height) { 
    this.x_speed = 0; 
    this.y_speed = 3; 
    this.x = width/2; 
    this.y = height/2; 
    } 

    if (top_y > height/2) { 
    if (top_y < (paddle1.y + paddle1.height) && bottom_y > paddle1.y && top_x < (paddle1.x + paddle1.width) && bottom_x > paddle1.x) { 
     this.y_speed = -3; 
     this.x_speed += (paddle1.x_speed/2); 
     this.y += this.y_speed; 
    } 
    } else { 
    if (top_y < (paddle2.y + paddle2.height) && bottom_y > paddle2.y && top_x < (paddle2.x + paddle2.width) && bottom_x > paddle2.x) { 
     this.y_speed = 3; 
     this.x_speed += (paddle2.x_speed/2); 
     this.y += this.y_speed; 
    } 
    } 
}; 

document.getElementsByClassName('js-pong')[0].appendChild(canvas); 
animate(step); 

window.addEventListener("keydown", function(event) { 
    keysDown[event.keyCode] = true; 
}); 

window.addEventListener("keyup", function(event) { 
    delete keysDown[event.keyCode]; 
}); 

var resizer = function() { 
    document.getElementsByTagName('canvas').remove(); 
    document.getElementsByClassName('js-pong')[0].appendChild(canvas); 
    animate(step); 
} 

window.addEventListener('resize', resizer); 

Answer 1

いけないアニメーションのためのResizeイベントを使用します。

（あなたが​​を使用している場合）

は、resizeイベントにリサイズを追加しないでください。リサイズイベントは、ディスプレイと同期して起動せず、表示レートよりも早く多くの時間を鳴らすことができます。これにより、ウィンドウサイズのコントロールをドラッグしながら、サイズ変更とゲームが遅くなることがあります。滑らかなサイズ変更のため

リサイズ

円滑で効率的な

は単にメインループ内のキャンバスサイズを確認します。キャンバスが含まれている要素のサイズと一致しない場合は、サイズを変更します。これはあなたが必要なときにのみサイズを変更し、常に表示と同期してサイズを変更

例：

// get a reference to the element so you don't query the DOM each time 
const pongEl = document.getElementById("pong"); 

// then in the main loop 
function mainLoop() { 
    // do first thing inside the render loop 
    if(canvas.width !== pongEl.offsetWidth || canvas.height !== pongEl.offsetHeight){ 
     canvas.width = pongEl.offsetWidth; 
     canvas.height = pongEl.offsetHeight; 
     // note the above clears the canvas. 
    } 

    // game code as normal 

    requestAnimationFrame(mainLoop); 
} 

Answer 2

...応答性は、これまでの負荷で動作し、私が思う悪い考えであるものをサイズ変更するにキャンバスを削除して再注入してみました

window.onresize = function(event) { ... };

とキャンバスの幅を100％にするためにCSSクラスやプロパティを追加します。サイズ変更はJavaScriptで発生したときを検出しなければなりません。また、身体が本当に不快な幅にサイズ変更することができないように、最小幅を与えなければなりません。

Answer 3

コードのこの作品は、サイズ変更後に再度実行する必要があります。

var canvas = document.createElement("canvas"); 
var width = document.getElementById('pong').offsetWidth; 
var height = document.getElementById('pong').offsetHeight; 
canvas.width = width; 
canvas.height = height; 
var context = canvas.getContext('2d');