AI game creator

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

No:36060

140

←

Prev Next

→

Televisión
Developer User16538｜Date and time 24/1/16 11:13:02
Build time 14.734 sec｜Game capacity 4.27KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Juego de televisión</title>
    <style>
        body {
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        
        .tv {
            width: 300px;
            height: 200px;
            background-color: black;
            position: relative;
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .screen {
            width: 100%;
            height: 100%;
            background-image: url('ruta_a_tu_imagen_de_television.jpg');
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .button {
            width: 50px;
            height: 50px;
            background-color: #dcdcdc;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
            cursor: pointer;
        }
        
        .button:hover {
            background-color: #bcbcbc;
        }
        
        .button img {
            width: 30px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="tv" id="tv">
        <div class="screen"></div>
    </div>
    <div class="controls">
        <div class="button" id="powerButton">
            <img src="power_icon.png" alt="Power">
        </div>
        <div class="button" id="volumeUpButton">
            <img src="volume_up_icon.png" alt="Volume Up">
        </div>
        <div class="button" id="volumeDownButton">
            <img src="volume_down_icon.png" alt="Volume Down">
        </div>
        <div class="button" id="inputButton">
            <img src="input_icon.png" alt="Input">
        </div>
    </div>

// Obtener elementos del DOM
        const screen = document.querySelector('.screen');
        const powerButton = document.querySelector('#powerButton');
        const volumeUpButton = document.querySelector('#volumeUpButton');
        const volumeDownButton = document.querySelector('#volumeDownButton');
        const inputButton = document.querySelector('#inputButton');

// Event listeners para los botones
        powerButton.addEventListener('click', togglePower);
        volumeUpButton.addEventListener('click', increaseVolume);
        volumeDownButton.addEventListener('click', decreaseVolume);
        inputButton.addEventListener('click', changeInput);

// Función para encender/apagar la televisión
        function togglePower() {
            powerOn = !powerOn;
            if (powerOn) {
                screen.style.display = 'block';
            } else {
                screen.style.display = 'none';
            }
        }

// Función para aumentar el volumen
        function increaseVolume() {
            if (powerOn) {
                if (volume < 100) volume += 10;
                updateVolume();
            }
        }

// Función para disminuir el volumen
        function decreaseVolume() {
            if (powerOn) {
                if (volume > 0) volume -= 10;
                updateVolume();
            }
        }

// Función para actualizar el volumen en la interfaz
        function updateVolume() {
            screen.style.opacity = volume / 100;
        }

// Función para cambiar la entrada en la televisión
        function changeInput() {
            if (powerOn) {
                if (currentInput === "HDMI") {
                    screen.style.backgroundImage = "url('ruta_a_tu_imagen_de_otra_entrada.jpg')";
                    currentInput = "Otra Entrada";
                } else {
                    screen.style.backgroundImage = "url('ruta_a_tu_imagen_de_hdmii.jpg')";
                    currentInput = "HDMI";
                }
            }
        }
    </script>
</body>
</html>