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

No:6534

←

Prev Next

→

super head-butt
Developer User3897｜Date and time 23/7/2 17:39:45
Build time 26.238 sec｜Game capacity 2.977KB｜

Script

は、「スーパー頭突き」という名前のゲームを作成します。以下のような仕様で実装します。 - ゲーム画面は1枚のHTMLファイルで実装します。 - HTMLファイルには必ずJavaScriptを含め、JavaScriptコードはscriptタグで囲みます。 - ゲームは以下の処理から実行開始されます。 - ゲームはスマホ操作を前提とし、絵文字を使用します。

スーパー頭突き

Score: 0

👤

このプログラムでは、「スーパー頭突き」というゲームを実装しています。ゲーム画面にはプレイヤーと障害物があり、プレイヤーをスワイプして障害物を避けながらプレイします。障害物との衝突が起きた場合には、スコアが加算されます。スマートフォンで実行することを前提としており、スマホのブラウザで表示すれば遊ぶことができます。

←

Prev　Next

→ 　

Back　

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

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

は、「スーパー頭突き」という名前のゲームを作成します。以下のような仕様で実装します。

- ゲーム画面は1枚のHTMLファイルで実装します。
- HTMLファイルには必ずJavaScriptを含め、JavaScriptコードはscriptタグで囲みます。
- ゲームは以下の処理から実行開始されます。
- ゲームはスマホ操作を前提とし、絵文字を使用します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>スーパー頭突き</title>
    <style>
        body {
            text-align: center;
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <h1>スーパー頭突き</h1>
    <p id="score">Score: 0</p>
    <div id="player" style="font-size: 4rem;">👤</div>
    <div id="obstacle" style="font-size: 2rem;"></div>

function getRandomPosition(max) {
            return Math.floor(Math.random() * max);
        }

function updateScore() {
            const scoreElement = document.getElementById("score");
            scoreElement.textContent = `Score: ${score}`;
        }

function updateObstaclePosition() {
            const maxPosition = window.innerWidth - obstacle.offsetWidth;
            const newPosition = getRandomPosition(maxPosition);
            obstacle.style.left = `${newPosition}px`;
        }

function checkCollision() {
            const playerRect = player.getBoundingClientRect();
            const obstacleRect = obstacle.getBoundingClientRect();

if (
                playerRect.left < obstacleRect.right &&
                playerRect.right > obstacleRect.left &&
                playerRect.top < obstacleRect.bottom &&
                playerRect.bottom > obstacleRect.top
            ) {
                score++;
                updateScore();
                updateObstaclePosition();
            }
        }

function updatePlayerPosition(event) {
            const newPosition = event.touches[0].clientX - player.offsetWidth / 2;
            player.style.left = `${newPosition}px`;
            checkCollision();
        }

function startGame() {
            player.addEventListener("touchmove", updatePlayerPosition);

updateScore();
            updateObstaclePosition();
        }
        
        startGame();
    </script>
</body>
</html>
```