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

No:3602

3695

Kumamon (variety of Japanese bear design)
Developer User3589｜Date and time 23/6/25 19:11:42
Build time 43.22 sec｜Game capacity 3.504KB｜

さんの冒険くまモンさんが冒険するゲームです。スマホで遊べます。目的：くまモンさんが旗を探して冒険するゲームです。全ての旗を見つけたらゲームクリアです。操作：・上下左右の矢印ボタンでくまモンさんを移動させます。・障害物に当たるとゲームオーバーです。・旗を見つけると1ポイント加算されます。絵文字：・くまモンさん：🐻 ・旗：🚩 ・障害物：💥 プログラム：

くまモンさんの冒険

旗を探してくまモンさんを移動させよう

旗の数： 0 / 5

以上のプログラムは、障害物、旗、くまモンさんにそれぞれ div を用いた要素を生成し、キー押下でくまモンさんを操作することができます。目的であった旗の探索、コレクションに成功するとゲームクリアという設定になっています。また、絵文字も用いることができております。

→ 　

1　

1　

　
　
　
　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

さんの冒険

くまモンさんが冒険するゲームです。スマホで遊べます。

目的：くまモンさんが旗を探して冒険するゲームです。全ての旗を見つけたらゲームクリアです。

操作：
・上下左右の矢印ボタンでくまモンさんを移動させます。
・障害物に当たるとゲームオーバーです。
・旗を見つけると1ポイント加算されます。

絵文字：
・くまモンさん：🐻
・旗：🚩
・障害物：💥

プログラム：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>くまモンさんの冒険</title>
	<script>
		document.onkeydown = function(e){
			switch(e.keyCode){
				//上
				case 38:
					if(kumamon_y > 50){
						kumamon_y -= 50;
						moveKumamon();
					}
					break;
				//下
				case 40:
					if(kumamon_y < 450){
						kumamon_y += 50;
						moveKumamon();
					}
					break;
				//左
				case 37:
					if(kumamon_x > 50){
						kumamon_x -= 50;
						moveKumamon();
					}
					break;
				//右
				case 39:
					if(kumamon_x < 450){
						kumamon_x += 50;
						moveKumamon();
					}
					break;
			}
		}

var kumamon_x = 50;
		var kumamon_y = 50;
		var flag_num = 0;
		var flag_arr = [
			{x: 250, y: 250},
			{x: 450, y: 450},
			{x: 150, y: 450},
			{x: 350, y: 150},
			{x: 50, y: 450}
		];
		var obstacle_arr = [
			{x: 150, y: 350},
			{x: 450, y: 50},
			{x: 300, y: 150},
			{x: 250, y: 400}
		];

window.onload = function(){
			for(var i=0; i<flag_arr.length; i++){
				var flagDiv = document.createElement("div");
				flagDiv.innerText = "🚩";
				flagDiv.style.position = "absolute";
				flagDiv.style.left = flag_arr[i].x + "px";
				flagDiv.style.top = flag_arr[i].y + "px";
				document.body.appendChild(flagDiv);
			}
			for(var i=0; i<obstacle_arr.length; i++){
				var obstacleDiv = document.createElement("div");
				obstacleDiv.innerText = "💥";
				obstacleDiv.style.position = "absolute";
				obstacleDiv.style.left = obstacle_arr[i].x + "px";
				obstacleDiv.style.top = obstacle_arr[i].y + "px";
				document.body.appendChild(obstacleDiv);
			}
			moveKumamon();
		}

function moveKumamon(){
			var kumamonDiv = document.createElement("div");
			kumamonDiv.innerText = "🐻";
			kumamonDiv.style.position = "absolute";
			kumamonDiv.style.left = kumamon_x + "px";
			kumamonDiv.style.top = kumamon_y + "px";
			document.body.appendChild(kumamonDiv);

for(var i=0; i<obstacle_arr.length; i++){
				if(kumamon_x == obstacle_arr[i].x && kumamon_y == obstacle_arr[i].y){
					alert("GAME OVER");
					location.reload();
					break;
				}
			}

for(var i=0; i<flag_arr.length; i++){
				if(kumamon_x == flag_arr[i].x && kumamon_y == flag_arr[i].y){
					flag_arr.splice(i, 1);
					flag_num++;
					if(flag_num == 5){
						alert("CLEAR!");
						location.reload();
					}
				}
			}
		}

</script>
	<style>
		div{
			font-size: 50px;
		}
	</style>
</head>
<body>
	<h1>くまモンさんの冒険</h1>
	<p>旗を探してくまモンさんを移動させよう</p>
	<p>旗の数： <span id="flag_num">0</span> / 5</p>

</body>
</html>

以上のプログラムは、障害物、旗、くまモンさんにそれぞれ div を用いた要素を生成し、キー押下でくまモンさんを操作することができます。目的であった旗の探索、コレクションに成功するとゲームクリアという設定になっています。また、絵文字も用いることができております。