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

No:2345

1956

←

Prev Next

→

The game that cures hay fever
Developer User3506｜Date and time 23/6/21 0:22:57
Build time 50.923 sec｜Game capacity 5.381KB｜

Script

🌸The game that cures hay fever🌼

SCORE: 0

TIME LEFT: 30

*Game overview: Pollen falls on the screen.、This is a game in which you earn a score by clicking and erasing pollen. Aim for a high score by erasing as many pollen as possible within the time limit.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>花粉症が治るゲーム</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial;
            text-align: center;
        }

canvas {
            border: 2px solid #222;
        }

span {
            font-size: 3em;
            margin: 10px;
            cursor: pointer;
        }

#score {
            position: absolute;
            top: 10px;
            right: 10px;
            color: #222;
            font-size: 1.5em;
        }

#time {
            position: absolute;
            top: 10px;
            left: 10px;
            color: #222;
            font-size: 1.5em;
        }
    </style>
</head>

<body>
    <h1><span>🌸</span>花粉症が治るゲーム<span>🌼</span></h1>
    <canvas id="canvas" width="300" height="500"></canvas>
    <div id="score">SCORE: 0</div>
    <div id="time">TIME LEFT: 30</div>
    <script>
        // ゲーム設定
        const gameSettings = {
            pollens: 10, // 花粉数
            pollenSpawnInterval: 1000, // 花粉の発生間隔 (ms)
            pollenSpeed: 1, // 花粉の速度
            pollenScore: 10, // 花粉1個あたりのスコア
            timeLimit: 30 // 制限時間 (s)
        };

// ゲームオブジェクト
        const game = {
            pollens: [],
            score: 0,
            timeLeft: gameSettings.timeLimit,
            end: false,
            canvas: document.getElementById('canvas'),
            context: null,
            scoreText: document.getElementById('score'),
            timeText: document.getElementById('time'),

// ゲーム初期化
            init: function() {
                this.context = this.canvas.getContext('2d');
                this.canvas.addEventListener('click', this.onClick);
                this.draw();
                this.spawnPollens();
                this.updateTime();
                setInterval(this.updateTime, 1000);
            },

// 花粉の発生
            spawnPollens: function() {
                if (this.pollens.length < gameSettings.pollens) {
                    const pollen = {
                        x: Math.floor(Math.random() * (this.canvas.width - 50)),
                        y: -50,
                        size: 50,
                        speed: gameSettings.pollenSpeed
                    };
                    this.pollens.push(pollen);
                }
                if (!this.end) {
                    setTimeout(this.spawnPollens.bind(this), gameSettings.pollenSpawnInterval);
                }
            },

// 花粉を描画
            draw: function() {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
                this.context.fillStyle = '#222';
                this.context.font = '24px Arial';
                this.context.fillText('クリックして花粉を消そう！', 20, 50);
                for (let i = 0; i < this.pollens.length; i++) {
                    const pollen = this.pollens[i];
                    this.context.beginPath();
                    this.context.arc(pollen.x + pollen.size / 2, pollen.y + pollen.size / 2, pollen.size / 2, 0, Math.PI * 2);
                    this.context.fillStyle = '#f00';
                    this.context.fill();
                }
                this.scoreText.innerHTML = 'SCORE: ' + this.score;
                this.timeText.innerHTML = 'TIME LEFT: ' + this.timeLeft;
                if (!this.end) {
                    requestAnimationFrame(this.draw.bind(this));
                } else {
                    this.context.font = '48px Arial';
                    this.context.fillStyle = '#222';
                    this.context.fillText('GAME OVER', 40, 200);
                }
            },

// 時間を更新
            updateTime: function() {
                if (game.timeLeft > 0) {
                    game.timeLeft--;
                } else {
                    game.endGame();
                }
            },

// クリック時の処理
            onClick: function(event) {
                if (game.end) {
                    return;
                }
                const rect = canvas.getBoundingClientRect();
                const mouseX = event.clientX - rect.left;
                const mouseY = event.clientY - rect.top;
                for (let i = 0; i < game.pollens.length; i++) {
                    const pollen = game.pollens[i];
                    if (mouseX >= pollen.x && mouseX <= pollen.x + pollen.size &&
                        mouseY >= pollen.y && mouseY <= pollen.y + pollen.size) {
                        game.score += gameSettings.pollenScore;
                        game.pollens.splice(i, 1);
                        break;
                    }
                }
            },

// ゲーム終了処理
            endGame: function() {
                this.end = true;
            }
        };

game.init();
    </script>
</body>

</html>

※ゲーム概要：画面に花粉が降ってくるので、クリックして花粉を消しながらスコアを稼ぐゲームです。制限時間内にできるだけ多くの花粉を消して高得点を目指しましょう。