childrens game similar to marbles, played with coin-shaped coloured glass's game

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

No:95

637

←

Prev Next

→

childrens game similar to marbles, played with coi..ALL
Developer ひさひさ｜Date and time 23/5/15 4:02:28
Build time 118.746 sec｜Game capacity 6.945KB｜

Script

This program is designed to、Using HTML5 canvas、A simple block breaking game is implemented. This game is、It can also be played on a mobile phone. Game players can、Paddle the ball back.、The objective is to break all the blocks. If the game is over, the game is over.、The string Game Over appears on the game screen.、The game ends.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>おはじきゲーム</title>
    <style>
        body {
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #canvas {
            border: 1px solid black;
        }
        #score {
            position: fixed;
            top: 10px;
            right: 10px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div id="score"></div>

// ゲームの変数
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var ballX = canvas.width / 2;
        var ballY = canvas.height - 30;
        var ballDX = 3;
        var ballDY = -3;
        var paddleX = (canvas.width - PADDLE_WIDTH) / 2;
        var isRightPressed = false;
        var isLeftPressed = false;
        var bricks = [];
        for (var c = 0; c < BRICK_COLUMNS; c++) {
            bricks[c] = [];
            for (var r = 0; r < BRICK_ROWS; r++) {
                bricks[c][r] = { x: 0, y: 0, status: 1 };
            }
        }
        var score = 0;

// ブロックを描画する関数
        function drawBricks() {
            for (var c = 0; c < BRICK_COLUMNS; c++) {
                for (var r = 0; r < BRICK_ROWS; r++) {
                    if (bricks[c][r].status == 1) {
                        var brickX = (c * (BRICK_WIDTH + BRICK_PADDING)) + BRICK_OFFSET_LEFT;
                        var brickY = (r * (BRICK_HEIGHT + BRICK_PADDING)) + BRICK_OFFSET_TOP;
                        ctx.beginPath();
                        ctx.rect(brickX, brickY, BRICK_WIDTH, BRICK_HEIGHT);
                        ctx.fillStyle = BRICK_COLORS[r];
                        ctx.fill();
                        ctx.closePath();
                    }
                }
            }
        }

// ボールを描画する関数
        function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, BALL_RADIUS, 0, Math.PI*2);
            ctx.fillStyle = BALL_COLOR;
            ctx.fill();
            ctx.closePath();
        }

// パドルを描画する関数
        function drawPaddle() {
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height - PADDLE_HEIGHT, PADDLE_WIDTH, PADDLE_HEIGHT);
            ctx.fillStyle = PADDLE_COLOR;
            ctx.fill();
            ctx.closePath();
        }

// スコアを表示する関数
        function drawScore() {
            ctx.font = "24px Arial";
            ctx.fillStyle = "black";
            ctx.textAlign = "right";
            ctx.fillText("Score: " + score, canvas.width - 10, 30);
        }

// ゲームオーバーを表示する関数
        function drawGameOver() {
            ctx.font = "48px Arial";
            ctx.fillStyle = "black";
            ctx.textAlign = "center";
            ctx.fillText("Game Over", canvas.width / 2, canvas.height / 2);
        }

// ゲームの状態を更新する関数
        function update() {
            // パドルを移動する
            if (isRightPressed && paddleX < canvas.width - PADDLE_WIDTH) {
                paddleX += 7;
            }
            else if (isLeftPressed && paddleX > 0) {
                paddleX -= 7;
            }

// ボールが壁にぶつかったときの処理
            if (ballX + ballDX > canvas.width - BALL_RADIUS || ballX + ballDX < BALL_RADIUS) {
                ballDX = -ballDX;
            }
            if (ballY + ballDY < BALL_RADIUS) {
                ballDY = -ballDY;
            }
            else if (ballY + ballDY > canvas.height - BALL_RADIUS) {
                if (ballX > paddleX && ballX < paddleX + PADDLE_WIDTH) {
                    ballDY = -ballDY;
                    score++;
                }
                else {
                    drawGameOver();
                    clearInterval(interval);
                }
            }

// ボールがブロックにぶつかったときの処理
            for (var c = 0; c < BRICK_COLUMNS; c++) {
                for (var r = 0; r < BRICK_ROWS; r++) {
                    var b = bricks[c][r];
                    if (b.status == 1) {
                        if (ballX > b.x && ballX < b.x + BRICK_WIDTH && ballY > b.y && ballY < b.y + BRICK_HEIGHT) {
                            ballDY = -ballDY;
                            b.status = 0;
                            score++;
                            if (score == BRICK_ROWS * BRICK_COLUMNS) {
                                drawGameOver();
                                clearInterval(interval);
                            }
                        }
                    }
                }
            }

ballX += ballDX;
            ballY += ballDY;

// ゲーム画面をクリアして描画する
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawBall();
            drawPaddle();
            drawScore();
        }

// キーが押されたときの処理
        function onKeyDown(e) {
            if (e.keyCode == 39) {
                isRightPressed = true;
            }
            else if (e.keyCode == 37) {
                isLeftPressed = true;
            }
        }

// キーが離されたときの処理
        function onKeyUp(e) {
            if (e.keyCode == 39) {
                isRightPressed = false;
            }
            else if (e.keyCode == 37) {
                isLeftPressed = false;
            }
        }

// ゲームを開始する
        var interval = setInterval(update, 10);
        document.addEventListener("keydown", onKeyDown);
        document.addEventListener("keyup", onKeyUp);
    </script>
</body>
</html>

このプログラムは、HTML5 canvas を使用して、簡単なブロック崩しゲームを実装しています。このゲームは、スマホでも遊ぶことができます。ゲームプレイヤーは、ボールをパドルで打ち返し、全てのブロックを壊すことを目的としています。ゲームオーバーになると、ゲーム画面に「Game Over」という文字列が表示され、ゲームが終了します。