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

No:42200

←

Prev Next

→

感動するガチャブロック崩しタップゲーム
Developer User18827｜Date and time 24/2/11 1:27:19
Build time 17.446 sec｜Game capacity 4.782KB｜

Script

了解です。以下にガチャブロック崩しタップゲームの実装例を示します。

ガチャブロック崩しタップゲーム

このプログラムは、スマホでブロック崩しゲームが遊べるようになっています。画面をタップするとゲームが開始され、パドルを左右に動かしてボールを跳ね返します。ボールがブロックに当たるとブロックが消え、全てのブロックを消すとクリアとなります。ゲームが終了したらリロードして再プレイすることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解です。以下にガチャブロック崩しタップゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ガチャブロック崩しタップゲーム</title>
<style>
    #gameCanvas { 
        width: 300px; 
        height: 400px; 
        background-color: lightgray; 
        margin: 0 auto; 
        position: relative; 
        overflow: hidden; 
    }
    .block { 
        width: 60px; 
        height: 20px; 
        background-color: green; 
        border-radius: 5px; 
        position: absolute; 
    }
    #paddle { 
        width: 80px; 
        height: 10px; 
        background-color: blue; 
        border-radius: 5px; 
        position: absolute; 
        bottom: 0; 
        left: 50%; 
        transform: translateX(-50%); 
    }
    #ball { 
        width: 10px; 
        height: 10px; 
        background-color: red; 
        border-radius: 50%; 
        position: absolute; 
    }
</style>
</head>
<body>
    <h1>ガチャブロック崩しタップゲーム</h1>
    <div id="gameCanvas">
        <div id="paddle"></div>
        <div id="ball"></div>
        <div class="block" style="top: 50px; left: 30px;"></div>
        <div class="block" style="top: 50px; left: 120px;"></div>
        <div class="block" style="top: 90px; left: 210px;"></div>
        <div class="block" style="top: 130px; left: 30px;"></div>
        <div class="block" style="top: 130px; left: 120px;"></div>
        <div class="block" style="top: 170px; left: 210px;"></div>
        <div class="block" style="top: 210px; left: 30px;"></div>
        <div class="block" style="top: 210px; left: 120px;"></div>
        <div class="block" style="top: 250px; left: 210px;"></div>
    </div>

// パドルの情報を管理する変数
    const paddle = document.getElementById('paddle');

// ボールの情報を管理する変数
    const ball = document.getElementById('ball');

// ゲームの状態を管理する変数
    let gameStarted = false;

// ボールの速度
    let dx = 2;
    let dy = -2;

// ゲームを開始する関数
    function startGame() {
        gameStarted = true;
        moveBall();
    }

// パドルを動かす関数
    function movePaddle(event) {
        if (gameStarted) {
            paddle.style.left = (event.touches[0].pageX - paddle.offsetWidth / 2) + 'px';
        }
    }

// ボールを動かす関数
    function moveBall() {
        const ballWidth = ball.offsetWidth;
        const ballHeight = ball.offsetHeight;
        const paddleWidth = paddle.offsetWidth;
        const paddleHeight = paddle.offsetHeight;
        const canvasWidth = document.getElementById('gameCanvas').offsetWidth;
        const canvasHeight = document.getElementById('gameCanvas').offsetHeight;

let ballLeft = ball.offsetLeft;
        let ballTop = ball.offsetTop;

ballLeft += dx;
        ballTop += dy;

if (ballLeft < 0 || ballLeft + ballWidth > canvasWidth) {
            dx = -dx;
        }

if (ballTop < 0 || ballTop + ballHeight > canvasHeight) {
            dy = -dy;
        }

if (ballTop + ballHeight >= canvasHeight - paddleHeight && ballLeft + ballWidth >= paddle.offsetLeft && ballLeft <= paddle.offsetLeft + paddleWidth) {
            dy = -dy;
        }

blocks.forEach(block => {
            if (ballTop <= block.offsetTop + block.offsetHeight && ballTop + ballHeight >= block.offsetTop &&
                ballLeft + ballWidth >= block.offsetLeft && ballLeft <= block.offsetLeft + block.offsetWidth) {
                dy = -dy;
                block.style.display = 'none';
            }
        });

ball.style.left = ballLeft + 'px';
        ball.style.top = ballTop + 'px';

if (blocks.filter(block => block.style.display !== 'none').length === 0) {
            alert('クリア！おめでとう！');
            location.reload();
        } else {
            requestAnimationFrame(moveBall);
        }
    }

// タッチイベントのリスナーを登録
    document.addEventListener('touchstart', startGame);
    document.addEventListener('touchmove', movePaddle);
</script>
</body>
</html>
```