0
私はHTMLとJavascriptでキャンバス上にゲームを作成していました。私は何らかの華麗な鳥のゲームを作ってみたかったのですが、キーを押すと、プレイヤーのアニメーションが本当に吃音に見えます。見てみましょう：HTML5キャンバスで滑らかなアニメーション
body {
overflow: hidden;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Style.css"/>
</head>
<body onload="startgame()">
<canvas id="canvas"></canvas>
<script>
canvas.height=window.innerHeight;
canvas.width=window.innerWidth;
function startgame() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var x = 900;
var y = 300;
var w = 25;
var h = 500;
var yperson = 20;
var xperson = 200;
document.addEventListener("keydown", function() {
yperson -= 150;
});
function updateperson() {
yperson = yperson;
}
setInterval(createobject, 10);
function createobject() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
x -= 1;
yperson += 0.5;
yperson *= 1.003;
ctx.fillStyle = "#009999";
ctx.fillRect(x,y,w,h);
ctx.fillStyle = "black";
ctx.fillRect(xperson,yperson,30,30);
if (x <= 50) {
if (yperson < 280 && xperson === x-30) {
x -= 1;
} else if (yperson > 280){
x += 1;
}
}
}
}
</script>
</body>
</html>私はそれが滑らかなアニメーションのアップを持っていると思います。私はいくつかの人々がrequestanimationframeでやらなければならないと言っているのを見ましたが、私はそれをどのように使うべきか分かりません。
ありがとうございます。
// DEFINE OBJECTS UP HERE
var update = function(modifier) {
// update all the object properties
// multiply values that depend on time (like speeds) by modifier
};
var render = function() {
// draw everything
};
var main = function() {
var now = Date.now();
var change = now - then;
update(change/1000); // update based on frame rate, change in milliseconds/second
render();
then = now;
requestAnimationFrame(main);
};
// ADD EVENT LISTENERS HERE
requestAnimationFrame = window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| window.mozRequestAnimationFrame;
// ABOVE CODE GIVES CROSS-BROWSER COMPATIBILITY
var then = Date.now();
main();
requestAnimationFrameのフレームレートに基づいてループを実行するために、ブラウザに指示します：
私にはうまく見えますが、 'requestAnimationFrame'はディスプレイの更新方法によって若干スムーズになります。 –
私は知っています。 @SpencerWieczorekしかし、あなたがキーを押すと、人はアニメーションなしで本当に速く上がります。 –
位置を150ピクセルだけ直接シフトしています。アニメーションが必要な場合は、力を上向きに適用し、上向きに直接変換するのではなく、その場合、その間にアニメーションはありません。 –