AI game creator

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

No:9038

106

←

Prev Next

→

3d ball
Developer User4271｜Date and time 23/7/20 21:15:28
Build time 31.942 sec｜Game capacity 3.27KB｜

Script

以下のコードは、HTMLファイルとして実装されたJavaScriptを含む3Dボールのゲームです。ユーザーはスマートフォン操作を前提として、ボールをタップして操作し、障害物を避けながらできるだけ長くボールを進めるゲームです。

上記のコードでは、`canvas`要素を使用してゲーム画面を描画しています。ユーザーがボールをタップすると、ボールがその方向に移動します。障害物とボールが衝突した場合にはゲームオーバーとなり、アラートが表示されます。ゲームオーバー後はゲームが終了し、ボールの移動や衝突判定は行われません。なお、このコードは簡易的なサンプルであり、ゲームとしての完成度は高くありません。必要に応じて修正や拡張を行ってください。

←

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>3Dボールゲーム</title>
    <style>
        #canvas {
            border: solid 1px #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    
    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");

// ボールの初期位置
        let x = canvas.width / 2;
        let y = canvas.height - 30;

// ボールの移動量
        let dx = 2;
        let dy = -2;
        
        // ゲームオーバーフラグ
        let gameOver = false;

// スマートフォンタッチイベントの検知
        canvas.addEventListener("touchstart", moveBall, false);

function drawBall() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.arc(x, y, 10, 0, Math.PI*2);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

function moveBall(event) {
            if (gameOver) return;

// タッチ座標の取得
            const touchX = event.touches[0].clientX;
            const touchY = event.touches[0].clientY;

// ボールの移動
            dx = (touchX - x) * 0.1;
            dy = (touchY - y) * 0.1;
        }

function drawObstacle() {
            ctx.beginPath();
            ctx.rect(50, 50, 20, 20);
            ctx.fillStyle = "#FF0000";
            ctx.fill();
            ctx.closePath();
        }

function collisionDetection() {
            if (x + dx > canvas.width - 10 || x + dx < 10) {
                dx = -dx;
            }

if (y + dy > canvas.height - 10 || y + dy < 10) {
                dy = -dy;
            }
            
            // 障害物との衝突判定
            if (x + dx > 50 && x + dx < 70 && y + dy > 50 && y + dy < 70) {
                gameOver = true;
                alert("ゲームオーバー");
            }
        }

function draw() {
            if (gameOver) return;

drawBall();
            drawObstacle();
            collisionDetection();

x += dx;
            y += dy;

requestAnimationFrame(draw);
        }

draw();
    </script>
</body>
</html>
```

上記のコードでは、`canvas`要素を使用してゲーム画面を描画しています。ユーザーがボールをタップすると、ボールがその方向に移動します。障害物とボールが衝突した場合にはゲームオーバーとなり、アラートが表示されます。ゲームオーバー後はゲームが終了し、ボールの移動や衝突判定は行われません。

なお、このコードは簡易的なサンプルであり、ゲームとしての完成度は高くありません。必要に応じて修正や拡張を行ってください。