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

No:22209

←

Prev Next

→

ヘビゲーム
Developer バファリンヌ｜Date and time 23/10/21 15:35:52
Build time 87.881 sec｜Game capacity 5.647KB｜

Script

了解です。以下にヘビゲームの実装例を示します。

ヘビゲーム

この例では、下記のようなヘビゲームが実装されています。 - HTMLファイルとして実装されており、JavaScriptはscriptタグで囲まれています。 - ヘビは緑色の円で表現されており、食べ物は赤色の円で表示されます。 - ゲームボードは400x400のサイズで、ヘビは20x20のドットで表現されます。 - スマホでもプレイ可能で、矢印キーでヘビを操作します。 - ゲームが開始すると、ヘビは自動的に進み始めます。 - ヘビが壁や自身に当たった場合、ゲームオーバーとなります。 - ヘビが食べ物を食べると、長くなります。ご参考までにお使いください。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にヘビゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
<style>
    * {
        box-sizing: border-box;
    }

#game-board {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        position: relative;
    }

.dot {
        width: 20px;
        height: 20px;
        background-color: green;
        border-radius: 50%;
        position: absolute;
    }

#food {
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
    }
</style>
</head>
<body>
    <h1>ヘビゲーム</h1>
    <div id="game-board">
        <div id="food"></div>
    </div>
    <script>
        window.addEventListener("DOMContentLoaded", () => {
            const gameBoard = document.getElementById('game-board');
            const food = document.getElementById('food');
            const dotSize = 20;
            const gameBoardSize = 400;
            const snakeSpeed = 200;
        
            let snake = [{x: 0, y: 0}];
            let direction = 'right';
        
            function generateFood() {
                const x = Math.floor(Math.random() * (gameBoardSize / dotSize)) * dotSize;
                const y = Math.floor(Math.random() * (gameBoardSize / dotSize)) * dotSize;
                food.style.left = x + 'px';
                food.style.top = y + 'px';
            }
        
            function moveSnake() {
                const head = Object.assign({}, snake[0]);

switch (direction) {
                    case 'up':
                        head.y -= dotSize;
                        break;
                    case 'down':
                        head.y += dotSize;
                        break;
                    case 'left':
                        head.x -= dotSize;
                        break;
                    case 'right':
                        head.x += dotSize;
                        break;
                    default:
                        return;
                }

snake.unshift(head);
                if (snake.length > 1) {
                    snake.pop();
                }

renderSnake();

if (isGameOver()) {
                    clearInterval(gameInterval);
                    alert('ゲームオーバー');
                }

if (isFoodEaten()) {
                    generateFood();
                    snake.push({});
                }
            }
        
            function renderSnake() {
                gameBoard.innerHTML = '';
        
                snake.forEach((dot, index) => {
                    const snakeDot = document.createElement('div');
                    snakeDot.className = 'dot';
                    snakeDot.style.left = dot.x + 'px';
                    snakeDot.style.top = dot.y + 'px';
        
                    gameBoard.appendChild(snakeDot);
                });
            }
        
            function isGameOver() {
                const head = snake[0];

return (
                    head.x < 0 ||
                    head.x >= gameBoardSize ||
                    head.y < 0 ||
                    head.y >= gameBoardSize ||
                    snake.slice(1).some((dot) => dot.x === head.x && dot.y === head.y)
                );
            }
        
            function isFoodEaten() {
                const head = snake[0];
                const foodLeft = parseInt(food.style.left, 10);
                const foodTop = parseInt(food.style.top, 10);

return head.x === foodLeft && head.y === foodTop;
            }
        
            function handleKeyDown(event) {
                switch (event.key) {
                    case 'ArrowUp':
                        if (direction !== 'down') {
                            direction = 'up';
                        }
                        break;
                    case 'ArrowDown':
                        if (direction !== 'up') {
                            direction = 'down';
                        }
                        break;
                    case 'ArrowLeft':
                        if (direction !== 'right') {
                            direction = 'left';
                        }
                        break;
                    case 'ArrowRight':
                        if (direction !== 'left') {
                            direction = 'right';
                        }
                        break;
                    default:
                        return;
                }
            }
        
            document.addEventListener('keydown', handleKeyDown);
        
            generateFood();
            renderSnake();
        
            const gameInterval = setInterval(moveSnake, snakeSpeed);
        });
    </script>
</body>
</html>
```

この例では、下記のようなヘビゲームが実装されています。

- HTMLファイルとして実装されており、JavaScriptはscriptタグで囲まれています。
- ヘビは緑色の円で表現されており、食べ物は赤色の円で表示されます。
- ゲームボードは400x400のサイズで、ヘビは20x20のドットで表現されます。
- スマホでもプレイ可能で、矢印キーでヘビを操作します。
- ゲームが開始すると、ヘビは自動的に進み始めます。
- ヘビが壁や自身に当たった場合、ゲームオーバーとなります。
- ヘビが食べ物を食べると、長くなります。

ご参考までにお使いください。