AI game creator

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

No:27906

←

Prev Next

→

Motor gráfico
Developer User13920｜Date and time 23/12/10 1:07:05
Build time 26.473 sec｜Game capacity 3.232KB｜

Script

Como programador, puedo crear un juego utilizando un motor gráfico en un solo archivo HTML. Para este juego, utilizaré JavaScript y pictogramas para que sea adecuado para su funcionamiento en un smartphone. Aquí está el código del juego:

Este código crea un juego simple en el que una bola rebota por la pantalla y el jugador debe controlar un tablero para evitar que la bola caiga al final de la pantalla. El juego se juega deslizando el dedo sobre la pantalla para mover el tablero. Espero que esto te sirva como ejemplo de cómo implementar un juego con un motor gráfico en un solo archivo HTML.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Aquí está el código del juego:

```html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Juego</title>
    <style>
        canvas { border: 1px solid black; }
    </style>
</head>
<body>
    <canvas id="juego" width="400" height="400"></canvas>
    <script>
        // Definir variables del juego
        var canvas = document.getElementById("juego");
        var ctx = canvas.getContext("2d");
        var x = canvas.width / 2;
        var y = canvas.height - 30;
        var radio = 10;
        var dx = 2;
        var dy = -2;

// Dibujar la bola y el tablero inicialmente
        function dibujarBola() {
            ctx.beginPath();
            ctx.arc(x, y, radio, 0, Math.PI*2);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

function dibujarTablero() {
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height-10, paddleWidth, paddleHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

// Función principal de juego
        function jugar() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar la bola y el tablero
            dibujarBola();
            dibujarTablero();

// Mover la bola
            x += dx;
            y += dy;

// Controlar colisiones con las paredes
            if(x + dx > canvas.width-radio || x + dx < radio) {
                dx = -dx;
            }
            if(y + dy > canvas.height-radio || y + dy < radio) {
                dy = -dy;
            }
            
            // Controlar colisión con el tablero
            if(y + dy > canvas.height-radio-paddleHeight) {
                if(x > paddleX && x < paddleX + paddleWidth) {
                    dy = -dy;
                }
                else {
                    alert("Fin del juego");
                    document.location.reload();
                }
            }

requestAnimationFrame(jugar);
        }

// Escuchar eventos táctiles (para controlar el tablero)
        document.addEventListener("touchmove", function(event) {
            var rect = canvas.getBoundingClientRect();
            var touchX = event.touches[0].clientX - rect.left;
            if (touchX > 0 && touchX < canvas.width) {
                paddleX = touchX - paddleWidth / 2;
            }
        });

// Variables del tablero
        var paddleHeight = 10;
        var paddleWidth = 75;
        var paddleX = (canvas.width-paddleWidth) / 2;

jugar();
    </script>
</body>
</html>
```

Espero que esto te sirva como ejemplo de cómo implementar un juego con un motor gráfico en un solo archivo HTML.