A game where you are in a 10 x 10 grid and your goal is to not hit the red circles that spawn at the edge of the grid that moves in a straight line by moving away from the red circles and the goal is to be alive as long as possible's game

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

No:48326

←

Prev Next

→

A game where you are in a 10 x 10 grid and your go..ALL
Developer User20725｜Date and time 24/3/1 21:43:28
Build time 16.277 sec｜Game capacity 4.014KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Avoid the Red Circles Game</title>
    <style>
        #grid {
            display: grid;
            grid-template-columns: repeat(10, 30px);
            grid-template-rows: repeat(10, 30px);
        }
        .cell {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            background-color: #ffffff;
        }
        .player {
            background-color: blue;
            border-radius: 50%;
        }
        .red {
            background-color: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="grid"></div>

function createCell(x, y, className) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            cell.classList.add(className);
            cell.style.gridColumn = x;
            cell.style.gridRow = y;
            grid.appendChild(cell);
        }

function updatePlayer() {
            document.querySelectorAll('.player').forEach(cell => cell.classList.remove('player'));
            createCell(player.x, player.y, 'player');
        }

function createRedCircle() {
            const side = Math.floor(Math.random() * 4);
            let x, y;

switch (side) {
                case 0: // top
                    x = Math.floor(Math.random() * 10) + 1;
                    y = 1;
                    break;
                case 1: // right
                    x = 10;
                    y = Math.floor(Math.random() * 10) + 1;
                    break;
                case 2: // bottom
                    x = Math.floor(Math.random() * 10) + 1;
                    y = 10;
                    break;
                case 3: // left
                    x = 1;
                    y = Math.floor(Math.random() * 10) + 1;
                    break;
            }

createCell(x, y, 'red');
        }

function moveRedCircles() {
            document.querySelectorAll('.red').forEach(redCircle => {
                redCircle.remove();
                const x = parseInt(redCircle.style.gridColumn);
                const y = parseInt(redCircle.style.gridRow);

if (x === player.x && y === player.y) {
                    alert('Game Over! Your score: ' + score);
                    clearInterval(interval);
                    return;
                }

if (x === 1) {
                    createCell(10, y, 'red');
                } else if (x === 10) {
                    createCell(1, y, 'red');
                } else if (y === 1) {
                    createCell(x, 10, 'red');
                } else if (y === 10) {
                    createCell(x, 1, 'red');
                } else {
                    if (Math.random() < 0.5) {
                        createCell(x - 1, y, 'red');
                    } else {
                        createCell(x, y - 1, 'red');
                    }
                }
            });
        }

let score = 0;
        createRedCircle();
        updatePlayer();

const interval = setInterval(() => {
            grid.innerHTML = '';
            updatePlayer();
            moveRedCircles();
            createRedCircle();
            score += 10;
        }, 1000);

document.addEventListener('keydown', event => {
            switch(event.key) {
                case 'ArrowUp':
                    if (player.y > 1) player.y--;
                    break;
                case 'ArrowDown':
                    if (player.y < 10) player.y++;
                    break;
                case 'ArrowLeft':
                    if (player.x > 1) player.x--;
                    break;
                case 'ArrowRight':
                    if (player.x < 10) player.x++;
                    break;
            }
        });
    </script>
</body>
</html>
```