A pinball game with a cat's game

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

No:19512

←

Prev Next

→

A pinball game with a cat
Developer User8620｜Date and time 23/10/4 14:52:19
Build time 23.034 sec｜Game capacity 4.532KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Pinball Game with a Cat</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

// Configuration
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");

const pinballRadius = 10;
        const paddleWidth = 100;
        const paddleHeight = 10;
        const paddleSpeed = 8;

const catWidth = 80;
        const catHeight = 80;
        const catSpeed = 4;

let paddleX = canvas.width / 2 - paddleWidth / 2;
        let paddleY = canvas.height - paddleHeight - 10;
        let paddleDirection = 0;

let catX = canvas.width / 2 - catWidth / 2;
        let catY = 30;
        let catDirectionX = 1;
        let catDirectionY = 1;

// Gestion des commandes tactiles
        canvas.addEventListener("touchstart", touchStartHandler);
        canvas.addEventListener("touchend", touchEndHandler);

function touchEndHandler() {
            paddleDirection = 0;
        }

// Gestion des touches clavier
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(event) {
            if (event.key === "ArrowLeft" || event.key === "Left") {
                paddleDirection = -1;
            } else if (event.key === "ArrowRight" || event.key === "Right") {
                paddleDirection = 1;
            }
        }

function keyUpHandler(event) {
            if (event.key === "ArrowLeft" || event.key === "Left" || event.key === "ArrowRight" || event.key === "Right") {
                paddleDirection = 0;
            }
        }

// Gestion de la mise à jour du jeu
        function updateGame() {
            // Mise à jour de la position de la raquette
            paddleX += paddleDirection * paddleSpeed;
            if (paddleX < 0) {
                paddleX = 0;
            } else if (paddleX > canvas.width - paddleWidth) {
                paddleX = canvas.width - paddleWidth;
            }

// Mise à jour de la position du chat et détection de collision avec les bords
            catX += catDirectionX * catSpeed;
            catY += catDirectionY * catSpeed;
            if (catX < 0 || catX > canvas.width - catWidth) {
                catDirectionX = -catDirectionX;
            }
            if (catY < 0 || catY > canvas.height - catHeight) {
                catDirectionY = -catDirectionY;
            }

// Détection de collision entre la balle et la raquette
            if (catY + catHeight >= paddleY && catY + catHeight <= paddleY + paddleHeight &&
                catX + catWidth >= paddleX && catX <= paddleX + paddleWidth) {
                catDirectionY = -catDirectionY;
            }
        }

// Gestion du rendu du jeu
        function drawGame() {
            // Effacer le canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Dessiner la balle
            context.beginPath();
            context.arc(catX + catWidth / 2, catY + catHeight / 2, catWidth / 2, 0, Math.PI * 2);
            context.fillStyle = "#ff0000";
            context.fill();
            context.closePath();

// Dessiner la raquette
            context.beginPath();
            context.rect(paddleX, paddleY, paddleWidth, paddleHeight);
            context.fillStyle = "#0000ff";
            context.fill();
            context.closePath();

// Dessiner l'image du chat
            context.drawImage(catImage, catX, catY, catWidth, catHeight);
        }

// Boucle principale du jeu
        function gameLoop() {
            updateGame();
            drawGame();
            requestAnimationFrame(gameLoop);
        }

// Chargement des ressources et lancement du jeu
        catImage.addEventListener("load", function() {
            gameLoop();
        });

catImage.addEventListener("error", function() {
            alert("Erreur lors du chargement de l'image du chat.");
        });

</script>
</body>
</html>