AI game creator

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

No:34625

←

Prev Next

→

Beat saber
Developer User16286｜Date and time 24/1/11 5:20:48
Build time 12.047 sec｜Game capacity 3.266KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Beat Saber</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="500" height="800"></canvas>
    <script>
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");

let playerX = canvas.width / 2;
        let playerY = canvas.height - 50;
        let playerWidth = 50;
        let playerHeight = 50;
        let playerColor = "blue";

let score = 0;

const blockWidth = 50;
        const blockHeight = 50;
        const blockSpeed = 5;
        let blocks = [];

let gameInterval;

function startGame() {
            gameInterval = setInterval(updateGame, 20);
            document.addEventListener("keydown", movePlayer);
            generateBlocks();
        }

function updateGame() {
            clearCanvas();
            drawPlayer();
            drawBlocks();
            checkCollision();
            updateScore();
            moveBlocks();
        }

function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

function drawPlayer() {
            context.fillStyle = playerColor;
            context.fillRect(playerX, playerY, playerWidth, playerHeight);
        }

function drawBlocks() {
            context.fillStyle = "red";
            for (let i = 0; i < blocks.length; i++) {
                context.fillRect(blocks[i].x, blocks[i].y, blockWidth, blockHeight);
            }
        }

function moveBlocks() {
            for (let i = 0; i < blocks.length; i++) {
                blocks[i].y += blockSpeed;
            }
        }

function updateScore() {
            context.fillStyle = "black";
            context.font = "20px Arial";
            context.fillText("Score: " + score, 20, 40);
        }

function movePlayer(event) {
            if (event.keyCode === 37 && playerX > 0) { // Left arrow key
                playerX -= 10;
            }
            if (event.keyCode === 39 && playerX + playerWidth < canvas.width) { // Right arrow key
                playerX += 10;
            }
        }

function gameOver() {
            clearInterval(gameInterval);
            context.fillStyle = "black";
            context.font = "30px Arial";
            context.fillText("Game Over!", canvas.width / 2 - 100, canvas.height / 2);
        }

startGame();
    </script>
</body>
</html>