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

No:49600

78

太陽大バトル6
Developer User21088｜Date and time 24/3/5 20:33:39
Build time 14.518 sec｜Game capacity 4.065KB｜

太陽大バトル6

太陽を操作して敵を倒そう！

スコア: 0

→ 　

0　

0　

　
　
　
　

[PR]現在の売れ筋ゲームアプリランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>太陽大バトル6</title>
<style>
    body {
        font-family: Arial, sans-serif;
        text-align: center;
    }
    button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        margin-top: 20px;
    }
</style>
</head>
<body>
<h1>太陽大バトル6</h1>
<p>太陽を操作して敵を倒そう！</p>
<p id="score">スコア: 0</p>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<button id="startButton">スタート</button>

<script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    let score = 0;
    let isGameStarted = false;
    
    let sun = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 20,
        speed: 5,
        color: "yellow"
    };
    
    let enemies = [];
    
    function drawSun() {
        ctx.beginPath();
        ctx.arc(sun.x, sun.y, sun.radius, 0, Math.PI * 2);
        ctx.fillStyle = sun.color;
        ctx.fill();
        ctx.closePath();
    }
    
    function drawEnemy(enemy) {
        ctx.beginPath();
        ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
    }
    
    function moveSun(direction) {
        switch(direction) {
            case "up":
                sun.y -= sun.speed;
                break;
            case "down":
                sun.y += sun.speed;
                break;
            case "left":
                sun.x -= sun.speed;
                break;
            case "right":
                sun.x += sun.speed;
                break;
        }
    }
    
    function moveEnemies() {
        enemies.forEach(enemy => {
            enemy.y += 2;
        });
    }
    
    function checkCollision() {
        enemies.forEach((enemy, index) => {
            let dx = sun.x - enemy.x;
            let dy = sun.y - enemy.y;
            let distance = Math.sqrt(dx * dx + dy * dy);
            
            if (distance < sun.radius + enemy.radius) {
                enemies.splice(index, 1);
                score++;
                document.getElementById("score").innerText = "スコア: " + score;
            }
        });
    }
    
    function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
    
    function gameLoop() {
        clearCanvas();
        
        drawSun();
        
        moveEnemies();
        enemies.forEach(enemy => {
            drawEnemy(enemy);
        });
        
        checkCollision();
        
        if (isGameStarted) {
            requestAnimationFrame(gameLoop);
        }
    }
    
    document.getElementById("startButton").addEventListener("click", () => {
        isGameStarted = !isGameStarted;
        
        if (isGameStarted) {
            score = 0;
            document.getElementById("score").innerText = "スコア: " + score;
            
            sun.x = canvas.width / 2;
            sun.y = canvas.height / 2;
            
            enemies = [];
            
            for (let i = 0; i < 5; i++) {
                let enemy = {
                    x: Math.random() * canvas.width,
                    y: 0,
                    radius: 15
                };
                enemies.push(enemy);
            }
            
            gameLoop();
        }
    });
    
    document.addEventListener("keydown", (event) => {
        if (isGameStarted) {
            switch(event.key) {
                case "ArrowUp":
                    moveSun("up");
                    break;
                case "ArrowDown":
                    moveSun("down");
                    break;
                case "ArrowLeft":
                    moveSun("left");
                    break;
                case "ArrowRight":
                    moveSun("right");
                    break;
            }
        }
    });
</script>
</body>
</html>