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

No:34144

←

Prev Next

→

particle
Developer User16126｜Date and time 24/1/8 16:52:07
Build time 33.768 sec｜Game capacity 3.442KB｜

Script

Sure, here's a simple game implemented as a single HTML file using JavaScript, designed for smartphone operation and using pictograms:

Particle Game

Score: 0

This game is a simple particle-hunting game where the player needs to tap/click on a moving particle (represented by a blue square) on the canvas to increase their score. The score is displayed at the top, and each time the particle is successfully clicked, the particle's position changes randomly on the canvas, and the score is updated. The game is designed for smartphone operation and adjusts the canvas size accordingly.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple game implemented as a single HTML file using JavaScript, designed for smartphone operation and using pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Particle Game</title>
    <style>
        body {
            background-color: #f3f3f3;
            text-align: center;
            padding-top: 50px;
            font-family: Arial, sans-serif;
            font-size: 20px;
        }

#canvas {
            border: 1px solid black;
            width: 300px;
            height: 300px;
            margin: 0 auto;
        }

#score {
            margin-top: 20px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>Particle Game</h1>
    <canvas id="canvas"></canvas>
    <div id="score">Score: 0</div>

// Set canvas size
        canvas.width = 300;
        canvas.height = 300;

// Set particle properties
        const particleSize = 20;
        let particleX = null;
        let particleY = null;
        let score = 0;

// Generate random particle position
        function generateRandomParticlePosition() {
            particleX = Math.floor(Math.random() * (canvas.width - particleSize));
            particleY = Math.floor(Math.random() * (canvas.height - particleSize));
        }

// Render particle on canvas
        function renderParticle() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'blue';
            ctx.fillRect(particleX, particleY, particleSize, particleSize);
        }

// Handle touch/click events
        function handleTouchEvent(event) {
            const rect = canvas.getBoundingClientRect();
            const touchX = event.touches[0].clientX - rect.left;
            const touchY = event.touches[0].clientY - rect.top;

// Check if user touched the particle
            if (
                touchX >= particleX && touchX <= particleX + particleSize &&
                touchY >= particleY && touchY <= particleY + particleSize
            ) {
                score++;
                generateRandomParticlePosition();
                renderParticle();
                updateScore();
            }
        }

// Update score display
        function updateScore() {
            document.getElementById('score').textContent = `Score: ${score}`;
        }

// Initialize game
        function initializeGame() {
            // Generate initial particle position
            generateRandomParticlePosition();

// Attach touch event listener
            canvas.addEventListener('touchstart', handleTouchEvent);

// Render particle
            renderParticle();

// Display initial score
            updateScore();
        }

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