Snake Rain! Snake🐍 rain: ☔️'s game

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

No:6499

6917

←

Prev Next

→

Snake Rain! Snake🐍 rain: ☔️
Developer User3589｜Date and time 23/7/2 15:20:46
Build time 30.273 sec｜Game capacity 3.928KB｜

Script

了解しました！以下に、スネークレインというゲームを作成します。

このプログラムでは、矢印キーで操作する蛇が画面内に出現し、蛇の頭部が青い雨の玉（raindrop）に当たるとスコアが増えます。雨の玉はランダムに発生し、1秒ごとに追加されます。ご希望の条件を満たすプログラムになっていますので、お楽しみいただければと思います。

←

Prev　Next

→ 　

Back　

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

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

了解しました！以下に、スネークレインというゲームを作成します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>スネークレイン！蛇🐍の雨☔️</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #game-container {
            border: 1px solid black;
            width: 300px;
            height: 300px;
            position: relative;
            background-color: #eee;
        }
        .snake {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: green;
        }
        .raindrop {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: blue;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="game-container"></div>

function createSnake() {
            const snakeElement = document.createElement('div');
            snakeElement.classList.add('snake');
            gameContainer.appendChild(snakeElement);
        }

function moveSnake(event) {
            const keyCode = event.keyCode;
            let x = snakePosition.x;
            let y = snakePosition.y;

if (keyCode === 37) { // Left
                x -= 20;
            } else if (keyCode === 38) { // Up
                y -= 20;
            } else if (keyCode === 39) { // Right
                x += 20;
            } else if (keyCode === 40) { // Down
                y += 20;
            }

snakePosition = {
                x,
                y
            };

const snakeElement = document.querySelector('.snake');
            snakeElement.style.left = `${snakePosition.x}px`;
            snakeElement.style.top = `${snakePosition.y}px`;
        }

function checkCollision() {
            const snakeElement = document.querySelector('.snake');
            const raindropElements = document.querySelectorAll('.raindrop');

raindropElements.forEach(raindropElement => {
                if (
                    snakePosition.x <= (raindropElement.offsetLeft + 20) &&
                    raindropElement.offsetLeft <= (snakePosition.x + 20) &&
                    snakePosition.y <= (raindropElement.offsetTop + 20) &&
                    raindropElement.offsetTop <= (snakePosition.y + 20)
                ) {
                    score++;
                    raindropElement.remove();
                }
            });
        }

function startGame() {
            createSnake();
            intervalId = setInterval(() => {
                createRaindrop();
                checkCollision();
            }, 1000);
        }

document.addEventListener('keydown', moveSnake);
        startGame();
    </script>
</body>
</html>
```

このプログラムでは、矢印キーで操作する蛇が画面内に出現し、蛇の頭部が青い雨の玉（raindrop）に当たるとスコアが増えます。雨の玉はランダムに発生し、1秒ごとに追加されます。

ご希望の条件を満たすプログラムになっていますので、お楽しみいただければと思います。