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

No:26948

Crea Un Juego Sobre Albert Einstein
Developer User13342｜Date and time 23/12/3 11:56:18
Build time 81.152 sec｜Game capacity 4.168KB｜

Script

Juego de Albert Einstein

Mueve la imagen de Albert Einstein tocando y arrastrándola dentro del recuadro.

Puntaje: 0

¡Juego Terminado!

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Juego de Albert Einstein</title>
<style>
    body {
        font-family: Arial, sans-serif;
        text-align: center;
    }

h1 {
        margin-top: 50px;
    }

#game-container {
        margin-top: 50px;
    }

#score {
        font-size: 18px;
        margin-top: 20px;
    }

#game-over {
        display: none;
        font-size: 24px;
        color: red;
        margin-top: 50px;
    }
</style>
</head>
<body>
    <h1>Juego de Albert Einstein</h1>
    <div id="game-container">
        <img src="albert-einstein.png" id="einstein-img" alt="Albert Einstein" width="200" height="200">
        <p>Mueve la imagen de Albert Einstein tocando y arrastrándola dentro del recuadro.</p>
    </div>
    <div id="score">Puntaje: 0</div>
    <div id="game-over">¡Juego Terminado!</div>

// Función para inicializar el juego
        function initGame() {
            einsteinImg = document.getElementById('einstein-img');
            gameContainer = document.getElementById('game-container');
            scoreElement = document.getElementById('score');
            gameOverElement = document.getElementById('game-over');

// Agregar los eventos de arrastrar a la imagen
            einsteinImg.addEventListener('touchstart', startDrag);
            einsteinImg.addEventListener('touchmove', drag);
            einsteinImg.addEventListener('touchend', stopDrag);

// Actualizar el puntaje inicial
            updateScore();
        }

// Función para iniciar el arrastre de la imagen
        function startDrag(event) {
            isDragging = true;
            einsteinImg.style.opacity = '0.7';  // Cambiar la opacidad de la imagen durante el arrastre
        }

// Función para arrastrar la imagen dentro del recuadro
        function drag(event) {
            if (isDragging) {
                var x = event.touches[0].clientX - gameContainer.offsetLeft - (einsteinImg.offsetWidth / 2);
                var y = event.touches[0].clientY - gameContainer.offsetTop - (einsteinImg.offsetHeight / 2);

// Limitar la posición de la imagen dentro del recuadro
                x = Math.max(x, 0);
                x = Math.min(x, gameContainer.offsetWidth - einsteinImg.offsetWidth);
                y = Math.max(y, 0);
                y = Math.min(y, gameContainer.offsetHeight - einsteinImg.offsetHeight);

einsteinImg.style.left = x + 'px';
                einsteinImg.style.top = y + 'px';
            }
        }

// Función para detener el arrastre de la imagen
        function stopDrag(event) {
            isDragging = false;
            einsteinImg.style.opacity = '1';  // Restaurar la opacidad de la imagen
            checkCollision();  // Verificar si hubo colisión con el borde del recuadro
        }

// Función para verificar la colisión de la imagen con el borde del recuadro
        function checkCollision() {
            var x = parseInt(einsteinImg.style.left);
            var y = parseInt(einsteinImg.style.top);

// Si la imagen está fuera del recuadro, restar puntaje y mostrar mensaje de juego terminado
            if (x < 0 || x + einsteinImg.offsetWidth > gameContainer.offsetWidth ||
                y < 0 || y + einsteinImg.offsetHeight > gameContainer.offsetHeight) {
                score -= 10;
                updateScore();
                gameOver();
            }
        }

// Función para actualizar el puntaje
        function updateScore() {
            scoreElement.innerHTML = 'Puntaje: ' + score;
        }

// Función para finalizar el juego
        function gameOver() {
            einsteinImg.style.display = 'none';  // Ocultar la imagen
            gameOverElement.style.display = 'block';  // Mostrar el mensaje de juego terminado
        }

// Iniciar el juego cuando se cargue la página
        window.onload = initGame;
    </script>
</body>
</html>