Шарик летит в точку клика's game

Click here for free DL of the app version that can save data.

No:45026

124

←

Prev Next

→

Шарик летит в точку клика
Developer User19457｜Date and time 24/2/20 0:48:56
Build time 6.294 sec｜Game capacity 1.336KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Игра: Шарик летит в точку клика</title>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

let ball = { x: canvas.width / 2, y: canvas.height / 2, speed: 5, dx: 0, dy: 0 };

canvas.addEventListener("click", (event) => {
    const rect = canvas.getBoundingClientRect();
    const clickX = event.clientX - rect.left;
    const clickY = event.clientY - rect.top;
    
    const angle = Math.atan2(clickY - ball.y, clickX - ball.x);
    
    ball.dx = Math.cos(angle) * ball.speed;
    ball.dy = Math.sin(angle) * ball.speed;
});

function update() {
    ball.x += ball.dx;
    ball.y += ball.dy;
    
    if (ball.x < 0 || ball.x > canvas.width || ball.y < 0 || ball.y > canvas.height) {
        ball.x = canvas.width / 2;
        ball.y = canvas.height / 2;
        ball.dx = 0;
        ball.dy = 0;
    }
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, 10, 0, Math.PI * 2);
    ctx.fillStyle = "#ff0000";
    ctx.fill();
    ctx.closePath();
}

function gameLoop() {
    update();
    requestAnimationFrame(gameLoop);
}

gameLoop();
</script>
</body>
</html>