Applause for solving the 300 million yen case's game

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

No:5127

3156

←

Prev Next

→

Applause for solving the 300 million yen case
Developer User3812｜Date and time 23/6/29 19:00:44
Build time 34.076 sec｜Game capacity 3.236KB｜

Script

了解しました。以下に、単純なゲームを作成する例を示します。このゲームでは、プレイヤーがスマホの画面をタッチすることで、キャラクターがジャンプして障害物を避けるというゲームを作ります。

このゲームでは、キャンバス要素を使ってゲーム画面を描画しています。ユーザーが画面をタッチすると、キャラクターがジャンプし、障害物との衝突判定などを行っています。ゲームオーバー時には、スコアが表示され、ページがリロードされます。この例は非常に単純なゲームですが、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>
</head>
<body>
    <canvas id="gameCanvas" style="border:1px solid black;"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

const ctx = canvas.getContext('2d');

// キャラクターの初期位置とサイズ
        let characterX = 50;
        let characterY = canvas.height - 100;
        const characterSize = 50;

// 障害物の初期位置とサイズ
        let obstacleX = canvas.width;
        let obstacleY = canvas.height - characterSize;
        const obstacleSize = 50;
        
        let score = 0;

function jump() {
            characterY -= 100; // キャラクターをジャンプさせる
        }

document.addEventListener('keydown', function(event) {
            if (event.keyCode === 32) { // スペースキーが押されたら
                jump();
            }
        });

canvas.addEventListener('touchstart', function(event) {
            jump();
        });
        
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // キャンバスをクリア

// キャラクターの描画
            ctx.fillStyle = 'blue';
            ctx.fillRect(characterX, characterY, characterSize, characterSize);

// 障害物の描画
            ctx.fillStyle = 'red';
            ctx.fillRect(obstacleX, obstacleY, obstacleSize, obstacleSize);

// 障害物の移動
            obstacleX -= 5;

// 衝突判定
            if (characterX + characterSize > obstacleX && characterX < obstacleX + obstacleSize &&
                characterY + characterSize > obstacleY && characterY < obstacleY + obstacleSize) {
                alert('ゲームオーバー！スコア: ' + score);
                location.reload(); // ページをリロードしてゲームをリセット
            }

// スコアの表示
            ctx.fillStyle = 'black';
            ctx.font = '24px Arial';
            ctx.fillText('スコア: ' + score, 10, 30);

// スコアの更新
            score++;

requestAnimationFrame(update); // 次のフレームの描画をリクエスト
        }

update(); // ゲームの実行
    </script>
</body>
</html>
```

このゲームでは、キャンバス要素を使ってゲーム画面を描画しています。ユーザーが画面をタッチすると、キャラクターがジャンプし、障害物との衝突判定などを行っています。ゲームオーバー時には、スコアが表示され、ページがリロードされます。

この例は非常に単純なゲームですが、JavaScriptを使用してゲームを作成する際の参考になれば幸いです。