どうぶつスクールシミュレーター - ライオンガツンとマシマシゲーム

開発者がアップデートを放置しているので、ライオンが怒ってガツンとマシマシするゲームです。

※画像はlion.pngを同じディレクトリに置いてください。

←

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>どうぶつスクールシミュレーター - ライオンガツンとマシマシゲーム</title>
	<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	canvas {
		display: block;
		margin: 0 auto;
	}
	</style>
</head>
<body>
	<h1>どうぶつスクールシミュレーター - ライオンガツンとマシマシゲーム</h1>
	<p>開発者がアップデートを放置しているので、ライオンが怒ってガツンとマシマシするゲームです。</p>
	<canvas id="canvas"></canvas>
	<script>
	//キャンバスの設定
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

//画像読み込み
	var lionImg = new Image();
	lionImg.src = 'lion.png';

//ライオンの初期設定
	var lion = {
		x: canvas.width / 2,
		y: canvas.height / 2,
		size: 100,
		speed: 10
	};

//描画
	function draw() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		ctx.drawImage(lionImg, lion.x - lion.size / 2, lion.y - lion.size / 2, lion.size, lion.size);
	}

//ゲームループ
	function gameLoop() {
		draw();
	}

//キー入力
	window.addEventListener('keydown', function(e) {
		switch(e.keyCode) {
			case 37: //左
				lion.x -= lion.speed;
				break;
			case 38: //上
				lion.y -= lion.speed;
				break;
			case 39: //右
				lion.x += lion.speed;
				break;
			case 40: //下
				lion.y += lion.speed;
				break;
			case 32: //スペース
				lion.size += 10;
				break;
		}
	});

//ゲーム開始
	setInterval(gameLoop, 30);
	</script>
</body>
</html>

※画像はlion.pngを同じディレクトリに置いてください。