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

No:6892

228

←

Prev Next

→

The Mystery of the Mysteries
Developer User3898｜Date and time 23/7/4 4:00:02
Build time 58.393 sec｜Game capacity 6.651KB｜

Script

了解です。以下にサンプルとなるJavaScriptゲームを作成します。

JavaScriptゲーム

スコア: 0

このプログラムは、ブロック崩しゲームの一つです。スマートフォン上でも操作可能で、キーボードの右矢印キー、左矢印キー、またはスワイプ操作によってブロックを壊すボールを操作することができます。ゲーム画面上部にスコアが表示され、全てのブロックを壊すとクリアとなります。ボールがパドルに当たらない場合はゲームオーバーとなり、リロードとなります。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解です。以下にサンプルとなるJavaScriptゲームを作成します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScriptゲーム</title>
</head>
<body>
    <h1>JavaScriptゲーム</h1>
    <h2 id="score">スコア: 0</h2>
    <canvas id="gameCanvas" width="400" height="300"></canvas>

function gameStart() {
            // ゲームの初期化
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            score = 0;

ballRadius = 10;
            ballSpeedX = 2;
            ballSpeedY = -2;
            ballX = canvas.width / 2;
            ballY = canvas.height - 30;

paddleWidth = 75;
            paddleHeight = 10;
            paddleX = (canvas.width - paddleWidth) / 2;
            paddleSpeed = 7;

brickRowCount = 3;
            brickColumnCount = 5;
            brickWidth = 75;
            brickHeight = 20;

bricks = [];
            for (var c = 0; c < brickColumnCount; c++) {
                bricks[c] = [];
                for (var r = 0; r < brickRowCount; r++) {
                    bricks[c][r] = { x: 0, y: 0, status: 1 };
                }
            }

document.addEventListener("keydown", keyDownHandler);
            document.addEventListener( "keyup", keyUpHandler);
            document.addEventListener("mousemove", mouseMoveHandler);

setInterval(draw, 10);
        }

function keyUpHandler(e) {
            if (e.key === "Right" || e.key === "ArrowRight" || e.key === "Left" || e.key === "ArrowLeft") {
                paddleX = paddleX;
            }
        }

function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

function drawPaddle() {
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

function drawScore() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#0095DD";
            ctx.fillText("Score: " + score, 8, 20);
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();
            drawPaddle();
            drawBricks();
            drawScore();
            collisionDetection();

if (ballX + ballSpeedX > canvas.width - ballRadius || ballX + ballSpeedX < ballRadius) {
                ballSpeedX = -ballSpeedX;
            }
            if (ballY + ballSpeedY < ballRadius) {
                ballSpeedY = -ballSpeedY;
            } else if (ballY + ballSpeedY > canvas.height - ballRadius) {
                if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                    ballSpeedY = -ballSpeedY;
                } else {
                    alert("ゲームオーバー！");
                    document.location.reload();
                }
            }

ballX += ballSpeedX;
            ballY += ballSpeedY;
            requestAnimationFrame(draw);
        }

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