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

No:2463

Staff roll animation with epic fantasy ending
Developer anonymous｜Date and time 23/6/21 13:33:05
Build time 46.372 sec｜Game capacity 4.171KB｜

Script

を作ってみました。

Game Over

Retry

このゲームは、画面内を動くキャラクターを操作して、画面外に出たり、壁にぶつかったりしないようにしながら、できるだけ長い時間を生き残るゲームです。スコアが表示され、画面外に出るとゲームオーバーになり、リトライができます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

を作ってみました。

<!DOCTYPE html>
<html>
<head>
	<title>Ending Credits Animation</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #000;
			color: #fff;
			font-family: Arial, sans-serif;
			font-size: 16px;
			text-align: center;
		}
		
		canvas {
			display: block;
			margin: auto;
		}
		
		#gameover {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
			z-index: 100;
		}
		
		#gameover h1 {
			font-size: 60px;
			margin-top: 200px;
			text-shadow: 2px 2px #000;
		}
		
		#retry {
			display: block;
			margin: auto;
			padding: 10px;
			font-size: 30px;
			background-color: #fff;
			border-radius: 10px;
			cursor: pointer;
			text-shadow: 2px 2px #000;
		}
		
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="gameover">
		<h1>Game Over</h1>
		<div id="retry">Retry</div>
	</div>
	<script>
	
		// ゲームの設定
		const game = {
			canvas: document.getElementById("canvas"),
			width: 800,
			height: 600,
			score: 0,
			level: 1,
			gameover: false
		};
		
		// キャラクターの設定
		const character = {
			x: 100,
			y: 100,
			width: 50,
			height: 50,
			speed: 10,
			color: "#f00"
		};
		
		// スコアの描画
		function drawScore(ctx) {
			ctx.fillStyle = "#fff";
			ctx.font = "30px Arial, sans-serif";
			ctx.fillText("Score: " + game.score, 10, 50);
		}
		
		// ゲームオーバーの描画
		function drawGameOver(ctx) {
			ctx.fillStyle = "rgba(0,0,0,0.5)";
			ctx.fillRect(0, 0, game.width, game.height);
			ctx.fillStyle = "#fff";
			ctx.font = "60px Arial, sans-serif";
			ctx.fillText("Game Over", 200, 200);
			document.getElementById("gameover").style.display = "block";
		}
		
		// キャンバスの初期化
		function initCanvas() {
			game.canvas.width = game.width;
			game.canvas.height = game.height;
		}
		
		// キャラクターの描画
		function drawCharacter(ctx) {
			ctx.fillStyle = character.color;
			ctx.fillRect(character.x, character.y, character.width, character.height);
		}
		
		// キャラクターの移動
		function moveCharacter(direction) {
			switch(direction) {
				case "up":
					character.y -= character.speed;
					break;
				case "down":
					character.y += character.speed;
					break;
				case "left":
					character.x -= character.speed;
					break;
				case "right":
					character.x += character.speed;
					break;
			}
		}
		
		// ブロックの描画
		function drawBlock(ctx, x, y, width, height, color) {
			ctx.fillStyle = color;
			ctx.fillRect(x, y, width, height);
		}
		
		// ブロックとの当たり判定
		function checkCollision() {
			if(character.x < 0 || character.x + character.width > game.width || character.y < 0 || character.y + character.height > game.height) {
				game.gameover = true;
			}
		}
		
		// ゲームループ
		function gameLoop() {
			if(!game.gameover) {
				const ctx = game.canvas.getContext("2d");
				ctx.clearRect(0, 0, game.width, game.height);
				drawScore(ctx);
				drawCharacter(ctx);
				checkCollision();
				requestAnimationFrame(gameLoop);
			} else {
				const ctx = game.canvas.getContext("2d");
				drawGameOver(ctx);
			}
		}
		
		// イベントリスナーの設定
		document.addEventListener("keydown", function(event) {
			switch(event.code) {
				case "ArrowUp":
					moveCharacter("up");
					break;
				case "ArrowDown":
					moveCharacter("down");
					break;
				case "ArrowLeft":
					moveCharacter("left");
					break;
				case "ArrowRight":
					moveCharacter("right");
					break;
			}
		});
		
		document.getElementById("retry").addEventListener("click", function() {
			location.reload();
		});
		
		// 初期化
		initCanvas();
		gameLoop();
	
	</script>
</body>
</html>