Tilt sensor support! Throw them all! 200 balls are raining down! Players can throw an unlimited number of paddles at the balls to destroy all the blocks! Blocks to be destroyed will also rain down! Score points by performing combos! Aerial data martial arts performed at high speed!'s game

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

No:8847

3283

←

Prev Next

→

Tilt sensor support! Throw them all! 200 balls are..ALL
Developer User3589｜Date and time 23/7/19 0:08:47
Build time 59.49 sec｜Game capacity 6.359KB｜

Script

では、以下に示すようなボール投げつけゲームのHTMLファイルを実装します。

このプログラムは、スマホの傾きセンサーに対応したボール投げつけゲームです。プレイヤーは画面下部に表示されるパドルを傾けてボールを跳ね返し、全てのブロックを破壊することを目指します。また、ボールが画面下に消えるとボールは減少し、コンボを決めることでスコアが獲得できます。画面上部にはスコアが表示されます。このゲームをスマートフォンで操作するには、スマホのブラウザで上記のコードを実行してください。また、傾きセンサーに対応しているため、ブラウザは傾きセンサーへのアクセスを許可する必要があります。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

では、以下に示すようなボール投げつけゲームのHTMLファイルを実装します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ボール投げつけゲーム</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #000;
        }

canvas {
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// パドルの初期位置
        let paddleX = (canvas.width - paddleWidth) / 2;

// パドルの傾きセンサー対応
        window.addEventListener("deviceorientation", handleOrientation, true);

// デバイスの傾きに応じてパドルを移動
        function handleOrientation(event) {
            const x = event.beta; // 右に傾けると正の値
            paddleX += x * paddleSpeed;
            
            // パドルが画面外に出ないように制限
            if (paddleX < 0) {
                paddleX = 0;
            }
            
            if (paddleX + paddleWidth > canvas.width) {
                paddleX = canvas.width - paddleWidth;
            }
        }

// ボールクラス
        class Ball {
            constructor(x, y, radius, speed, dx, dy, color) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.speed = speed;
                this.dx = dx;
                this.dy = dy;
                this.color = color;
            }

draw() {
                context.beginPath();
                context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                context.fillStyle = this.color;
                context.fill();
                context.closePath();
            }

update() {
                this.draw();

// ボールの移動
                this.x += this.dx;
                this.y += this.dy;

// ボールが画面内で跳ね返る
                if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
                    this.dx = -this.dx;
                }
                if (this.y - this.radius < 0) {
                    this.dy = -this.dy;
                }

// ボールがパドルに当たった場合
                if (
                    this.y + this.radius >= canvas.height - paddleHeight &&
                    this.x >= paddleX &&
                    this.x <= paddleX + paddleWidth
                ) {
                    this.dy = -this.dy;
                    score++;
                }

// ボールが画面下に消えた場合
                if (this.y + this.radius > canvas.height) {
                    // ボールを配列から削除
                    balls = balls.filter(ball => ball !== this);
                }
            }
        }

// 初期化
        function init() {
            // キャンバスのサイズをウィンドウサイズに合わせる
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

// パドルを描画
            context.fillStyle = "#fff";
            context.fillRect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);

// ボールを生成
            for (let i = 0; i < 200; i++) {
                const radius = Math.random() * 20 + 5;
                const x = Math.random() * (canvas.width - radius * 2) + radius;
                const y = Math.random() * (canvas.height - radius * 2) + radius;
                const speed = Math.random() * 2 + 1;
                const dx = Math.random() * 2 - 1;
                const dy = -Math.random() * 2;
                const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
                const ball = new Ball(x, y, radius, speed, dx, dy, color);
                balls.push(ball);
            }

// スコアをリセット
            score = 0;

// ゲームループを開始
            gameLoop();
        }

// ゲームループ
        function gameLoop() {
            // キャンバスをクリア
            context.clearRect(0, 0, canvas.width, canvas.height);

// パドルを描画
            context.fillStyle = "#fff";
            context.fillRect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);

// ボールをアップデート
            balls.forEach(ball => ball.update());

// ブロックが画面内で跳ね返る
            if (score % 10 === 0) {
                paddleX = Math.random() * (canvas.width - paddleWidth);
                score++;
            }
            
            // スコアを表示
            context.fillStyle = "#fff";
            context.font = "20px Arial";
            context.fillText(`Score: ${score}`, 10, 30);

// 次のフレームを要求
            requestAnimationFrame(gameLoop);
        }

// ゲームを開始
        init();
    </script>
</body>
</html>
```

このゲームをスマートフォンで操作するには、スマホのブラウザで上記のコードを実行してください。また、傾きセンサーに対応しているため、ブラウザは傾きセンサーへのアクセスを許可する必要があります。