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

No:41100

Make a game of an anime girl with red eyes and whi..ALL
Developer User18459｜Date and time 24/2/6 2:37:16
Build time 12.233 sec｜Game capacity 2.976KB｜

Script

Juego de la chica de anime

↑

←

→

↓

En este juego, puedes mover a la chica de anime con ojos rojos y cabello blanco utilizando las flechas que aparecen en el tablero. La chica de anime se encuentra inicialmente en el cuadro superior izquierdo y debes moverla a través de los otros cuadros utilizando las flechas para alcanzar el cuadro vacío. El tablero es representado por un conjunto de cuadros donde cada uno contiene una flecha o está vacío. Al hacer clic en las flechas, se moverá la chica de anime en la dirección correspondiente, siempre que sea posible. La función `render()` se encarga de actualizar la posición de la chica de anime en el tablero de juego. En este ejemplo, se utiliza una imagen de la chica de anime, pero puedes sustituirla por un pictograma si lo prefieres. ¡Disfruta del juego!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <title>Juego de la chica de anime</title>
    <style>
        body {
            text-align: center;
        }

#game-board {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            height: 400px;
        }

.tile {
            width: 80px;
            height: 80px;
            margin: 5px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
        }

.anime-girl {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
  
<body>
    <h1>Juego de la chica de anime</h1>
    <div id="game-board">
        <div class="tile" onclick="moveUp()">↑</div>
        <div class="tile" onclick="moveLeft()">←</div>
        <div class="tile"></div>
        <div class="tile" onclick="moveRight()">→</div>
        <div class="tile" onclick="moveDown()">↓</div>
    </div>
  
    <script>
        // Variables de estado para la posición de la chica de anime
        let row = 0;
        let col = 0;

function render() {
            const tiles = document.getElementsByClassName("tile");

for (let i = 0; i < tiles.length; i++) {
                tiles[i].innerHTML = '';
            }

const tileIndex = row * 3 + col;
            tiles[tileIndex].innerHTML = '<img class="anime-girl" src="anime-girl.jpg">';
        }

function moveUp() {
            if (row > 0) {
                row--;
                render();
            }
        }

function moveDown() {
            if (row < 2) {
                row++;
                render();
            }
        }

function moveLeft() {
            if (col > 0) {
                col--;
                render();
            }
        }

function moveRight() {
            if (col < 2) {
                col++;
                render();
            }
        }

// Inicialización del juego
        render();

</script>
</body>
  
</html>

El tablero es representado por un conjunto de cuadros donde cada uno contiene una flecha o está vacío. Al hacer clic en las flechas, se moverá la chica de anime en la dirección correspondiente, siempre que sea posible.

La función `render()` se encarga de actualizar la posición de la chica de anime en el tablero de juego. En este ejemplo, se utiliza una imagen de la chica de anime, pero puedes sustituirla por un pictograma si lo prefieres.

¡Disfruta del juego!