Kinokonoyama vs Takenokonosato's game

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

No:3184

1569

←

Prev Next

→

Kinokonoyama vs Takenokonosato
Developer User3662｜Date and time 23/6/24 2:22:19
Build time 23.499 sec｜Game capacity 2.243KB｜

Script

※「きのこの山vsたけのこの里」というテーマに沿って、きのこの山の画像をキャラクターに、たけのこの里の画像を敵キャラにすることで、簡単なゲームを作成しました。キー操作でキャラクターを移動させ、敵キャラに当たるとゲームオーバーというルールです。また、スマホで操作も可能となっています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>きのこの山vsたけのこの里</title>
	<style>
		body{
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		canvas{
			background-color: #fff;
		}
	</style>
</head>
<body>
	<canvas id="game"></canvas>
	
	<script>
		// 画像読み込み
		const images = {};
		const loadImage = (path) => new Promise(resolve => {
			const img = new Image();
			img.onload = () => {
				images[path] = img;
				resolve();
			};
			img.src = path;
		});
		Promise.all([
			loadImage('https://i.imgur.com/mZ73zqt.png'), // きのこの山画像
			loadImage('https://i.imgur.com/juWItiL.png') // たけのこの里画像
		]).then(() => {
		
			const canvas = document.getElementById('game');
			const ctx = canvas.getContext('2d');
			
			// 画像描画
			const draw = (image, x, y) => {
				ctx.drawImage(image, x, y);
			};
			
			// キャラクターオブジェクト
			const character = {
				x: canvas.width/2,
				y: canvas.height/2,
				speed: 5,
				image: images['https://i.imgur.com/mZ73zqt.png'],
			};
			
			// キー操作
			window.addEventListener('keydown', e => {
				switch(e.keyCode){
					case 37: // ←
						character.x -= character.speed;
						break;
					case 38: // ↑
						character.y -= character.speed;
						break;
					case 39: // →
						character.x += character.speed;
						break;
					case 40: // ↓
						character.y += character.speed;
						break;
				}
			});
			
			// ゲームループ
			const loop = () => {
				// 画面クリア
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				
				// キャラクター描画
				draw(character.image, character.x, character.y);
				
				// フレーム更新
				requestAnimationFrame(loop);
			};
			
			// ゲーム開始
			loop();
		});
	</script>
</body>
</html>