A game of lion rampage in Dosk 2

Use the left and right arrow keys to move the lion and、Use the space key to jump.

*The above code is、An image file named lion.png must be placed in the same directory. Also、By changing the screen size, movement speed, etc.、It can make the game more playable.

←

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>どうスク2のライオンが大暴れするゲーム</title>
</head>
<body>
	<div style="text-align:center;">
		<h1>どうスク2のライオンが大暴れするゲーム</h1>
		<canvas id="canvas" width="500" height="400"></canvas>
		<p>左右の矢印キーでライオンを移動し、スペースキーでジャンプします。</p>
	</div>

var lionImg = new Image();
		lionImg.src = "lion.png";

var lionX = 50;
		var lionY = 250;
		var lionWidth = 100;
		var lionHeight = 100;

var groundY = 350;

var speedX = 5;
		var speedY = 0;
		var gravity = 0.5;

// キーイベントのリスナー
		document.addEventListener("keydown", function(event) {
			if (event.keyCode === 37) {
				speedX = -5;
			} else if (event.keyCode === 39) {
				speedX = 5;
			} else if (event.keyCode === 32) {
				if (lionY >= groundY - lionHeight) {
					speedY = -10;
				}
			}
		});

// ゲームループ
		setInterval(function() {
			// 背景
			ctx.fillStyle = "#88bbff";
			ctx.fillRect(0, 0, canvas.width, canvas.height);

// ライオン
			ctx.drawImage(lionImg, lionX, lionY, lionWidth, lionHeight);

// 地面
			ctx.fillStyle = "#008800";
			ctx.fillRect(0, groundY, canvas.width, canvas.height - groundY);

// ライオンの移動
			lionX += speedX;
			speedY += gravity;
			lionY += speedY;

// 画面外に出ないように
			if (lionX < 0) {
				lionX = 0;
			} else if (lionX > canvas.width - lionWidth) {
				lionX = canvas.width - lionWidth;
			}

if (lionY > groundY - lionHeight) {
				lionY = groundY - lionHeight;
			}
		}, 20);
	</script>
</body>
</html>

※上記のコードは、lion.pngという名前の画像ファイルを同じディレクトリに置いておく必要があります。また、画面サイズや移動速度などを変更することで、より遊びやすいゲームにすることができます。