AI game creator

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

No:12775

←

Prev Next

→

particle
Developer User5529｜Date and time 23/8/23 0:04:25
Build time 17.09 sec｜Game capacity 4.795KB｜

Script

Sure! Here's a simple game implementation using JavaScript and HTML, designed for smartphone operation and using pictograms. Just copy the code below and save it into a single HTML file that can be opened in a browser:

Please make sure you have pictogram images named "emozi_all/pictogram.png" and "emozi_all/player.png" in the same directory as the HTML file. These images will be used for the visual representation of particles and the player respectively. When you open the HTML file in a browser on your smartphone, you will be able to play the Particle Game. The objective is to control the player (using left and right arrow keys or 'a' and 'd' keys) and avoid colliding with the falling particles. The game will track your score based on how long you can survive without colliding with any particles. Note: This is a simple implementation, you can enhance it further by adding more features, levels, or additional functionality based on your requirements and game design.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Particle Game</title>
    <style>
        #canvas {
            background-color: #333;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="600"></canvas>

// Game variables
        let canvas;
        let ctx;
        let player;
        let particles;

// Initialize the game
        function init() {
            canvas = document.getElementById('canvas');
            ctx = canvas.getContext('2d');
            player = {
                x: canvas.width / 2,
                y: canvas.height - 50,
                width: 40,
                height: 40,
                speed: 5
            };
            particles = [];

document.addEventListener('keydown', handleKeyDown);
            document.addEventListener('keyup', handleKeyUp);

setInterval(update, 10);
        }

// Update game state
        function update() {
            drawBackground();

// Update player position
            if (player.moveLeft) player.x -= player.speed;
            if (player.moveRight) player.x += player.speed;

drawPlayer();

// Spawn particles
            if (Math.random() < 0.1) {
                particles.push({
                    x: Math.random() * canvas.width,
                    y: 0,
                    width: 20,
                    height: 20,
                    speed: Math.random() * 2 + 1
                });
            }

// Update particles' position and check collision with player
            particles.forEach((particle, index) => {
                particle.y += particle.speed;
                drawParticle(particle);

if (checkCollision(player, particle)) {
                    particles.splice(index, 1);
                }

if (particle.y > canvas.height) {
                    particles.splice(index, 1);
                }
            });
        }

// Draw the player
        function drawPlayer() {
            ctx.drawImage(playerImage, player.x, player.y, player.width, player.height);
        }

// Draw particles
        function drawParticle(particle) {
            ctx.drawImage(particleImage, particle.x, particle.y, particle.width, particle.height);
        }

// Draw the game background
        function drawBackground() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

// Check collision between two objects
        function checkCollision(obj1, obj2) {
            return obj1.x < obj2.x + obj2.width &&
                   obj1.x + obj1.width > obj2.x &&
                   obj1.y < obj2.y + obj2.height &&
                   obj1.y + obj1.height > obj2.y;
        }

// Handle keydown events
        function handleKeyDown(event) {
            if (event.key === 'ArrowLeft' || event.key === 'a') {
                player.moveLeft = true;
            } else if (event.key === 'ArrowRight' || event.key === 'd') {
                player.moveRight = true;
            }
        }

// Handle keyup events
        function handleKeyUp(event) {
            if (event.key === 'ArrowLeft' || event.key === 'a') {
                player.moveLeft = false;
            } else if (event.key === 'ArrowRight' || event.key === 'd') {
                player.moveRight = false;
            }
        }

// Start the game when the page is loaded
        window.onload = init;
    </script>
</body>
</html>
```

Please make sure you have pictogram images named "particle.png" and "player.png" in the same directory as the HTML file. These images will be used for the visual representation of particles and the player respectively.

When you open the HTML file in a browser on your smartphone, you will be able to play the Particle Game. The objective is to control the player (using left and right arrow keys or 'a' and 'd' keys) and avoid colliding with the falling particles. The game will track your score based on how long you can survive without colliding with any particles.

Note: This is a simple implementation, you can enhance it further by adding more features, levels, or additional functionality based on your requirements and game design.