AI game creator

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

No:79

561

←

Prev Next

→

suck up the enemy
Developer anonymous｜Date and time 23/5/12 15:16:35
Build time 76.408 sec｜Game capacity 4.275KB｜

Script

Implemented by including JavaScript in the HTML file and、Created a game that sucks in enemies that can be played on your phone. It uses a lot of pictograms and、The operation method corresponds to screen touch. The following is the actual program.

In this game.、Manipulate the players pictograms.、The objective is to suck in the pictographs of enemies and make them bigger. Enemies are randomly generated and、When it hits a player, it is sucked in. It gets bigger as the player sucks it in.、The range in which enemies can be sucked in is expanded. It supports screen touch and、You can also play comfortably on your phone.

←

Prev　Next

→ 　

Back　

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

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

HTMLファイルにJavaScriptを含んで実装し、スマホでプレイ可能な敵を吸い込むゲームを作成しました。絵文字を多用し、操作方法は画面タッチに対応しています。以下が実際のプログラムです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Suck Up!</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        // Player Object
        const player = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            color: '😄',
            size: 50,
            speed: 10,
            radius: 25,
            draw: function() {
                ctx.fillStyle = 'black';
                ctx.font = `${this.size}px sans-serif`;
                ctx.fillText(this.color, this.x - this.radius, this.y + this.radius/2);
            }
        }
        
        // Enemies Array
        let enemies = [];
        const enemyColors = ['😈','👺','💀','👽','🦸','🐲'];
        const enemySpeed = 5;
        const enemySize = 35;
        function createEnemies(num) {
            for(let i=0; i<num; i++) {
                let colorIndex = Math.floor(Math.random() * enemyColors.length);
                let enemyColor = enemyColors[colorIndex];
                let enemy = {
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    color: enemyColor,
                    size: enemySize,
                    speed: enemySpeed,
                    radius: enemySize/2,
                    draw: function() {
                        ctx.fillStyle = 'black';
                        ctx.font = `${this.size}px sans-serif`;
                        ctx.fillText(this.color, this.x - this.radius, this.y + this.radius/2);
                    }
                }
                enemies.push(enemy);
            }
        }
        createEnemies(10);
        
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            player.draw();
            for(let i=0; i<enemies.length; i++) {
                enemies[i].draw();
            }
            requestAnimationFrame(animate);
        }
        animate();
        
        // Move Player
        function movePlayer(e) {
            if(e.touches) {
                let touchX = e.touches[0].clientX;
                let touchY = e.touches[0].clientY;
                let angle = Math.atan2(touchY - player.y, touchX - player.x);
                let xSpeed = Math.cos(angle) * player.speed;
                let ySpeed = Math.sin(angle) * player.speed;
                player.x += xSpeed;
                player.y += ySpeed;
            }
        }
        canvas.addEventListener('touchstart', movePlayer);
        canvas.addEventListener('touchmove', movePlayer);
        
        // Collision Detection
        function collisionDetection(player, enemy) {
            let distance = Math.sqrt((player.x - enemy.x) ** 2 + (player.y - enemy.y) ** 2);
            if(distance < player.radius + enemy.radius) {
                enemies.splice(enemies.indexOf(enemy), 1);
                player.size += 10;
                player.radius += 5;
            }
        }
        
        // Check for Collision
        function checkForCollision() {
            for(let i=0; i<enemies.length; i++) {
                collisionDetection(player, enemies[i]);
            }
        }
        setInterval(checkForCollision, 100);
        
    </script>
</body>
</html>

このゲームでは、プレイヤーの絵文字を操作して、敵の絵文字を吸い込んで大きくなっていくという目的があります。敵はランダムに生成され、プレイヤーにぶつかると吸い込まれます。プレイヤーが吸い込むにつれて大きくなり、敵を吸い込める範囲が広がっていきます。画面タッチに対応しており、スマホでも快適にプレイできます。