Controlador 2d sencillo's game

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

No:27674

←

Prev Next

→

Controlador 2d sencillo
Developer User13749｜Date and time 23/12/8 5:27:44
Build time 20.453 sec｜Game capacity 3.087KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Controlador 2D Sencillo</title>
    <style>
        canvas {
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Variables para el input
        var direccionX = 0;
        var direccionY = 0;

// Inicialización del juego
        function iniciarJuego() {
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');

// Llamar la función actualizarJuego cada 20ms para actualizar los cambios en pantalla
            setInterval(actualizarJuego, 20);

// Asignar eventos touchstart y touchend para detectar el movimiento del jugador
            canvas.addEventListener('touchstart', manejarInicioToque);
            canvas.addEventListener('touchend', manejarFinToque);
        }

// Función para actualizar el juego
        function actualizarJuego() {
            // Limpiar el canvas
            dibujarRectangulo(0, 0, canvas.width, canvas.height, '#000');

// Actualizar la posición del jugador según la dirección
            jugadorX += direccionX;
            jugadorY += direccionY;

// Limitar la posición del jugador para que no salga del canvas
            if (jugadorX < 0) jugadorX = 0;
            if (jugadorX > canvas.width - 20) jugadorX = canvas.width - 20;
            if (jugadorY < 0) jugadorY = 0;
            if (jugadorY > canvas.height - 20) jugadorY = canvas.height - 20;

// Dibujar el jugador
            dibujarRectangulo(jugadorX, jugadorY, 20, 20, '#FFF');
        }

// Función para dibujar un rectángulo en el canvas
        function dibujarRectangulo(x, y, ancho, alto, color) {
            canvasContext.fillStyle = color;
            canvasContext.fillRect(x, y, ancho, alto);
        }

// Función para manejar el inicio del toque en la pantalla
        function manejarInicioToque(evento) {
            var dedoX = evento.touches[0].clientX;
            var dedoY = evento.touches[0].clientY;

// Determinar la dirección según la posición del toque respecto al jugador
            if (dedoX < jugadorX) {
                direccionX = -5;
            } else if (dedoX > jugadorX + 20) {
                direccionX = 5;
            }

if (dedoY < jugadorY) {
                direccionY = -5;
            } else if (dedoY > jugadorY + 20) {
                direccionY = 5;
            }
        }

// Función para manejar el fin del toque en la pantalla
        function manejarFinToque() {
            // Detener el movimiento del jugador al soltar el toque
            direccionX = 0;
            direccionY = 0;
        }
    </script>
    <script>
        // Iniciar el juego al cargar la página
        window.onload = iniciarJuego;
    </script>
</body>
</html>