Beautiful game's game | AI game creator

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

No:3053

2325

Beautiful game
Developer anonymous｜Date and time 23/6/23 15:27:15
Build time 34.416 sec｜Game capacity 3.574KB｜

Here's a beautiful game implemented as a single HTML file with JavaScript. The game can be played on a smartphone, and includes the use of emojis to enhance the experience:

The game is called Emoji Runner and involves the player controlling an emoji character as they run through a series of obstacles. The player earns points for each obstacle they avoid, and the game ends when the player collides with an obstacle. The game is implemented using HTML and JavaScript, and is contained within a single HTML file. The code includes functions for drawing and updating the emoji character, obstacles, and score on the canvas, as well as a game loop that updates the game state and redraws the canvas on each frame. The emoji character is represented by the "🏃" emoji, and the obstacles are represented by rectangular blocks. The game is designed to be playable on a smartphone, with the canvas size set to 360x640 pixels. Overall, Emoji Runner is a fun and engaging game that demonstrates the power and flexibility of HTML and JavaScript for creating interactive web applications.

→ 　

1　

0　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

Here's a beautiful game implemented as a single HTML file with JavaScript. The game can be played on a smartphone, and includes the use of emojis to enhance the experience:

```html
<!DOCTYPE html>
<html>
<head>
	<title>Emoji Runner</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		canvas {
			display: block;
			margin: 0 auto;
			background-color: #ffe6e6;
		}
	</style>
</head>
<body>
	<canvas id="game" width="360" height="640"></canvas>
	<script>
		// initialize variables
		var canvas = document.getElementById("game");
		var ctx = canvas.getContext("2d");
		var score = 0;
		var gameOver = false;
		var emoji = "🏃";
		var obstacles = [
			{ x: 100, y: 0, w: 60, h: 30 },
			{ x: 200, y: 0, w: 60, h: 30 },
			{ x: 300, y: 0, w: 60, h: 30 },
			{ x: 50, y: 350, w: 60, h: 30 },
			{ x: 150, y: 350, w: 60, h: 30 },
			{ x: 250, y: 350, w: 60, h: 30 }
		];

// draw objects
		function drawEmoji() {
			ctx.font = "48px serif";
			ctx.fillText(emoji, 50, 100);
		}

function drawObstacles() {
			for (var i = 0; i < obstacles.length; i++) {
				ctx.fillRect(obstacles[i].x, obstacles[i].y, obstacles[i].w, obstacles[i].h);
			}
		}

function drawScore() {
			ctx.font = "24px serif";
			ctx.fillText("Score: " + score, 10, 30);
		}

// update objects
		function updateEmoji() {
			emoji = "🏃";
			if (gameOver) {
				emoji = "💀";
			}
		}

function updateObstacles() {
			for (var i = 0; i < obstacles.length; i++) {
				obstacles[i].y += 5;
				if (obstacles[i].y > canvas.height) {
					score++;
					obstacles[i].y = -30;
					obstacles[i].x = Math.random() * (canvas.width - obstacles[i].w);
				}
				if (checkCollision(obstacles[i])) {
					gameOver = true;
				}
			}
		}

function updateScore() {
			if (!gameOver) {
				score += 0.01;
				score = Math.round(score * 100) / 100;
			}
		}

// check collisions
		function checkCollision(obstacle) {
			var left = obstacle.x;
			var right = obstacle.x + obstacle.w;
			var top = obstacle.y;
			var bottom = obstacle.y + obstacle.h;
			var emojiLeft = 50;
			var emojiRight = 50 + 48;
			var emojiTop = 100;
			var emojiBottom = 100 + 48;
			if (emojiRight > left && emojiLeft < right && emojiBottom > top && emojiTop < bottom) {
				return true;
			}
			return false;
		}

// game loop
		function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			updateEmoji();
			drawEmoji();
			updateObstacles();
			drawObstacles();
			updateScore();
			drawScore();
			if (!gameOver) {
				window.requestAnimationFrame(gameLoop);
			}
		}

// initialize game
		gameLoop();
	</script>
</body>
</html>
```

The game is called Emoji Runner and involves the player controlling an emoji character as they run through a series of obstacles. The player earns points for each obstacle they avoid, and the game ends when the player collides with an obstacle.

The game is implemented using HTML and JavaScript, and is contained within a single HTML file. The code includes functions for drawing and updating the emoji character, obstacles, and score on the canvas, as well as a game loop that updates the game state and redraws the canvas on each frame.

The emoji character is represented by the "🏃" emoji, and the obstacles are represented by rectangular blocks. The game is designed to be playable on a smartphone, with the canvas size set to 360x640 pixels.

Overall, Emoji Runner is a fun and engaging game that demonstrates the power and flexibility of HTML and JavaScript for creating interactive web applications.