Shooting Game Flashy Bombs's game | AI game creator

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

No:5839

4599

Shooting Game Flashy Bombs
Developer User3840｜Date and time 23/6/30 22:10:39
Build time 42.682 sec｜Game capacity 4.507KB｜

了解しました。以下にシューティングゲームの派手なボムを実装したHTMLファイルの例を示します。

このプログラムでは、キャンバス上にプレイヤー（赤い四角）とボム（黄色い円）が表示され、プレイヤーがボムに触れると派手な爆発が表示されるシューティングゲームです。キーボードの矢印キーでプレイヤーを移動させることができます。ボムとの衝突判定も実装されており、ボムに触れた場合に爆発が発生します。このHTMLファイルをブラウザで開くと、シューティングゲームをプレイすることができます。なお、スマートフォンでの操作も可能です。

→ 　

5　

4　

　
　
　
　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

了解しました。以下にシューティングゲームの派手なボムを実装したHTMLファイルの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
<title>シューティングゲーム</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    canvas {
        background-color: black;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>

<script>
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");
    
    const player = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        width: 20,
        height: 20,
        color: "#FF0000"
    };
    
    let bombs = [];
    let explosion = null;
    
    function drawPlayer() {
        context.beginPath();
        context.rect(player.x, player.y, player.width, player.height);
        context.fillStyle = player.color;
        context.fill();
        context.closePath();
    }
    
    function drawBomb() {
        bombs.forEach(bomb => {
            context.beginPath();
            context.arc(bomb.x, bomb.y, bomb.radius, 0, Math.PI * 2);
            context.fillStyle = bomb.color;
            context.fill();
            context.closePath();
        });
    }
    
    function createBomb() {
        const bomb = {
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            radius: 10,
            color: "#FFFF00",
            speed: 2
        };
        
        bombs.push(bomb);
    }
    
    function updateBomb() {
        bombs.forEach(bomb => {
            bomb.x += Math.random() * bomb.speed - bomb.speed / 2;
            bomb.y += Math.random() * bomb.speed - bomb.speed / 2;
        });
    }
    
    function collisionDetection() {
        bombs.forEach(bomb => {
            const dx = player.x - bomb.x;
            const dy = player.y - bomb.y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            
            if (distance < player.width / 2 + bomb.radius) {
                explosion = {
                    x: player.x,
                    y: player.y,
                    radius: 0,
                    maxRadius: 50,
                    color: "#FFFFFF"
                };
                
                bombs = [];
            }
        });
    }
    
    function drawExplosion() {
        if (explosion !== null) {
            context.beginPath();
            context.arc(explosion.x, explosion.y, explosion.radius, 0, Math.PI * 2);
            context.strokeStyle = explosion.color;
            context.stroke();
            context.closePath();
            
            explosion.radius += 1;
            
            if (explosion.radius > explosion.maxRadius) {
                explosion = null;
            }
        }
    }
    
    function drawGame() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        
        drawPlayer();
        drawBomb();
        drawExplosion();
        
        requestAnimationFrame(drawGame);
    }
    
    function startGame() {
        setInterval(createBomb, 1000);
        setInterval(updateBomb, 30);
        setInterval(collisionDetection, 30);
        
        drawGame();
    }
    
    document.addEventListener("keydown", function(event) {
        const key = event.keyCode;
        
        if (key === 37 && player.x > player.width / 2) { // 左矢印キー
            player.x -= 10;
        } else if (key === 38 && player.y > player.height / 2) { // 上矢印キー
            player.y -= 10;
        } else if (key === 39 && player.x < canvas.width - player.width / 2) { // 右矢印キー
            player.x += 10;
        } else if (key === 40 && player.y < canvas.height - player.height / 2) { // 下矢印キー
            player.y += 10;
        }
    });
    
    startGame();
</script>
</body>
</html>
```

このプログラムでは、キャンバス上にプレイヤー（赤い四角）とボム（黄色い円）が表示され、プレイヤーがボムに触れると派手な爆発が表示されるシューティングゲームです。キーボードの矢印キーでプレイヤーを移動させることができます。ボムとの衝突判定も実装されており、ボムに触れた場合に爆発が発生します。

このHTMLファイルをブラウザで開くと、シューティングゲームをプレイすることができます。なお、スマートフォンでの操作も可能です。