Please make a marble game's game

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

No:20574

←

Prev Next

→

Please make a marble game
Developer User9095｜Date and time 23/10/10 5:48:57
Build time 14.381 sec｜Game capacity 3.487KB｜

Script

This HTML file contains a simple game where marbles fall from the top of the screen, and the player, represented by a red ball, tries to catch them. The player can move left or right by touching the left or right side of the screen, respectively. The score is displayed at the top-right corner of the canvas. The game continuously loops to update the positions of the marbles and the player, as well as to redraw the canvas and update the score.

←

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>Marble Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400" style="border:1px solid black;"></canvas>
    <script>
        // Game initialization
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");

var marbles = [];
        var score = 0;

var marbleSize = 20;
        var marbleSpeed = 2;
        var numMarbles = 5;

var player = {
            x: canvas.width / 2,
            y: canvas.height - marbleSize,
            speed: 5
        };

function getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

function drawMarbles() {
            for (var i = 0; i < marbles.length; i++) {
                context.beginPath();
                context.arc(marbles[i].x, marbles[i].y, marbleSize, 0, Math.PI * 2);
                context.fillStyle = "blue";
                context.fill();
                context.closePath();
            }
        }

function moveMarbles() {
            for (var i = 0; i < marbles.length; i++) {
                marbles[i].y += marbleSpeed;

// Check collision with player
                if (marbles[i].y + marbleSize >= player.y && marbles[i].x >= player.x - marbleSize && marbles[i].x <= player.x + marbleSize) {
                    marbles.splice(i, 1);
                    score++;
                }
            }
        }

function drawPlayer() {
            context.beginPath();
            context.arc(player.x, player.y, marbleSize, 0, Math.PI * 2);
            context.fillStyle = "red";
            context.fill();
            context.closePath();
        }

function updateScore() {
            context.font = "16px Arial";
            context.fillStyle = "black";
            context.fillText("Score: " + score, canvas.width - 80, 20);
        }

function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawMarbles();
            moveMarbles();
            drawPlayer();
            updateScore();

requestAnimationFrame(draw);
        }

createMarbles(); // Generate initial marbles

document.addEventListener("touchstart", handleTouch, false);
        document.addEventListener("touchmove", handleTouch, false);

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