A rain of balls that dance down! Paddles that move at your will! An endless sea of blocks! This is the world of the new generation of block breakers! Manipulate the paddle that sits in the center of the game from side to side to dodge the threat of blocks that come out of the ground! Destroy the balls falling from the sky by slamming them into the blocks with force! How many seconds can you survive in this constant tension? Let the adventure begin!'s game

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

No:8884

205

←

Prev Next

→

A rain of balls that dance down! Paddles that move..ALL
Developer User3589｜Date and time 23/7/19 7:31:24
Build time 37.509 sec｜Game capacity 6.141KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新世代ブロック崩し</title>
    <style>
        /* スタイルを追加 */
        #game-container {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

#paddle {
            position: absolute;
            bottom: 10px;
            width: 100px;
            height: 20px;
            background-color: gray;
        }

.block {
            position: absolute;
            width: 50px;
            height: 20px;
            background-color: red;
        }

.ball {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="paddle"></div>
        <div id="ball" class="ball"></div>
    </div>

let paddleX = 0;  // パドルの横座標
        const paddleSpeed = 10;  // パドルの移動速度

let ballX = 0;  // ボールの横座標
        let ballY = 0;  // ボールの縦座標
        let ballSpeedX = 5;  // ボールの横方向の移動速度
        let ballSpeedY = 5;  // ボールの縦方向の移動速度

// ブロック要素の配列を追加
        let blocks = [];

// ブロックを生成する関数を追加
        function createBlocks() {
            const containerWidth = document.getElementById("game-container").offsetWidth;
            const containerHeight = document.getElementById("game-container").offsetHeight;
            const blockWidth = 50;
            const blockHeight = 20;

for (let i = 0; i < 10; i++) {
                let block = document.createElement('div');
                block.className = 'block';

// ブロックの位置をランダムに設定
                let leftPosition = Math.random() * (containerWidth - blockWidth);
                let topPosition = Math.random() * (containerHeight - blockHeight);
                block.style.top = `${topPosition}px`;
                block.style.left = `${leftPosition}px`;

document.getElementById('game-container').appendChild(block);
                blocks.push(block);  // 配列にブロック要素を追加
            }
        }
        createBlocks();  // ブロックを生成

// パドルの位置を更新する関数
        function updatePaddle() {
            paddle.style.left = paddleX + "px";
        }

// ボールの位置を更新する関数
        function updateBall() {
            ball.style.left = ballX + "px";
            ball.style.top = ballY + "px";
        }

// パドルの移動処理
        window.addEventListener("keydown", (event) => {
            if (event.key === "ArrowLeft") {
                paddleX -= paddleSpeed;
                if (paddleX < 0) {
                    paddleX = 0;
                }
            } else if (event.key === "ArrowRight") {
                const containerWidth = document.getElementById("game-container").offsetWidth;
                const paddleWidth = paddle.offsetWidth;
                paddleX += paddleSpeed;
                if (paddleX > containerWidth - paddleWidth) {
                    paddleX = containerWidth - paddleWidth;
                }
            }
            updatePaddle();
        });

// ボールの移動処理
        function moveBall() {
            const containerWidth = document.getElementById("game-container").offsetWidth;
            const containerHeight = document.getElementById("game-container").offsetHeight;
            const ballWidth = ball.offsetWidth;
            const ballHeight = ball.offsetHeight;

ballX += ballSpeedX;
            ballY += ballSpeedY;

// 画面端で跳ね返る処理
            if (ballX < 0 || ballX > containerWidth - ballWidth) {
                ballSpeedX *= -1;
            }
            if (ballY < 0 || ballY > containerHeight - ballHeight) {
                ballSpeedY *= -1;
            }

// パドルとの当たり判定
            const paddleTop = paddle.offsetTop;
            const paddleBottom = paddleTop + paddle.offsetHeight;
            const paddleLeft = paddle.offsetLeft;
            const paddleRight = paddleLeft + paddle.offsetWidth;
            if (ballY + ballHeight > paddleTop &&
                ballX + ballWidth > paddleLeft &&
                ballX < paddleRight) {
                ballSpeedY *= -1;
            }

// ブロックとの当たり判定を追加
            blocks.forEach((block, index) => {  // 全てのブロックについて当たり判定を行う
                const blockTop = block.offsetTop;
                const blockBottom = blockTop + block.offsetHeight;
                const blockLeft = block.offsetLeft;
                const blockRight = blockLeft + block.offsetWidth;
                if (ballY + ballHeight > blockTop &&
                    ballY < blockBottom &&
                    ballX + ballWidth > blockLeft &&
                    ballX < blockRight) {
                    ballSpeedY *= -1;  // Y方向の速度を反転
                    block.style.display = 'none';  // ブロックを非表示にする
                    blocks.splice(index, 1);  // 当たったブロックを配列から削除
                }
            });

updateBall();
        }

// ゲームループ
        function gameLoop() {
            moveBall();
            requestAnimationFrame(gameLoop);
        }

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