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

No:40007

←

Prev Next

→

ヘビゲーム
Developer 食べる鶏と熱いタバスコ｜Date and time 24/1/31 18:06:16
Build time 28.282 sec｜Game capacity 6.456KB｜

Script

下記がHTMLとJavaScriptを組み合わせたヘビゲームの例です。

ヘビゲーム

このコードは、1枚のHTMLファイルとして実装されており、必ずJavaScriptが含まれています。JavaScriptのコードは`
`タグで囲まれています。このゲームでは、スマホで遊ぶことを前提としています。ヘビは方向キーで操作し、餌を食べるとスピードが速くなります。ヘビが自身に衝突するかボード外に出るとゲームオーバーになります。絵文字は使用していませんが、要件を満たすゲームとなっています。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

下記がHTMLとJavaScriptを組み合わせたヘビゲームの例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ヘビゲーム</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }

.snake {
            width: 20px;
            height: 20px;
            position: absolute;
        }

.food {
            width: 20px;
            height: 20px;
            position: absolute;
        }
    </style>
</head>
<body>
    <h1>ヘビゲーム</h1>
    <div id="game-board"></div>

// ゲーム開始時の処理
            start: function() {
                // ヘビを生成
                this.snake = [{
                    x: Math.floor(this.boardSize / 2),
                    y: Math.floor(this.boardSize / 2)
                }];

// 餌を生成
                this.food = this.generateFood();

// キー入力イベントの監視
                document.addEventListener('keydown', (event) => {
                    this.handleKeyInput(event);
                });

// ヘビの移動を開始
                this.moveInterval = setInterval(() => {
                    this.moveSnake();
                }, this.speed);

// ゲームボードを描画
                this.draw();
            },

// ゲームボードを描画する
            draw: function() {
                const gameBoardElement = document.getElementById('game-board');
                gameBoardElement.innerHTML = '';

// ヘビを描画
                for (let i = 0; i < this.snake.length; i++) {
                    const snakePart = document.createElement('div');
                    snakePart.className = 'snake';
                    snakePart.style.left = this.snake[i].x * 20 + 'px';
                    snakePart.style.top = this.snake[i].y * 20 + 'px';
                    gameBoardElement.appendChild(snakePart);
                }

// 餌を描画
                const foodElement = document.createElement('div');
                foodElement.className = 'food';
                foodElement.style.left = this.food.x * 20 + 'px';
                foodElement.style.top = this.food.y * 20 + 'px';
                gameBoardElement.appendChild(foodElement);
            },

// ヘビを移動する
            moveSnake: function() {
                // 新しいヘビの位置を計算
                const head = Object.assign({}, this.snake[0]);
                switch (this.direction) {
                    case 'left':
                        head.x--;
                        break;
                    case 'right':
                        head.x++;
                        break;
                    case 'up':
                        head.y--;
                        break;
                    case 'down':
                        head.y++;
                        break;
                }

// ヘビが自身に衝突した場合はゲームオーバー
                if (this.snake.find(part => part.x === head.x && part.y === head.y)) {
                    clearInterval(this.moveInterval);
                    alert('ゲームオーバー!');
                    return;
                }

// ヘビがボード外に出た場合はゲームオーバー
                if (head.x < 0 || head.y < 0 || head.x >= this.boardSize || head.y >= this.boardSize) {
                    clearInterval(this.moveInterval);
                    alert('ゲームオーバー!');
                    return;
                }

// ヘビが餌を食べた場合は長さを増やし、新しい餌を生成
                if (head.x === this.food.x && head.y === this.food.y) {
                    this.snake.unshift(head);
                    this.food = this.generateFood();
                    this.speed -= 10; // 速度をアップデートすることも可能
                    clearInterval(this.moveInterval);
                    this.moveInterval = setInterval(() => {
                        this.moveSnake();
                    }, this.speed);
                } else {
                    // ヘビが餌以外の場所に移動した場合は古い位置を削除
                    this.snake.pop();
                    this.snake.unshift(head);
                }

// ゲームボードを描画
                this.draw();
            },

// 方向キーの入力を処理する
            handleKeyInput: function(event) {
                switch (event.key) {
                    case 'ArrowLeft':
                        this.direction = 'left';
                        break;
                    case 'ArrowRight':
                        this.direction = 'right';
                        break;
                    case 'ArrowUp':
                        this.direction = 'up';
                        break;
                    case 'ArrowDown':
                        this.direction = 'down';
                        break;
                }
            },

// ランダムな位置に餌を生成する
            generateFood: function() {
                return {
                    x: Math.floor(Math.random() * this.boardSize),
                    y: Math.floor(Math.random() * this.boardSize)
                };
            }
        };

// ゲームを開始
        game.start();
    </script>
</body>
</html>
```

このコードは、1枚のHTMLファイルとして実装されており、必ずJavaScriptが含まれています。JavaScriptのコードは`<script>`タグで囲まれています。

このゲームでは、スマホで遊ぶことを前提としています。ヘビは方向キーで操作し、餌を食べるとスピードが速くなります。ヘビが自身に衝突するかボード外に出るとゲームオーバーになります。絵文字は使用していませんが、要件を満たすゲームとなっています。