アルコール商店太郎のヘビゲーム's game

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

No:39653

←

Prev Next

→

アルコール商店太郎のヘビゲーム
Developer User17762｜Date and time 24/1/29 18:32:48
Build time 48.595 sec｜Game capacity 8.39KB｜

Script

了解しました。以下がアルコール商店太郎のヘビゲームの実装例です。

このプログラムは、HTMLファイルとして実装されており、必ずJavaScriptが含まれています。ヘビゲームとして遊べるようになっており、スマホ操作にも対応しています。実行開始されると、ゲーム画面が表示され、ヘビを操作してゲームをプレイすることができます。ヘビが食物を食べるとスコアが加算され、ヘビが自分の体や壁に当たるとゲームオーバーになります。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

了解しました。以下がアルコール商店太郎のヘビゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>アルコール商店太郎のヘビゲーム</title>
    <style>
        #game-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #game-board {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            overflow: hidden;
        }
        .cell {
            width: 10px;
            height: 10px;
            background-color: black;
            position: absolute;
        }
        .food {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="game-board"></div>
    </div>

// ゲームの初期化
        function initializeGame() {
            const gameBoard = document.getElementById('game-board');
            gameBoard.innerHTML = '';
            gameBoard.style.width = `${game.boardSize * game.cellSize}px`;
            gameBoard.style.height = `${game.boardSize * game.cellSize}px`;

game.snake = [{ x: 10, y: 10 }];
            game.direction = 'right';
            game.food = { x: 20, y: 10 };
            game.score = 0;

for (let y = 0; y < game.boardSize; y++) {
                for (let x = 0; x < game.boardSize; x++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.style.top = `${y * game.cellSize}px`;
                    cell.style.left = `${x * game.cellSize}px`;
                    gameBoard.appendChild(cell);
                }
            }

const snakeHead = getSnakeHead();
            const snakeHeadCell = getCellAtCoordinate(snakeHead.x, snakeHead.y);
            snakeHeadCell.classList.add('snake');

const foodCell = getCellAtCoordinate(game.food.x, game.food.y);
            foodCell.classList.add('food');

game.interval = setInterval(moveSnake, 200);
        }

// キーボードの入力を受け付けるイベントリスナーの登録
        document.addEventListener('keydown', changeSnakeDirection);

// ヘビの移動処理
        function moveSnake() {
            const currentHead = getSnakeHead();
            let newHead;

switch (game.direction) {
                case 'up':
                    newHead = { x: currentHead.x, y: currentHead.y - 1 };
                    break;
                case 'down':
                    newHead = { x: currentHead.x, y: currentHead.y + 1 };
                    break;
                case 'left':
                    newHead = { x: currentHead.x - 1, y: currentHead.y };
                    break;
                case 'right':
                    newHead = { x: currentHead.x + 1, y: currentHead.y };
                    break;
            }

game.snake.unshift(newHead);
            const newHeadCell = getCellAtCoordinate(newHead.x, newHead.y);
            newHeadCell.classList.add('snake');

if (newHead.x === game.food.x && newHead.y === game.food.y) {
                // ヘビが食物に当たった場合
                game.score++;
                const foodCell = getCellAtCoordinate(game.food.x, game.food.y);
                foodCell.classList.remove('food');

generateFood();
            } else {
                // ヘビが食物に当たらなかった場合
                const tail = game.snake.pop();
                const tailCell = getCellAtCoordinate(tail.x, tail.y);
                tailCell.classList.remove('snake');
            }

if (checkGameEnd()) {
                clearInterval(game.interval);
                alert(`ゲームオーバー！スコア：${game.score}`);
            }
        }

// ヘビの向きを変更する処理
        function changeSnakeDirection(event) {
            let newDirection;

switch (event.key) {
                case 'ArrowUp':
                case 'w':
                    newDirection = 'up';
                    break;
                case 'ArrowDown':
                case 's':
                    newDirection = 'down';
                    break;
                case 'ArrowLeft':
                case 'a':
                    newDirection = 'left';
                    break;
                case 'ArrowRight':
                case 'd':
                    newDirection = 'right';
                    break;
            }

if (newDirection && isValidDirection(newDirection)) {
                game.direction = newDirection;
            }
        }

// 指定した座標のセルを取得する処理
        function getCellAtCoordinate(x, y) {
            const gameBoard = document.getElementById('game-board');
            const cells = gameBoard.getElementsByClassName('cell');

for (let cell of cells) {
                const left = parseInt(cell.style.left);
                const top = parseInt(cell.style.top);

if (left === x * game.cellSize && top === y * game.cellSize) {
                    return cell;
                }
            }

return null;
        }

// ヘビの頭の座標を取得する処理
        function getSnakeHead() {
            return game.snake[0];
        }

// ヘビの向きが進行方向と逆方向でないかをチェックする処理
        function isValidDirection(newDirection) {
            switch (game.direction) {
                case 'up':
                    return newDirection !== 'down';
                case 'down':
                    return newDirection !== 'up';
                case 'left':
                    return newDirection !== 'right';
                case 'right':
                    return newDirection !== 'left';
            }
        }

// 食物をランダムな位置に生成する処理
        function generateFood() {
            const newFood = {
                x: Math.floor(Math.random() * game.boardSize),
                y: Math.floor(Math.random() * game.boardSize)
            };

const foodCell = getCellAtCoordinate(newFood.x, newFood.y);
            if (!foodCell.classList.contains('snake')) {
                foodCell.classList.add('food');
                game.food = newFood;
            } else {
                generateFood();
            }
        }

// ゲームが終了したかをチェックする処理
        function checkGameEnd() {
            const snakeHead = getSnakeHead();

if (
                snakeHead.x < 0 ||
                snakeHead.y < 0 ||
                snakeHead.x >= game.boardSize ||
                snakeHead.y >= game.boardSize ||
                hasCollidedWithBody()
            ) {
                return true;
            }

return false;
        }

// ヘビが自分の体に当たったかをチェックする処理
        function hasCollidedWithBody() {
            const snakeHead = getSnakeHead();
            const body = game.snake.slice(1);

for (let segment of body) {
                if (segment.x === snakeHead.x && segment.y === snakeHead.y) {
                    return true;
                }
            }

return false;
        }

// ゲームの初期化及び開始
        initializeGame();
    </script>
</body>
</html>
```