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

No:19735

114

←

Prev Next

→

juego de color de batallas
Developer User8802｜Date and time 23/10/6 9:06:50
Build time 25.263 sec｜Game capacity 4.888KB｜

Script

Juego de Batalla de Colores

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Juego de Batalla de Colores</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
            background-color: #eaeaea;
        }

h1 {
            color: #333333;
        }

.container {
            display: flex;
            justify-content: center;
        }

.battlefield {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            margin-top: 20px;
        }

.box {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 5px;
            cursor: pointer;
        }

.box:hover {
            border-width: 2px;
        }

.box.selected {
            border-width: 3px;
        }

.message {
            margin-top: 20px;
            font-size: 18px;
            color: #333333;
        }

.restart-btn {
            display: inline-block;
            padding: 10px 20px;
            margin-top: 20px;
            background-color: #333333;
            color: #ffffff;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Juego de Batalla de Colores</h1>
    <div class="container">
        <div class="battlefield"></div>
    </div>
    <div class="message"></div>
    <button class="restart-btn" onclick="restartGame()">Reiniciar Juego</button>

// Función para crear el campo de batalla
        function createBattlefield() {
            for (var i = 0; i < 9; i++) {
                var box = document.createElement("div");
                box.classList.add("box");
                box.style.backgroundColor = getRandomColor();
                box.addEventListener("click", selectBox);
                battlefield.appendChild(box);
            }
        }

// Función para seleccionar una casilla
        function selectBox(event) {
            var box = event.target;
            if (selectedBox === box) {
                box.classList.remove("selected");
                selectedBox = null;
            } else if (selectedBox === null) {
                box.classList.add("selected");
                selectedBox = box;
            } else {
                swapColors(selectedBox, box);
                selectedBox.classList.remove("selected");
                selectedBox = null;
            }
            checkForMatches();
        }

// Función para intercambiar colores entre dos casillas
        function swapColors(box1, box2) {
            var tempColor = box1.style.backgroundColor;
            box1.style.backgroundColor = box2.style.backgroundColor;
            box2.style.backgroundColor = tempColor;
        }

// Función para verificar si hay coincidencias en el campo de batalla
        function checkForMatches() {
            var boxes = document.querySelectorAll(".box");
            for (var i = 0; i < boxes.length; i++) {
                var color = boxes[i].style.backgroundColor;
                if (i < 7 && color === boxes[i + 1].style.backgroundColor && color === boxes[i + 2].style.backgroundColor) {
                    boxes[i].style.backgroundColor = "";
                    boxes[i + 1].style.backgroundColor = "";
                    boxes[i + 2].style.backgroundColor = "";
                    score += 10;
                    displayMessage("¡Encontraste una coincidencia! ¡Sumaste 10 puntos!");
                }
            }
            updateScore();
        }

// Función para mostrar el mensaje en pantalla
        function displayMessage(msg) {
            message.textContent = msg;
            setTimeout(function () {
                message.textContent = "";
            }, 2000);
        }

// Función para reiniciar el juego
        function restartGame() {
            selectedBox = null;
            score = 0;
            updateScore();
            battlefield.innerHTML = "";
            createBattlefield();
        }

// Función para obtener un color aleatorio
        function getRandomColor() {
            var randomIndex = Math.floor(Math.random() * colors.length);
            return colors[randomIndex];
        }

// Función para actualizar el puntaje en pantalla
        function updateScore() {
            var scoreElement = document.querySelector(".score");
            scoreElement.textContent = "Puntaje: " + score;
        }

// Inicio del juego
        createBattlefield();
        updateScore();
    </script>
</body>
</html>