Mario-like games where the main character is a dinosaur's game

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

No:1595

1142

←

Prev Next

→

Mario-like games where the main character is a din..ALL
Developer User3365｜Date and time 23/6/18 19:17:12
Build time 42.178 sec｜Game capacity 3.266KB｜

Script

설명: 거북이 게임과 비슷한 노래를 들으며 공룡을 조작하여 장애물인 선인장을 피하는 게임입니다. 공룡은 스페이스 바를 누르면 점프하며, 선인장을 모두 피하면 점수가 오릅니다. 하지만, 공룡이 선인장을 밟거나, 선인장에 부딪히면 게임이 끝나며, 다시 시작하기 전에 일시 정지할 수 있습니다.

←

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">
	<title>Dinosaur Game</title>
	<style>
		canvas {
			display: block;
			margin: auto;
			background-color: white;
			border: 3px solid black;
			image-rendering: pixelated;
		}
	</style>
</head>
<body onkeydown="handleKeyDown(event)">
	<canvas id="canvas" width="600" height="300"></canvas>
	<script>
		const canvas = document.getElementById("canvas");
		const ctx = canvas.getContext("2d");
		const dinoEmoji = "\ud83e\udd95";
		const cactusEmoji = "\ud83c\udf35";
		let score = 0;
		let gameStarted = false;
		let gamePaused = false;
		let gameOver = false;
		let jumpHeight = 80;
		let dinoPosY = canvas.height - jumpHeight;
		let dinoVelY = 0;
		let cactusPosX = canvas.width;
		let cactusVelX = -5;
		
		function startGame() {
			gameStarted = true;
			gameOver = false;
			score = 0;
			dinoVelY = 0;
			cactusPosX = canvas.width;
			document.getElementById("start-button").classList.add("hidden");
			document.getElementById("pause-button").classList.remove("hidden");
			document.getElementById("score").classList.remove("hidden");
			requestAnimationFrame(update);
		}
		
		function pauseGame() {
			gamePaused = !gamePaused;
			if (gamePaused) {
				document.getElementById("pause-button").innerHTML = "Resume";
			} else {
				document.getElementById("pause-button").innerHTML = "Pause";
				requestAnimationFrame(update);
			}
		}
		
		function handleKeyDown(event) {
			if (event.code === "Space" && dinoPosY === canvas.height - jumpHeight) {
				dinoVelY = -15;
			} else if (event.code === "KeyP") {
				pauseGame();
			}
		}
		
		function update() {
			if (!gamePaused && !gameOver) {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				ctx.fillText(dinoEmoji, 50, dinoPosY);
				ctx.fillText(cactusEmoji, cactusPosX, canvas.height - 30);
				ctx.fillStyle = "black";
				ctx.font = "30px Arial";
				ctx.fillText(score, 10, 30);
				dinoVelY += 1;
				dinoPosY += dinoVelY;
				if (dinoPosY >= canvas.height - jumpHeight) {
					dinoPosY = canvas.height - jumpHeight;
				}
				cactusPosX += cactusVelX;
				if (cactusPosX < -50) {
					score += 10;
					cactusPosX = canvas.width;
				}
				if (cactusPosX < 100 && dinoPosY > canvas.height - 60) {
					gameOver = true;
					document.getElementById("game-over").classList.remove("hidden");
					document.getElementById("pause-button").classList.add("hidden");
					document.getElementById("restart-button").classList.remove("hidden");
				}
				requestAnimationFrame(update);
			}
		}
	</script>
	<div id="score" class="hidden">Score: 0</div>
	<button id="start-button" onclick="startGame()">Start Game</button>
	<button id="pause-button" class="hidden" onclick="pauseGame()">Pause</button>
	<button id="restart-button" class="hidden" onclick="startGame()">Restart</button>
	<div id="game-over" class="hidden">Game Over</div>
</body>
</html>