a classic flying cube that came shoot lines and random objects shoot back a the player's game

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

No:39988

←

Prev Next

→

a classic flying cube that came shoot lines and ra..ALL
Developer User17931｜Date and time 24/1/31 12:37:51
Build time 21.546 sec｜Game capacity 7.353KB｜

Script

Sure! Here's an example of a game where a flying cube shoots lines at randomly generated objects that shoot back at the player. The game will be playable on a smartphone and will use pictograms where possible. Remember to save this code in a single HTML file.

This code will create a canvas element where the game will be played. The player is represented by a blue cube that can shoot projectiles (yellow circles). The enemies are represented by red circles. The player needs to shoot the enemies while avoiding collision with them. The game keeps track of the score, and when the player collides with an enemy, the game ends and a message displaying the final score is shown.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flying Cube Game</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Create the player object
        class Player {
            constructor(x, y, width, height, color) {
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
                this.color = color;
            }

draw() {
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }

update() {
                this.draw();
            }
        }

// Create the projectile object
        class Projectile {
            constructor(x, y, radius, color, velocity) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.color = color;
                this.velocity = velocity;
            }

draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fill();
            }

update() {
                this.draw();
                this.x += this.velocity.x;
                this.y += this.velocity.y;
            }
        }

// Create the enemy object
        class Enemy {
            constructor(x, y, radius, color, velocity) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.color = color;
                this.velocity = velocity;
            }

draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fill();
            }

update() {
                this.draw();
                this.x += this.velocity.x;
                this.y += this.velocity.y;
            }
        }

// Initialize game elements and start the game loop
        function init() {
            canvas = document.getElementById('gameCanvas');
            ctx = canvas.getContext('2d');

player = new Player(
                canvas.width / 2 - 25,
                canvas.height - 50,
                50,
                50,
                'blue'
            );

projectiles = [];
            enemies = [];

score = 0;

createEnemies();

document.addEventListener('keydown', shootProjectile);

animate();
        }

// Game loop
        function animate() {
            animationId = requestAnimationFrame(animate);
            ctx.clearRect(0, 0, canvas.width, canvas.height);

player.update();

projectiles.forEach((projectile, projectileIndex) => {
                projectile.update();

// Remove projectiles that go off the canvas
                if (
                    projectile.x + projectile.radius < 0 ||
                    projectile.x - projectile.radius > canvas.width ||
                    projectile.y + projectile.radius < 0 ||
                    projectile.y - projectile.radius > canvas.height
                ) {
                    setTimeout(() => {
                        projectiles.splice(projectileIndex, 1);
                    }, 0);
                }
            });

enemies.forEach((enemy, enemyIndex) => {
                enemy.update();

const distance = Math.hypot(
                    player.x - enemy.x,
                    player.y - enemy.y
                );

// Game over condition
                if (distance - enemy.radius - player.height < 1) {
                    cancelAnimationFrame(animationId);
                    alert('Game Over! Your score: ' + score);

document.removeEventListener('keydown', shootProjectile);
                }

// Check if projectile hits enemy
                projectiles.forEach((projectile, projectileIndex) => {
                    const distance = Math.hypot(
                        projectile.x - enemy.x,
                        projectile.y - enemy.y
                    );

if (distance - enemy.radius - projectile.radius < 1) {
                        // Increase score
                        score += 100;
                        document.getElementById('score').innerHTML = 'Score: ' + score;

// Remove enemy and projectile
                        setTimeout(() => {
                            enemies.splice(enemyIndex, 1);
                            projectiles.splice(projectileIndex, 1);
                        }, 0);
                    }
                });
            });
        }

// Create enemies at random positions and velocities
        function createEnemies() {
            setInterval(() => {
                const radius = Math.random() * (30 - 5) + 5;
                let x, y;

if (Math.random() < 0.5) {
                    x = Math.random() < 0.5 ? 0 - radius : canvas.width + radius;
                    y = Math.random() * canvas.height;
                } else {
                    x = Math.random() * canvas.width;
                    y = Math.random() < 0.5 ? 0 - radius : canvas.height + radius;
                }

const color = 'red';
                const angle = Math.atan2(player.y - y, player.x - x);
                const velocity = {
                    x: Math.cos(angle) * 1.5,
                    y: Math.sin(angle) * 1.5
                };

enemies.push(new Enemy(x, y, radius, color, velocity));
            }, 1000);
        }

// Shoot a projectile when space key is pressed
        function shootProjectile(event) {
            if (event.code === 'Space') {
                const angle = Math.atan2(
                    event.clientY - player.y,
                    event.clientX - player.x
                );

const velocity = {
                    x: Math.cos(angle) * 5,
                    y: Math.sin(angle) * 5
                };

projectiles.push(new Projectile(player.x, player.y, 5, 'yellow', velocity));
            }
        }

// Start the game
        init();
    </script>
</body>
</html>
```