AI game creator

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

No:19524

←

Prev Next

→

DDR With a clown
Developer User8620｜Date and time 23/10/4 17:02:04
Build time 16.782 sec｜Game capacity 3.226KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        overflow: hidden;
    }
    .game-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .arrow-container {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
    .arrow {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: white;
        margin: 5px;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
    }
    #up {
        transform: rotate(-90deg);
    }
    #down {
        transform: rotate(90deg);
    }
    #left {
        transform: rotate(180deg);
    }
    #right {
        transform: rotate(0deg);
    }
</style>
</head>
<body>
    <script>
        const arrowKeys = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
        let score = 0;

function getRandomArrowKey() {
            const randomIndex = Math.floor(Math.random() * arrowKeys.length);
            return arrowKeys[randomIndex];
        }

function createArrow() {
            const arrow = document.createElement("div");
            arrow.classList.add("arrow");
            arrow.id = getRandomArrowKey();
            return arrow;
        }

function removeArrow(arrow) {
            arrow.parentNode.removeChild(arrow);
        }

function handleArrowClick(event) {
            const clickedArrow = event.target;
            const arrowId = clickedArrow.id;

if (arrowId === arrowKeys[0]) {
                // Top Arrow
                score++;
            } else if (arrowId === arrowKeys[1]) {
                // Bottom Arrow
                score++;
            } else if (arrowId === arrowKeys[2]) {
                // Left Arrow
                score++;
            } else if (arrowId === arrowKeys[3]) {
                // Right Arrow
                score++;
            }

const scoreDisplay = document.getElementById("score");
            scoreDisplay.innerText = "Score: " + score;

removeArrow(clickedArrow);
        }

function startGame() {
            const gameContainer = document.createElement("div");
            gameContainer.classList.add("game-container");

const scoreDisplay = document.createElement("div");
            scoreDisplay.id = "score";
            scoreDisplay.innerText = "Score: 0";
            gameContainer.appendChild(scoreDisplay);

const arrowContainer = document.createElement("div");
            arrowContainer.classList.add("arrow-container");
            gameContainer.appendChild(arrowContainer);

document.body.appendChild(gameContainer);

setInterval(function() {
                const arrow = createArrow();
                arrow.addEventListener("click", handleArrowClick);
                arrowContainer.appendChild(arrow);
                setTimeout(function() {
                    removeArrow(arrow);
                }, 2000);
            }, 3000);
        }

startGame();
    </script>
</body>
</html>