Pictogram Invader Game's game

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

No:820

509

←

Prev Next

→

Pictogram Invader Game
Developer User3152｜Date and time 23/6/17 19:45:38
Build time 68.329 sec｜Game capacity 5.372KB｜

Script

このゲームは、絵文字を用いたシンプルなシューティングゲームです。プレイヤーはキーボードの左右キーで移動し、スペースキーで弾を発射します。敵の絵文字を倒して得点を獲得し、3つの命を失うとゲームオーバーです。敵は動きながら弾を撃ってくるため、注意が必要です。楽しんでプレイしてください！

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>絵文字インベーダーゲーム</title>
<style>
    canvas {
        width: 100%;
        height: 100%;
    }
</style>
</head>
<body>
<canvas></canvas>
<script>
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    const emojiInvaders = [];
    const emojis = [
        "😆","😈","👽","💀","🤖"
    ];
    const player = {
        x: canvas.width / 2,
        y: canvas.height - 30,
        size: 30,
        speed: 10,
        emoji: "😎",
        direction: ''
    };
    const playerBullet = {
        x: player.x,
        y: player.y,
        size: 5,
        speed: 20,
        fired: false
    };
    const enemyBullet = {
        x: 0,
        y: 0,
        size: 5,
        speed: 15,
        fired: false
    };
    const enemy = {
        x: canvas.width / 2,
        y: 100,
        size: 30,
        speed: 8,
        emoji: emojis[Math.floor(Math.random() * emojis.length)]
    };
    let score = 0;
    let lives = 3;
    
    function drawPlayer() {
        ctx.font = `${player.size}px serif`;
        ctx.fillText(player.emoji, player.x, player.y);
    }
    
    function drawPlayerBullet() {
        if (playerBullet.fired) {
            ctx.beginPath();
            ctx.arc(playerBullet.x, playerBullet.y, playerBullet.size, 0, Math.PI * 2);
            ctx.fillStyle = 'white';
            ctx.fill();
            playerBullet.y -= playerBullet.speed;
            if (playerBullet.y < 0) {
                playerBullet.fired = false;
            }
        } else {
            playerBullet.x = player.x;
            playerBullet.y = player.y;
        }
    }
    
    function drawEnemy() {
        ctx.font = `${enemy.size}px serif`;
        ctx.fillText(enemy.emoji, enemy.x, enemy.y);
    }
    
    function drawEnemyBullet() {
        if (enemyBullet.fired) {
            ctx.beginPath();
            ctx.arc(enemyBullet.x, enemyBullet.y, enemyBullet.size, 0, Math.PI * 2);
            ctx.fillStyle = 'red';
            ctx.fill();
            enemyBullet.y += enemyBullet.speed;
            if (enemyBullet.y > canvas.height) {
                enemyBullet.fired = false;
            }
        } else {
            enemyBullet.x = enemy.x;
            enemyBullet.y = enemy.y;
        }
    }
    
    function update() {
        // player movement
        if (player.direction === 'left' && player.x > 0) {
            player.x -= player.speed;
        }
        if (player.direction === 'right' && player.x < canvas.width) {
            player.x += player.speed;
        }
        
        // enemy movement
        if (enemy.x > canvas.width - enemy.size || enemy.x < enemy.size) {
            enemy.speed *= -1;
            enemy.y += 30;
            enemy.emoji = emojis[Math.floor(Math.random() * emojis.length)];
        }
        enemy.x += enemy.speed;
        
        // player bullet and enemy collision
        if (playerBullet.fired) {
            let distance = Math.sqrt(Math.pow(playerBullet.x - enemy.x, 2) + Math.pow(playerBullet.y - enemy.y, 2));
            if (distance < playerBullet.size + enemy.size) {
                playerBullet.fired = false;
                enemy.emoji = emojis[Math.floor(Math.random() * emojis.length)];
                score += 10;
            }
        }
        
        // enemy bullet and player collision
        if (enemyBullet.fired) {
            let distance = Math.sqrt(Math.pow(enemyBullet.x - player.x, 2) + Math.pow(enemyBullet.y - player.y, 2));
            if (distance < enemyBullet.size + player.size) {
                enemyBullet.fired = false;
                lives--;
                if (lives === 0) {
                    alert(`Game Over! Your Score: ${score}`);
                    window.location.reload();
                }
            }
        }
        
        // enemy bullet firing
        if (!enemyBullet.fired) {
            enemyBullet.fired = true;
        }
    }
    
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPlayer();
        drawPlayerBullet();
        drawEnemy();
        drawEnemyBullet();
        updateScore();
        updateLives();
    }
    
    function updateScore() {
        ctx.font = '20px serif';
        ctx.fillText(`Score: ${score}`, 10, 30);
    }
    
    function updateLives() {
        ctx.font = '20px serif';
        ctx.fillText(`Lives: ${lives}`, canvas.width - 80, 30);
    }
    
    document.addEventListener('keydown', (event) => {
        if (event.key === 'ArrowLeft') {
            player.direction = 'left';
        }
        if (event.key === 'ArrowRight') {
            player.direction = 'right';
        }
    });
    
    document.addEventListener('keyup', (event) => {
        player.direction = '';
    });
    
    setInterval(() => {
        draw();
        update();
    }, 1000/60);
    
</script>
</body>
</html>