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

No:16185

←

Prev Next

→

演奏
Developer はにわ｜Date and time 23/9/16 15:35:57
Build time 29.759 sec｜Game capacity 4.711KB｜

Script

ゲーム

スコア: 0

←

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>
</head>
<body>
    <h1>ゲーム</h1>
    <button onclick="playGame()">ゲーム開始</button>
    <p id="score">スコア: 0</p>
    <canvas id="canvas" style="border:1px solid black;"></canvas>
    
    <script>
        // ゲームのスコア
        let score = 0;

function playGame() {
            const canvas = document.getElementById("canvas");
            const ctx = canvas.getContext("2d");

// キャンバスのサイズをウィンドウサイズに合わせる
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

// ボールの初期位置と速度
            let ball = {
                x: canvas.width / 2,
                y: canvas.height - 30,
                dx: 10,
                dy: -10,
                radius: 20
            };

// パドルの初期位置とサイズ
            let paddle = {
                width: 75,
                height: 10,
                x: (canvas.width - 75) / 2
            };

// 右キーと左キーの状態を保持
            let rightPressed = false;
            let leftPressed = false;

// 右キーと左キーが押されたときのイベントリスナー
            document.addEventListener("keydown", keyDownHandler, false);
            document.addEventListener("keyup", keyUpHandler, false);

// ボールを描画する関数
            function drawBall() {
                ctx.beginPath();
                ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
                ctx.fillStyle = "#0095DD";
                ctx.fill();
                ctx.closePath();
            }

// パドルを描画する関数
            function drawPaddle() {
                ctx.beginPath();
                ctx.rect(paddle.x, canvas.height - paddle.height, paddle.width, paddle.height);
                ctx.fillStyle = "#0095DD";
                ctx.fill();
                ctx.closePath();
            }

// キーが押された時の処理
            function keyDownHandler(event) {
                if (event.key === "ArrowRight") {
                    rightPressed = true;
                } else if (event.key === "ArrowLeft") {
                    leftPressed = true;
                }
            }

// キーが離された時の処理
            function keyUpHandler(event) {
                if (event.key === "ArrowRight") {
                    rightPressed = false;
                } else if (event.key === "ArrowLeft") {
                    leftPressed = false;
                }
            }

// ボールとパドルの当たり判定をチェックする関数
            function collisionDetection() {
                if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
                    ball.dx = -ball.dx;
                }
                if (ball.y + ball.dy < ball.radius) {
                    ball.dy = -ball.dy;
                } else if (ball.y + ball.dy > canvas.height - ball.radius) {
                    if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
                        ball.dy = -ball.dy;
                        score++;
                        document.getElementById("score").innerHTML = "スコア: " + score;
                    } else {
                        alert("ゲームオーバー");
                        document.location.reload();
                    }
                }
            }

// キャンバスをクリアする関数
            function clearCanvas() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }

// パドルを移動する関数
            function movePaddle() {
                if (rightPressed && paddle.x < canvas.width - paddle.width) {
                    paddle.x += 7;
                } else if (leftPressed && paddle.x > 0) {
                    paddle.x -= 7;
                }
            }

// ゲームを繰り返し実行する関数
            function gameLoop() {
                clearCanvas();
                drawBall();
                drawPaddle();
                movePaddle();
                collisionDetection();

ball.x += ball.dx;
                ball.y += ball.dy;

requestAnimationFrame(gameLoop);
            }

gameLoop();
        }
    </script>
</body>
</html>