AI game creator

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

No:5776

1049

←

Prev Next

→

boneworks
Developer もちきなこ｜Date and time 23/6/30 19:41:16
Build time 32.315 sec｜Game capacity 3.932KB｜

Script

はい、了解しました。では、以下のようなシンプルなブロック崩しゲームを作成してみましょう。

このHTMLファイルをブラウザで開くと、スマホの傾きを利用してパドルを動かし、ブロックを壊していくブロック崩しのゲームがプレイできます。

←

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>
        #paddle {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 20px;
            background-color: red;
        }
        .brick {
            width: 60px;
            height: 20px;
            background-color: blue;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="paddle"></div>
    <div id="bricks"></div>
    
    <script>
        window.onload = function() {
            var paddle = document.getElementById('paddle');
            var bricks = document.getElementById('bricks');
            var bricksArray = [];
            
            var score = 0;
            
            var ball = { x: 400, y: 300, dx: 3, dy: 3 };
            
            for (var i = 0; i < 10; i++) {
                for (var j = 0; j < 6; j++) {
                    var brick = document.createElement('div');
                    brick.className = 'brick';
                    brick.style.top = (j * 25 + 50) + 'px';
                    brick.style.left = (i * 70 + 50) + 'px';
                    bricks.appendChild(brick);
                    bricksArray.push(brick);
                }
            }
            
            window.addEventListener('deviceorientation', handleOrientation, true);
            
            function handleOrientation(event) {
                var x = event.gamma; // スマホの傾きを取得
                var maxX = window.innerWidth - paddle.offsetWidth;
                var newX = (x / 90) * maxX;
                paddle.style.left = newX + 'px';
            }
            
            function moveBall() {
                ball.x += ball.dx;
                ball.y += ball.dy;
                
                if (ball.x <= 0 || ball.x >= window.innerWidth) {
                    ball.dx = -ball.dx;
                }
                
                if (ball.y <= 0) {
                    ball.dy = -ball.dy;
                }
                
                if (ball.y >= window.innerHeight) {
                    clearInterval(ballInterval);
                    alert('ゲームオーバー！ スコア: ' + score);
                }
                
                if (ball.x >= paddle.offsetLeft && ball.x <= paddle.offsetLeft + paddle.offsetWidth &&
                    ball.y >= paddle.offsetTop - paddle.offsetHeight && ball.y <= paddle.offsetTop) {
                    ball.dy = -ball.dy;
                }
                
                for (var i = 0; i < bricksArray.length; i++) {
                    var brick = bricksArray[i];
                    
                    if (ball.x >= brick.offsetLeft && ball.x <= brick.offsetLeft + brick.offsetWidth &&
                        ball.y >= brick.offsetTop - brick.offsetHeight && ball.y <= brick.offsetTop) {
                        ball.dy = -ball.dy;
                        brick.parentNode.removeChild(brick);
                        bricksArray.splice(i, 1);
                        score++;
                        break;
                    }
                }
                
                document.title = 'スコア: ' + score;
                
                document.getElementById('ball').style.top = ball.y + 'px';
                document.getElementById('ball').style.left = ball.x + 'px';
            }
            
            var ballInterval = setInterval(moveBall, 10);
        };
    </script>
</body>
</html>
```

このHTMLファイルをブラウザで開くと、スマホの傾きを利用してパドルを動かし、ブロックを壊していくブロック崩しのゲームがプレイできます。