AI game creator

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

No:114

737

←

Prev Next

→

Ninja run game
Developer ひさひさ｜Date and time 23/5/20 1:37:05
Build time 109.294 sec｜Game capacity 4.23KB｜

Script

Score: 0

This is a simple ninja run game implemented in a single HTML file with JavaScript. It can be played on smartphones as well as on desktop browsers. The objective of the game is to avoid obstacles by jumping over them while collecting points. The player controls a ninja character that can jump by pressing the space bar key. The game features randomly generated obstacles and keeps track of the player’s score. The game ends if the player collides with an obstacle. The game uses a minimalist design, with a black background and colorful elements. Emojis are not used in the game, as it is not part of the requirements.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Ninja Run Game</title>
	<style>
		body {
			margin: 0;
			background-color: #2c3e50;
			color: #ecf0f1;
			font-family: Arial, sans-serif;
			text-align: center;
		}

#canvas {
			display: block;
			margin: 0 auto;
			border: 2px solid #fff;
		}

#score {
			font-size: 20px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="score">Score: 0</div>
	<script>
		// Ninja Run Game
		window.onload = function () {
			var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");

// Game variables
			var obstacles = [];
			var intervalId;
			var score = 0;
			var ninja = {
				x: 10,
				y: canvas.height - 50,
				width: 40,
				height: 50,
				jumping: false,
				jumpHeight: 120,
				jumpCount: 0,
				speed: 5,
				draw: function () {
					ctx.fillStyle = "#e67e22";
					ctx.fillRect(this.x, this.y, this.width, this.height);
				},
				jump: function () {
					if (this.jumping) {
						if (this.jumpCount >= this.jumpHeight) {
							this.jumping = false;
							this.jumpCount = 0;
						}
						else {
							this.y -= this.speed;
							this.jumpCount += this.speed;
						}
					}
				},
				fall: function () {
					if (this.y < canvas.height - 50) {
						this.y += this.speed;
					}
				},
				collisions: function () {
					for (var i = 0; i < obstacles.length; i++) {
						var obs = obstacles[i];
						if (this.x < obs.x + obs.width &&
							this.x + this.width > obs.x &&
							this.y < obs.y + obs.height &&
							this.y + this.height > obs.y) {
							// Collision detected
							clearInterval(intervalId);
							alert("Game over! Your score is " + score + ".");
							location.reload();
						}
					}
				}
			};

// Obstacle constructor
			function Obstacle(x, y, width, height) {
				this.x = x;
				this.y = y;
				this.width = width;
				this.height = height;
				this.speed = 5;
				this.draw = function () {
					ctx.fillStyle = "#3498db";
					ctx.fillRect(this.x, this.y, this.width, this.height);
				};
				this.move = function () {
					this.x -= this.speed;
				};
			}

// Game functions
			function updateScore() {
				score++;
				document.getElementById("score").innerHTML = "Score: " + score;
			}

function createObstacle() {
				var width = Math.floor(Math.random() * 40 + 20);
				var height = Math.floor(Math.random() * 80 + 20);
				var x = canvas.width + width;
				var y = canvas.height - height;
				var obstacle = new Obstacle(x, y, width, height);
				obstacles.push(obstacle);
			}

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

// Update and draw score
				updateScore();

// Draw ninja
				ninja.draw();

// Handle jump
				ninja.jump();

// Handle fall
				ninja.fall();

// Handle collisions
				ninja.collisions();

// Draw obstacles
				drawObstacles();

// Create new obstacle
				if (Math.random() < 0.01) {
					createObstacle();
				}
			}

// Event listeners
			document.addEventListener("keydown", function (event) {
				if (event.keyCode === 32) {
					ninja.jumping = true;
				}
			});

// Start game loop
			intervalId = setInterval(gameLoop, 20);
		};
	</script>
</body>
</html>

This is a simple ninja run game implemented in a single HTML file with JavaScript. It can be played on smartphones as well as on desktop browsers. The objective of the game is to avoid obstacles by jumping over them while collecting points. The player controls a ninja character that can jump by pressing the space bar key. The game features randomly generated obstacles and keeps track of the player's score. The game ends if the player collides with an obstacle. The game uses a minimalist design, with a black background and colorful elements. Emojis are not used in the game, as it is not part of the requirements.