1
Я пытаюсь разработать мобильную игру. Следующая проблема: прямоугольник, что вы можете видеть в коде, должен быть анимированным. Это означает, что он должен был прийти сверху и бежать на дно и так далее. Если я запустил этот код, все будут рисоваться, но прямоугольник не перемещается. Я не знаю, где ошибка.Javascript анимационный прямоугольник
window.onload = window.onresize = function() {
var C = 1; // canvas width to viewport width ratio
var W_TO_H = 2/1; // canvas width to canvas height ratio
var el = document.getElementById("myCanvas");
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
var canvasWidth = viewportWidth * C;
var canvasHeight = canvasWidth/W_TO_H;
el.style.position = "fixed";
el.setAttribute("width", canvasWidth);
el.setAttribute("height", canvasHeight);
el.style.top = (viewportHeight - canvasHeight)/2;
el.style.left = (viewportWidth - canvasWidth)/2;
var x = canvasWidth/100;
var y = canvasHeight/100;
window.ctx = el.getContext("2d");
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// draw triangles
function init() {
return setInterval(main_loop, 10);
}
function draw() {
recty = canvasHeight/100 * 20;
rectheight = canvasHeight/100 * 30;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// draw rect
ctx.beginPath();
fillStyle = "#000000";
ctx.rect(x * 30, recty, x * 20, rectheight);
ctx.fill();
// draw triangles
ctx.beginPath();
ctx.moveTo(x * 90, y * 50);
ctx.lineTo(x * 99, y * 75);
ctx.lineTo(x * 99, y * 25);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x * 10, y * 50);
ctx.lineTo(x * 1, y * 25);
ctx.lineTo(x * 1, y * 75);
ctx.closePath();
ctx.stroke();
// ballx
ballx = canvasWidth/100;
// draw ball
ctx.beginPath();
ctx.fillStyle = "#FF4422";
ctx.arc(ballx * 50, y * 50, x * 5, 0, 2 * Math.PI);
ctx.fill();
}
function update() {
recty += 1;
if (recty > canvasHeight) {
recty = -rectheight;
}
if (recty > canvasHeight) {
recty -= 1;
}
}
function main_loop() {
draw();
update();
}
init();
}<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
<style>
</style>
</head>
<body>
<div="gameArea">
<canvas id="myCanvas"></canvas>
</div>
</body>
</html>