Make a grid of tiles that make a wave effect through the entire board from where it started's game

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

No:51640

116

←

Prev Next

→

Make a grid of tiles that make a wave effect throu..ALL
Developer User21599｜Date and time 24/3/14 8:45:36
Build time 5.474 sec｜Game capacity 1.673KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Wave Effect Game</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #e0e0e0;
        }

.tile {
            width: 50px;
            height: 50px;
            background-color: #64b5f6;
            margin: 2px;
        }
    </style>
</head>
<body>
    <script>
        const numRows = 8;
        const numCols = 8;
        const grid = [];

for (let i = 0; i < numRows; i++) {
            const row = [];
            for (let j = 0; j < numCols; j++) {
                row.push(document.createElement('div'));
            }
            grid.push(row);
        }

let waveStarted = false;

function startWave() {
            if (!waveStarted) {
                waveStarted = true;
                setTimeout(() => waveEffect(0, 0), 500);
            }
        }

function waveEffect(row, col) {
            if (row >= numRows || col >= numCols) return;

grid[row][col].style.backgroundColor = '#ff8a65';

setTimeout(() => {
                grid[row][col].style.backgroundColor = '#64b5f6';
                waveEffect(row + 1, col + 1);
            }, 300);
        }

for (let i = 0; i < numRows; i++) {
            for (let j = 0; j < numCols; j++) {
                const tile = grid[i][j];
                tile.className = 'tile';
                tile.onclick = () => startWave();
                document.body.appendChild(tile);
            }
        }

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