AI game creator

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

No:22716

168

←

Prev Next

→

Uk vs usa the war
Developer User3408｜Date and time 23/10/24 8:06:11
Build time 55.831 sec｜Game capacity 4.057KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>UK vs USA: The War</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="400" style="border:1px solid black;"></canvas>
    <script>
        // Obtener el canvas y el contexto
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");

// Definir las imágenes de los pictogramas
        var ukFlagImage = new Image();
        ukFlagImage.src = "uk_flag.png";
        var usaFlagImage = new Image();
        usaFlagImage.src = "usa_flag.png";

// Definir los objetos de los países
        var uk = {
            x: 50,
            y: canvas.height - 100,
            width: 50,
            height: 50
        };
        var usa = {
            x: canvas.width - 100,
            y: canvas.height - 100,
            width: 50,
            height: 50
        };

// Definir variables para controlar el movimiento de los países
        var ukMoveLeft = false;
        var ukMoveRight = false;
        var usaMoveLeft = false;
        var usaMoveRight = false;

// Escuchar los eventos táctiles o de teclado para mover los países
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);
        document.addEventListener("touchstart", touchStartHandler, false);
        document.addEventListener("touchend", touchEndHandler, false);

// Funciones para controlar el movimiento a través del teclado
        function keyDownHandler(event) {
            if (event.key === "ArrowLeft") {
                ukMoveLeft = true;
            }
            else if (event.key === "ArrowRight") {
                ukMoveRight = true;
            }
            else if (event.key === "a") {
                usaMoveLeft = true;
            }
            else if (event.key === "d") {
                usaMoveRight = true;
            }
        }
        function keyUpHandler(event) {
            if (event.key === "ArrowLeft") {
                ukMoveLeft = false;
            }
            else if (event.key === "ArrowRight") {
                ukMoveRight = false;
            }
            else if (event.key === "a") {
                usaMoveLeft = false;
            }
            else if (event.key === "d") {
                usaMoveRight = false;
            }
        }

// Funciones para controlar el movimiento a través de la pantalla táctil
        function touchStartHandler(event) {
            if (event.changedTouches[0].clientX < canvas.width / 2) {
                ukMoveLeft = true;
            }
            else {
                ukMoveRight = true;
            }
        }
        function touchEndHandler(event) {
            ukMoveLeft = false;
            ukMoveRight = false;
        }

// Función principal del juego
        function drawGame() {
            // Limpiar el canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar los países en el canvas
            context.drawImage(ukFlagImage, uk.x, uk.y, uk.width, uk.height);
            context.drawImage(usaFlagImage, usa.x, usa.y, usa.width, usa.height);

// Actualizar la posición de los países según el movimiento
            if (ukMoveLeft && uk.x > 0) {
                uk.x -= 5;
            }
            if (ukMoveRight && uk.x < canvas.width - uk.width) {
                uk.x += 5;
            }
            if (usaMoveLeft && usa.x > 0) {
                usa.x -= 5;
            }
            if (usaMoveRight && usa.x < canvas.width - usa.width) {
                usa.x += 5;
            }

// Llamar a la función de dibujo del juego nuevamente (juego en bucle)
            requestAnimationFrame(drawGame);
        }

// Cargar las imágenes de los pictogramas antes de iniciar el juego
        ukFlagImage.onload = function () {
            usaFlagImage.onload = function () {
                drawGame();
            }
        }
    </script>
</body>
</html>