ビートセイバー's game | AI game creator

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

No:12555

105

ビートセイバー
Developer User4522｜Date and time 23/8/19 20:11:31
Build time 28.889 sec｜Game capacity 4.975KB｜

了解しました。ビートセイバーのゲームを作成します。

このコードは、スマートフォンで遊べるビートセイバーのゲームを実装しています。画面上部にプレイヤー（白い四角）が表示され、下部から上方向に向かって赤い四角のビートが降ってきます。プレイヤーはタップ（触れる）することでビートを切ることができ、ビートに触れた場合はスコアが加算されます。ビートを逃してしまうとゲームオーバーになります。 JavaScriptによってゲームのロジックが制御されており、canvas要素を使用してゲーム画面を描画しています。タッチイベントを使用してプレイヤーの操作やビートの切断を実現しています。また、ビートの生成や移動、スコアの更新なども行っています。このコードをHTMLファイルに保存して実行すると、ビートセイバーのゲームがプレイできます。

→ 　

1　

1　

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

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

(C)2023 HisashiApp

了解しました。ビートセイバーのゲームを作成します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Beat Saber</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        canvas {
            border: 1px solid #FFF;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="500" height="500"></canvas>

<script>
        // Canvas setup
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");

// Game variables
        var player = { x: canvas.width / 2, y: canvas.height / 2 };
        var score = 0;
        var beat = 0;
        var beatPositions = [];
        var beatSpeed = 5;
        var gameOver = false;

// Event listeners
        canvas.addEventListener("touchstart", handleTouchStart, false);
        canvas.addEventListener("touchend", handleTouchEnd, false);

// Game loop
        function gameLoop() {
            if (!gameOver) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                update();
                draw();

requestAnimationFrame(gameLoop);
            }
        }

// Game logic
        function update() {
            // Move beats
            for (var i = 0; i < beatPositions.length; i++) {
                beatPositions[i].y += beatSpeed;
                if (beatPositions[i].y > canvas.height) {
                    beatPositions.splice(i, 1);
                    i--;
                    continue;
                }

if (beatPositions[i].active) {
                    if (beatPositions[i].y > player.y - 50 && beatPositions[i].y < player.y + 50) {
                        score++;
                        beatPositions.splice(i, 1);
                        i--;
                    }
                }
            }

// Spawn new beats
            if (beat > 60) {
                beatPositions.push({ x: Math.random() * (canvas.width - 20) + 10, y: -20, active: false });
                beat = 0;
            }

beat++;
        }

// Draw graphics
        function draw() {
            // Draw player
            ctx.fillStyle = "#FFF";
            ctx.fillRect(player.x - 25, player.y - 50, 50, 100);

// Draw beats
            ctx.fillStyle = "#F00";
            for (var i = 0; i < beatPositions.length; i++) {
                ctx.fillRect(beatPositions[i].x - 10, beatPositions[i].y - 10, 20, 20);
            }

// Draw score
            ctx.fillStyle = "#FFF";
            ctx.font = "24px Arial";
            ctx.fillText("Score: " + score, 10, 30);
        }

// Event handlers
        function handleTouchStart(event) {
            if (event.changedTouches) {
                event.preventDefault();
                player.x = event.changedTouches[0].pageX - canvas.offsetLeft;
                player.y = event.changedTouches[0].pageY - canvas.offsetTop;
            }
        }

function handleTouchEnd(event) {
            if (event.changedTouches) {
                event.preventDefault();
                var touchX = event.changedTouches[0].pageX - canvas.offsetLeft;
                var touchY = event.changedTouches[0].pageY - canvas.offsetTop;

for (var i = 0; i < beatPositions.length; i++) {
                    if (touchX > beatPositions[i].x - 20 && touchX < beatPositions[i].x + 20 &&
                        touchY > beatPositions[i].y - 20 && touchY < beatPositions[i].y + 20) {
                        beatPositions[i].active = true;
                        break;
                    }
                }
            }
        }

// Start the game
        gameLoop();
    </script>
</body>
</html>
```

このコードは、スマートフォンで遊べるビートセイバーのゲームを実装しています。画面上部にプレイヤー（白い四角）が表示され、下部から上方向に向かって赤い四角のビートが降ってきます。プレイヤーはタップ（触れる）することでビートを切ることができ、ビートに触れた場合はスコアが加算されます。ビートを逃してしまうとゲームオーバーになります。

JavaScriptによってゲームのロジックが制御されており、canvas要素を使用してゲーム画面を描画しています。タッチイベントを使用してプレイヤーの操作やビートの切断を実現しています。また、ビートの生成や移動、スコアの更新なども行っています。

このコードをHTMLファイルに保存して実行すると、ビートセイバーのゲームがプレイできます。