Control character is a cat shooter's game

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

No:934

147

←

Prev Next

→

Control character is a cat shooter
Developer User3193｜Date and time 23/6/17 22:48:57
Build time 70.831 sec｜Game capacity 7.174KB｜

Script

スコア: 0

このゲームは、プレイヤーが猫のキャラクターを操作して、敵キャラクターを倒してスコアを稼ぐシューティングゲームです。画面内には最大で5匹の敵キャラクターが出現し、プレイヤーのキャラクターはキーボードの矢印キーで移動させることができます。プレイヤーは弾を打ち、敵キャラクターを倒してスコアを稼ぐことができます。弾は画面外に出るか、敵キャラクターに当たると消滅します。敵キャラクターは画面外に出るか、プレイヤーのキャラクターに当たると消滅します。スコアは敵キャラクターを倒したときに10点加算されます。

←

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猫のシューティングゲーム</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        canvas {
            display: block;
            margin: auto;
            background-color: #eee;
        }
        #score {
            font-size: 24px;
            text-align: center;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div id="score">スコア: 0</div>
    <script>
        // ゲームの設定
        const WIDTH = 320;
        const HEIGHT = 480;
        const SPEED = 5;
        const BULLET_SPEED = 10;
        const ENEMY_SPEED = 3;
        const MAX_ENEMIES = 5;
        const CAT_SIZE = 64;
        const ENEMY_SIZE = 64;
        const BULLET_SIZE = 16;

// キャンバスの設定
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = WIDTH;
        canvas.height = HEIGHT;

// キャラクターの読み込み
        const catImg = new Image();
        catImg.src = 'https://cdn.jsdelivr.net/emojione/assets/png/1f431.png';
        const enemyImg = new Image();
        enemyImg.src = 'https://cdn.jsdelivr.net/emojione/assets/png/1f47e.png';
        const bulletImg = new Image();
        bulletImg.src = 'https://cdn.jsdelivr.net/emojione/assets/png/1f4a3.png';

// 変数の初期化
        let catX = WIDTH / 2 - CAT_SIZE / 2;
        let catY = HEIGHT - CAT_SIZE - 10;
        let enemies = [];
        let bullets = [];
        let score = 0;

// キャラクターの描画
        function drawCat() {
            ctx.drawImage(catImg, catX, catY, CAT_SIZE, CAT_SIZE);
        }

// 敵キャラの描画
        function drawEnemies() {
            for (let i = 0; i < enemies.length; i++) {
                const enemy = enemies[i];
                ctx.drawImage(enemyImg, enemy.x, enemy.y, ENEMY_SIZE, ENEMY_SIZE);
            }
        }

// 弾の描画
        function drawBullets() {
            for (let i = 0; i < bullets.length; i++) {
                const bullet = bullets[i];
                ctx.drawImage(bulletImg, bullet.x, bullet.y, BULLET_SIZE, BULLET_SIZE);
            }
        }

// キャラクターの移動
        function moveCat() {
            if (key.left) {
                catX -= SPEED;
            }
            if (key.right) {
                catX += SPEED;
            }
            if (key.up) {
                catY -= SPEED;
            }
            if (key.down) {
                catY += SPEED;
            }
            if (catX < 0) {
                catX = 0;
            }
            if (catX > WIDTH - CAT_SIZE) {
                catX = WIDTH - CAT_SIZE;
            }
            if (catY < 0) {
                catY = 0;
            }
            if (catY > HEIGHT - CAT_SIZE) {
                catY = HEIGHT - CAT_SIZE;
            }
        }

// 敵キャラの移動
        function moveEnemies() {
            for (let i = 0; i < enemies.length; i++) {
                const enemy = enemies[i];
                enemy.y += ENEMY_SPEED;
                if (enemy.y > HEIGHT) {
                    enemies.splice(i, 1);
                    i--;
                }
            }
            if (enemies.length < MAX_ENEMIES) {
                const enemyX = Math.floor(Math.random() * (WIDTH - ENEMY_SIZE));
                enemies.push({
                    x: enemyX,
                    y: -ENEMY_SIZE
                });
            }
        }

// 弾の移動
        function moveBullets() {
            for (let i = 0; i < bullets.length; i++) {
                const bullet = bullets[i];
                bullet.y -= BULLET_SPEED;
                if (bullet.y < -BULLET_SIZE) {
                    bullets.splice(i, 1);
                    i--;
                }
            }
        }

// 衝突判定
        function checkHit() {
            for (let i = 0; i < bullets.length; i++) {
                const bullet = bullets[i];
                for (let j = 0; j < enemies.length; j++) {
                    const enemy = enemies[j];
                    if (bullet.x + BULLET_SIZE > enemy.x &&
                        bullet.x < enemy.x + ENEMY_SIZE &&
                        bullet.y + BULLET_SIZE > enemy.y &&
                        bullet.y < enemy.y + ENEMY_SIZE) {
                            bullets.splice(i, 1);
                            i--;
                            enemies.splice(j, 1);
                            j--;
                            score += 10;
                        }
                }
            }
        }

// スコアの描画
        function drawScore() {
            ctx.font = '24px Arial';
            ctx.fillStyle = 'black';
            ctx.textAlign = 'center';
            ctx.fillText(`スコア: ${score}`, WIDTH / 2, 50);
        }

// ゲームループ
        const key = {
            left: false,
            right: false,
            up: false,
            down: false
        };
        window.addEventListener('keydown', function(e) {
            if (e.key === 'ArrowLeft') {
                key.left = true;
            }
            if (e.key === 'ArrowRight') {
                key.right = true;
            }
            if (e.key === 'ArrowUp') {
                key.up = true;
            }
            if (e.key === 'ArrowDown') {
                key.down = true;
            }
        });
        window.addEventListener('keyup', function(e) {
            if (e.key === 'ArrowLeft') {
                key.left = false;
            }
            if (e.key === 'ArrowRight') {
                key.right = false;
            }
            if (e.key === 'ArrowUp') {
                key.up = false;
            }
            if (e.key === 'ArrowDown') {
                key.down = false;
            }
        });
        setInterval(function() {
            ctx.clearRect(0, 0, WIDTH, HEIGHT);
            drawCat();
            moveCat();
            drawEnemies();
            moveEnemies();
            drawBullets();
            moveBullets();
            checkHit();
            drawScore();
        }, 1000/60);
    </script>
</body>
</html>