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

No:11391

130

←

Prev Next

→

Tree fight and race tree
Developer User4871｜Date and time 23/8/9 13:34:55
Build time 29.424 sec｜Game capacity 3.548KB｜

Script

Sure! Below is an example of a simple game called "Tree Fight and Race Tree" implemented as a single HTML file with JavaScript. The game involves a tree fighting against other trees and participating in a race with another tree.

Tree Fight and Race Tree

To play the game, open the HTML file in a web browser, and you can control the tree using the arrow keys on your smartphone. The game involves fighting against another tree and participating in a race with another tree. When the tree collides with the other tree, a message will be displayed indicating either a "Tree fight!" or a "Race tree!" event. You can also add additional game logic and features based on these events.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
	<title>Tree Fight and Race Tree</title>
	<style>
		* {
			box-sizing: border-box;
		}

canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>Tree Fight and Race Tree</h1>
	<canvas id="gameCanvas" width="400" height="400"></canvas>

// Canvas setup
		const canvas = document.getElementById('gameCanvas');
		const ctx = canvas.getContext('2d');

// Tree object
		const tree = {
			x: canvas.width / 2,
			y: canvas.height / 2,
			size: 40,
			color: 'green',
			speed: 5,
			draw: function() {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
				ctx.fillStyle = this.color;
				ctx.fill();
				ctx.closePath();
			},
			move: function(dx, dy) {
				this.x += dx * this.speed;
				this.y += dy * this.speed;
			}
		};

// Other tree object (for fighting)
		const otherTree = {
			x: Math.random() * canvas.width,
			y: Math.random() * canvas.height,
			size: 40,
			color: 'brown',
			draw: function() {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
				ctx.fillStyle = this.color;
				ctx.fill();
				ctx.closePath();
			}
		};

// Race tree object
		const raceTree = {
			x: Math.random() * canvas.width,
			y: Math.random() * canvas.height,
			size: 40,
			color: 'blue',
			draw: function() {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
				ctx.fillStyle = this.color;
				ctx.fill();
				ctx.closePath();
			}
		};

// Event listener for arrow key presses
		document.addEventListener('keydown', function(event) {
			const key = event.key;
			switch (key) {
				case 'ArrowUp':
					tree.move(0, -1);
					break;
				case 'ArrowDown':
					tree.move(0, 1);
					break;
				case 'ArrowLeft':
					tree.move(-1, 0);
					break;
				case 'ArrowRight':
					tree.move(1, 0);
					break;
			}
		});

// Game loop
		function gameLoop() {
			// Clear canvas
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw trees
			tree.draw();
			otherTree.draw();
			raceTree.draw();

// Check collision between tree and other tree
			if (isColliding(tree, otherTree)) {
				alert('Tree fight!');
				// Additional game logic for tree fight can be implemented here
			}

// Check collision between tree and race tree
			if (isColliding(tree, raceTree)) {
				alert('Race tree!');
				// Additional game logic for race can be implemented here
				// For example, showing a message indicating the tree won the race
			}

// Request animation frame
			requestAnimationFrame(gameLoop);
		}

// Detect collision between two objects
		function isColliding(obj1, obj2) {
			const distance = Math.sqrt(Math.pow(obj1.x - obj2.x, 2) + Math.pow(obj1.y - obj2.y, 2));
			return distance < obj1.size + obj2.size;
		}

// Start the game loop
		gameLoop();
	</script>
</body>
</html>

```