AI game creator

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

No:21671

←

Prev Next

→

particle
Developer User9971｜Date and time 23/10/17 8:54:51
Build time 86.02 sec｜Game capacity 2.721KB｜

Script

Sure! Here's a simple game implemented as a single HTML file using JavaScript and enclosed in script tags.

This game uses an HTML canvas element to draw and animate particles. When you touch the screen, a new particle is created at the touch location, and the particles move around the screen with a random speed. The particles wrap around the screen edges, ensuring they remain visible. Please note that this game is a basic example and can be further enhanced with additional features, levels, and objectives according to your requirements.

←

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 and enclosed in script tags.

```html
<!DOCTYPE html>
<html>
<head>
	<title>Particle Game</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
		}

canvas {
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas"></canvas>

init: function() {
				// Create the canvas
				this.canvas = document.getElementById('gameCanvas');
				this.context = this.canvas.getContext('2d');
				this.canvas.width = window.innerWidth;
				this.canvas.height = window.innerHeight;

// Start the game loop
				this.gameLoopInterval = setInterval(() => {
					this.update();
					this.draw();
				}, 1000 / 30); // 30 FPS

// Register touch event listener
				this.canvas.addEventListener('touchstart', (e) => {
					this.handleClick(e.touches[0].clientX, e.touches[0].clientY);
				});
			},

update: function() {
				// Update the particles' positions
				this.particles.forEach(p => {
					p.x += p.xSpeed * this.particleSpeed;
					p.y += p.ySpeed * this.particleSpeed;

// Wrap particles around the screen
					if ((p.x > this.canvas.width + this.particleSize) || (p.y > this.canvas.height + this.particleSize)) {
						p.x = Math.random() * this.canvas.width;
						p.y = Math.random() * this.canvas.height;
					}
				});
			},

draw: function() {
				// Clear the canvas
				this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

// Draw particles
				this.particles.forEach(p => {
					this.context.beginPath();
					this.context.arc(p.x, p.y, this.particleSize, 0, 2 * Math.PI);
					this.context.fillStyle = this.particleColor;
					this.context.fill();
					this.context.closePath();
				});
			},

handleClick: function(x, y) {
				// Create a new particle at the touch location
				const newParticle = {
					x: x,
					y: y,
					xSpeed: Math.random() * 2 - 1,
					ySpeed: Math.random() * 2 - 1
				};

this.particles.push(newParticle);
			}
		};

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

Please note that this game is a basic example and can be further enhanced with additional features, levels, and objectives according to your requirements.