Crea un juego de plataformas de un fontanero que tiene que aplastar hongos vivientes y recolectar monedas para llegar al final's game

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

No:44178

←

Prev Next

→

Crea un juego de plataformas de un fontanero que t..ALL
Developer User19325｜Date and time 24/2/17 7:02:25
Build time 15.953 sec｜Game capacity 4.741KB｜

Script

Aquí tienes un ejemplo de cómo puedes crear un juego de plataformas en un solo archivo HTML utilizando JavaScript. El personaje principal será un fontanero que debe aplastar hongos vivientes y recolectar monedas para llegar al final del nivel. Recuerda que este es solo un ejemplo y puedes personalizarlo y expandirlo según tus necesidades.

Este ejemplo básico crea un juego de plataformas en un HTML. El juego tiene un personaje principal (el fontanero) representado por un cuadrado rojo que se puede mover a la izquierda y derecha. El juego también incluye hongos vivientes (cuadrados verdes) y monedas (cuadrados amarillos) colocados en diferentes ubicaciones en el nivel. Al mover al personaje principal, se comprueba si hay colisiones con los hongos y las monedas, y se realiza una acción correspondiente. Recuerda que este es solo un ejemplo básico y puedes personalizar y expandir el juego según tus necesidades. ¡Diviértete!

←

Prev　Next

→ 　

Back　

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

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

Recuerda que este es solo un ejemplo y puedes personalizarlo y expandirlo según tus necesidades.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Juego de Plataformas</title>
    <style>
        #game {
            position: relative;
            width: 500px;
            height: 300px;
            border: 1px solid black;
            overflow: hidden;
        }

#player {
            position: absolute;
            bottom: 0;
            width: 50px;
            height: 50px;
            background-color: red;
        }

.mushroom {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: green;
        }

.coin {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="player"></div>
        <div class="mushroom" style="top: 200px; left: 100px;"></div>
        <div class="mushroom" style="top: 150px; left: 200px;"></div>
        <div class="coin" style="top: 100px; left: 300px;"></div>
        <div class="coin" style="top: 50px; left: 400px;"></div>
        
    </div>

// Variables de estado del jugador
        let playerX = 0;
        let playerY = 0;

// Mueve al jugador hacia la derecha
        function moveRight() {
            playerX += 10;
            playerElement.style.left = playerX + 'px';
            checkCollisions();
        }

// Mueve al jugador hacia la izquierda
        function moveLeft() {
            playerX -= 10;
            playerElement.style.left = playerX + 'px';
            checkCollisions();
        }

// Comprueba las colisiones entre el jugador y los obstáculos, hongos y monedas
        function checkCollisions() {
            Array.from(mushrooms).forEach(mushroom => {
                if (collisionDetection(playerElement, mushroom)) {
                    // Colisión con un hongo, puedes definir una acción aquí
                    console.log('¡Has aplastado un hongo vivo!');
                    mushroom.remove();
                }
            });

Array.from(coins).forEach(coin => {
                if (collisionDetection(playerElement, coin)) {
                    // Colisión con una moneda, puedes definir una acción aquí
                    console.log('¡Has recolectado una moneda!');
                    coin.remove();
                }
            });
        }

// Función de detección de colisiones entre dos elementos
        function collisionDetection(element1, element2) {
            const rect1 = element1.getBoundingClientRect();
            const rect2 = element2.getBoundingClientRect();

return (
                rect1.left < rect2.right &&
                rect1.right > rect2.left &&
                rect1.top < rect2.bottom &&
                rect1.bottom > rect2.top
            );
        }

// Habilita el control táctil del juego en un smartphone
        gameElement.addEventListener('touchstart', function(event) {
            const touchX = event.touches[0].clientX;
            const gameMidX = gameElement.getBoundingClientRect().left + (gameElement.offsetWidth / 2);

if (touchX < gameMidX) {
                moveLeft();
            } else {
                moveRight();
            }
        });

// Inicia el juego
        moveRight();
    </script>
</body>
</html>
```

Este ejemplo básico crea un juego de plataformas en un HTML. El juego tiene un personaje principal (el fontanero) representado por un cuadrado rojo que se puede mover a la izquierda y derecha.
El juego también incluye hongos vivientes (cuadrados verdes) y monedas (cuadrados amarillos) colocados en diferentes ubicaciones en el nivel. Al mover al personaje principal, se comprueba si hay colisiones con los hongos y las monedas, y se realiza una acción correspondiente.

Recuerda que este es solo un ejemplo básico y puedes personalizar y expandir el juego según tus necesidades. ¡Diviértete!