Create a game where you control a with obstacles's game

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

No:40870

←

Prev Next

→

Create a game where you control a with obstacles
Developer User18279｜Date and time 24/2/4 11:36:42
Build time 10.847 sec｜Game capacity 3.099KB｜

Script

Sure! Here's an example of a simple game where you control a character and avoid obstacles using JavaScript, HTML, and pictograms. This code needs to be saved in a single HTML file:

This game uses a canvas element to render the game graphics and handles the character's movement and obstacle scrolling. The character is controlled by pressing the "ArrowUp" key on a smartphone. The game keeps track of the score, and when the character collides with an obstacle, a game over message is shown with the final score.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure! Here's an example of a simple game where you control a character and avoid obstacles using JavaScript, HTML, and pictograms. This code needs to be saved in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
	<title>Obstacle Game</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="400" height="400"></canvas>
	
	<script>
		// Create the game canvas and context
		var canvas = document.getElementById("gameCanvas");
		var context = canvas.getContext("2d");
		
		// Character position and size variables
		var characterX = 50;
		var characterY = canvas.height / 2;
		var characterSize = 50; 
		
		// Obstacle position and size variables
		var obstacleX = canvas.width;
		var obstacleY = 0;
		var obstacleWidth = 30;
		var obstacleHeight = 200;
		
		// Variables for animation and control
		var animationFrame;
		var isJumping = false;
		var jumpHeight = 100;
		var gravity = 2;
		var score = 0;
		
		// Function to draw the character
		function drawCharacter() {
			context.fillRect(characterX, characterY, characterSize, characterSize);
		}
		
		// Function to draw the obstacle
		function drawObstacle() {
			context.fillRect(obstacleX, obstacleY, obstacleWidth, obstacleHeight);
		}
		
		// Function to update the game state
		function updateGame() {
			context.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
			
			// Update character position
			if (isJumping) {
				characterY -= gravity;
				if (characterY <= canvas.height - jumpHeight) {
					isJumping = false;
				}
			} else {
				characterY += gravity;
			}
			
			// Update obstacle position
			obstacleX -= 5;
			if (obstacleX + obstacleWidth <= 0) {
				obstacleX = canvas.width;
				score++;
			}
			
			// Check for collision
			if (characterX + characterSize >= obstacleX && characterX <= obstacleX + obstacleWidth &&
			    characterY + characterSize >= obstacleY && characterY <= obstacleY + obstacleHeight) {
				// Game over
				cancelAnimationFrame(animationFrame);
				alert("Game Over! Your score: " + score);
				location.reload(); // Reset the game
			}
			
			// Draw character, obstacle, and score
			drawCharacter();
			drawObstacle();
			context.fillText("Score: " + score, 10, 20);
			
			// Call the updateGame function again at the next frame
			animationFrame = requestAnimationFrame(updateGame);
		}
		
		// Function to handle keydown events
		function handleKeyDown(event) {
			if (event.key === "ArrowUp") {
				event.preventDefault(); // Prevent scrolling
				if (!isJumping) {
					isJumping = true;
				}
			}
		}
		
		// Register the keydown event listener
		document.addEventListener("keydown", handleKeyDown);
		
		// Start the game
		updateGame();
	</script>
</body>
</html>
```