Human Elimination Game 🎮Dog Revenge 🐶.'s game

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

No:3251

232

←

Prev Next

→

Human Elimination Game 🎮Dog Revenge 🐶.
Developer User3589｜Date and time 23/6/24 9:54:16
Build time 38.154 sec｜Game capacity 4.477KB｜

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">
    <title>人間排除ゲーム：犬の復讐</title>
    <style>
        #canvas {
            width: 100%;
            height: 100%;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // HTML要素の取得
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');

// ゲームの情報
        const GAME_WIDTH = canvas.width;
        const GAME_HEIGHT = canvas.height;
        const DOG_SIZE = 50;
        const ENEMY_NUM = 10;
        const ENEMY_SIZE = 20;
        const ENEMY_SPEED = 2;
        const BULLET_RADIUS = 5;
        const BULLET_SPEED = 10;

// 犬の情報
        const dog = {
            x: GAME_WIDTH / 2 - DOG_SIZE / 2,
            y: GAME_HEIGHT - DOG_SIZE - 10,
            size: DOG_SIZE,
            color: 'brown'
        };

// 敵の情報
        const enemies = [];
        for (let i = 0; i < ENEMY_NUM; i++) {
            enemies.push({
                x: Math.random() * (GAME_WIDTH - ENEMY_SIZE),
                y: Math.random() * (GAME_HEIGHT / 2),
                size: ENEMY_SIZE,
                color: 'black'
            });
        }

// 弾の情報
        const bullets = [];

// ゲームループ
        function update() {
            // 犬の移動
            if (keyDown('ArrowLeft') && dog.x > 0) {
                dog.x -= 5;
            }
            if (keyDown('ArrowRight') && dog.x < GAME_WIDTH - DOG_SIZE) {
                dog.x += 5;
            }

// 敵の移動
            for (let i = 0; i < enemies.length; i++) {
                enemies[i].y += ENEMY_SPEED;
            }

// 弾と敵の衝突判定
            for (let i = 0; i < bullets.length; i++) {
                for (let j = 0; j < enemies.length; j++) {
                    if (isCollide(bullets[i], enemies[j])) {
                        enemies.splice(j, 1); // 敵を削除
                        bullets.splice(i, 1); // 弾を削除
                        j--;
                        i--;
                        break;
                    }
                }
            }

// 画面の描画
            context.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT); // 画面をクリア
            context.fillStyle = dog.color; // 犬を描画
            context.fillRect(dog.x, dog.y, dog.size, dog.size);
            for (let i = 0; i < enemies.length; i++) { // 敵を描画
                context.fillStyle = enemies[i].color;
                context.fillRect(enemies[i].x, enemies[i].y, enemies[i].size, enemies[i].size);
            }
            for (let i = 0; i < bullets.length; i++) { // 弾を描画
                context.beginPath();
                context.arc(bullets[i].x, bullets[i].y, BULLET_RADIUS, 0, Math.PI * 2);
                context.fillStyle = 'red';
                context.fill();
            }
        }

// キーボードのイベントリスナー
        const keys = {};
        function keyDown(key) {
            return keys[key];
        }
        window.addEventListener('keydown', e => keys[e.key] = true);
        window.addEventListener('keyup', e => keys[e.key] = false);

// マウスのイベントリスナー
        canvas.addEventListener('click', e => {
            const bullet = {
                x: dog.x + dog.size / 2,
                y: dog.y,
                radius: BULLET_RADIUS,
                speed: BULLET_SPEED
            };
            const angle = Math.atan2(e.clientY - canvas.offsetTop - dog.y, e.clientX - canvas.offsetLeft - dog.x);
            bullet.vx = bullet.speed * Math.cos(angle);
            bullet.vy = bullet.speed * Math.sin(angle);
            bullets.push(bullet);
        });

// 衝突判定
        function isCollide(a, b) {
            const ax = a.x + a.radius;
            const ay = a.y + a.radius;
            const bx = b.x + (b.size / 2);
            const by = b.y + (b.size / 2);
            const distance = Math.sqrt(Math.pow(ax - bx, 2) + Math.pow(ay - by, 2));
            return distance < a.radius + (b.size / 2);
        }

// ゲームのループ
        setInterval(update, 16);
    </script>
</body>
</html>

【操作方法】
・左右の矢印キー：犬の移動
・マウスのクリック：犬から弾を発射