Up the evidence! SNS game!'s game

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

No:3202

167

←

Prev Next

→

Up the evidence! SNS game!
Developer User3589｜Date and time 23/6/24 5:44:56
Build time 39.846 sec｜Game capacity 4.202KB｜

Script

「Emoji Run」というゲームを作りました！これは、プレイヤーが絵文字のキャラクターを操作し、障害物を避けながらランニングするゲームです。以下が実装されたHTMLコードになります。

Score: 0

😀

このゲームでは、画面をタップまたはスペースキーを押すことで絵文字キャラクターがジャンプします。プレイヤーの目的は、できるだけ長く障害物を避けてスコアを稼ぐことです。スマホで操作する前提に合わせて、タッチイベントもサポートしています。ゲームをプレイするには、ブラウザでこのHTMLファイルを開いてください。また、絵文字を使ってゲームが盛り上がるよう、可愛い感じのデザインにしました！

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

「Emoji Run」というゲームを作りました！これは、プレイヤーが絵文字のキャラクターを操作し、障害物を避けながらランニングするゲームです。

以下が実装されたHTMLコードになります。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Emoji Run</title>
	<style>
		#game-board{
			width: 100vw;
			height: 100vh;
			background-color: pink;
			position: relative;
		}

.emoji{
			font-size: 40px;
			position: absolute;
			transform: translateX(0px) translateY(0px);
			transition: all 0.3s ease-out;
		}

.obstacle{
			width: 50px;
			height: 50px;
			background-color: black;
			position: absolute;
			transform: translateX(0px) translateY(0px);
			transition: all 0.3s ease-out;
		}

#score{
			position: fixed;
			top: 10px;
			right: 10px;
			font-size: 30px;
		}
	</style>
</head>

<body>
	<div id="score">Score: 0</div>
	<div id="game-board">
		<p class="emoji">😀</p>
	</div>

//Game Variables
	let score = 0;
	let isGameRunning = false;
	let isJumping = false;

//HTML Elements
	const gameBoard = document.getElementById("game-board");
	const scoreElement = document.getElementById("score");
	const emoji = document.querySelector(".emoji");

function startGame(){
		isGameRunning = true;
		gameLoop();
	}

function gameLoop(){
		if(!isGameRunning) return;

//Move Obstacles
		moveObstacles();

//Apply Gravity if not jumping
		if(!isJumping){
			applyGravity();
		}

requestAnimationFrame(gameLoop);
	}

function applyGravity(){
		const emojiTop = parseInt(emoji.style.top) || 0;
		emoji.style.top = `${emojiTop + GRAVITY}px`;

if(emojiTop + emoji.offsetHeight >= gameBoard.offsetHeight){
			endGame();
		}
	}

function jump(){
		if(isJumping) return;
		isJumping = true;

function incrementScore(){
		score++;
		scoreElement.innerHTML = `Score: ${score}`;
	}

function checkCollision(obstacle){
		const emojiRect = emoji.getBoundingClientRect();
		const obstacleRect = obstacle.getBoundingClientRect();

if(emojiRect.right >= obstacleRect.left
			&& emojiRect.bottom >= obstacleRect.top
			&& emojiRect.left <= obstacleRect.right
			&& emojiRect.top <= obstacleRect.bottom)
		{
			endGame();
		}
	}

function endGame(){
		isGameRunning = false;
		alert("Game Over! Your score is " + score);
		document.location.reload();
	}

//Attach Event Listeners
	document.addEventListener("keydown", event => {
		if(event.code === "Space"){
			jump();
		}
	});

document.addEventListener("touchstart", event => {
		jump();
	});

startGame();
</script>

</body>
</html>
```

このゲームでは、画面をタップまたはスペースキーを押すことで絵文字キャラクターがジャンプします。プレイヤーの目的は、できるだけ長く障害物を避けてスコアを稼ぐことです。

スマホで操作する前提に合わせて、タッチイベントもサポートしています。ゲームをプレイするには、ブラウザでこのHTMLファイルを開いてください。

また、絵文字を使ってゲームが盛り上がるよう、可愛い感じのデザインにしました！