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

No:2341

2559

←

Prev Next

→

Games to correct developmental disorders
Developer User3506｜Date and time 23/6/21 0:12:08
Build time 48.706 sec｜Game capacity 3.577KB｜

Script

以下がJavaScriptを含む1枚のhtmlファイルで実装された、スマホで遊べる発達障害改善ゲームのサンプルです。

発達障害改善ゲーム

あなたは発達障害を持った子どもです。学校での成績も悪く、友達も少ないでしょう。このゲームで訓練して、発達障害を克服しましょう！

画面をタップして、クマを操作してください。

このゲームでは、クマを操作してより多くのスコアを獲得することが目的です。クマを移動させる方法は、「←↑→↓の矢印キーを押す」または「画面をタップしてマウスで移動させる」ことができます。クマが画面外にでるとゲームオーバーで、スコアがカウントされます。スコアが高いほど、自分の発達障害克服能力が高いことになります。

←

Prev　Next

→ 　

Back　

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

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

以下がJavaScriptを含む1枚のhtmlファイルで実装された、スマホで遊べる発達障害改善ゲームのサンプルです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>発達障害改善ゲーム</title>
	<style>
		canvas {
			border: 1px solid black;
			background-color: lightgray;
		}
	</style>
</head>
<body>
	<h1>発達障害改善ゲーム</h1>
	<p>あなたは発達障害を持った子どもです。学校での成績も悪く、友達も少ないでしょう。このゲームで訓練して、発達障害を克服しましょう！</p>
	<p>画面をタップして、クマを操作してください。</p>
	<canvas id="gameCanvas"></canvas>
	<p id="score">0</p>
	
	<script>
		// 変数定義
		let canvas = document.getElementById("gameCanvas");
		let context = canvas.getContext("2d");
		let scoreElement = document.getElementById("score");
		let score = 0;
		let intervalId;
		let x = canvas.width/2;
		let y = canvas.height/2;
		let dx = 0;
		let dy = 0;
		let speed = 4;
		
		// イベントリスナー登録
		document.addEventListener("keydown", keydownHandler, false);
		document.addEventListener("keyup", keyupHandler, false);
		canvas.addEventListener("mousedown", mouseDownHandler, false);
		canvas.addEventListener("mouseup", mouseUpHandler, false);
		
		// ゲーム開始
		startGame();
		
		// キーダウンのハンドラー
		function keydownHandler(event) {
			if (event.keyCode == 37) {  // left arrow
				dx = -speed;
			} else if (event.keyCode == 38) {  // up arrow
				dy = -speed;
			} else if (event.keyCode == 39) {  // right arrow
				dx = speed;
			} else if (event.keyCode == 40) {  // down arrow
				dy = speed;
			}
		}
		
		// キーアップのハンドラー
		function keyupHandler(event) {
			if (event.keyCode == 37 || event.keyCode == 39) {  // left or right arrow
				dx = 0;
			} else if (event.keyCode == 38 || event.keyCode == 40) {  // up or down arrow
				dy = 0;
			}
		}
		
		// マウスダウンのハンドラー
		function mouseDownHandler(event) {
			dx = (event.clientX-canvas.offsetLeft-x) / 10;
			dy = (event.clientY-canvas.offsetTop-y) / 10;
		}
		
		// マウスアップのハンドラー
		function mouseUpHandler(event) {
			dx = 0;
			dy = 0;
		}
		
		// ゲーム開始の関数
		function startGame() {
			intervalId = setInterval(updateGame, 20);
		}
		
		// ゲーム更新の関数
		function updateGame() {
			// クマが画面外にでたら、ゲームオーバー
			if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
				clearInterval(intervalId);
				alert("ゲームオーバー！あなたのスコアは" + score + "点でした。");
				return;
			}
			
			// クマを移動
			x += dx;
			y += dy;
			
			// スコアを更新
			score += 1;
			scoreElement.textContent = score;
			
			// 画面をクリア
			context.clearRect(0, 0, canvas.width, canvas.height);
			
			// クマを描画
			context.beginPath();
			context.arc(x, y, 20, 0, Math.PI*2);
			context.fillStyle = "yellow";
			context.fill();
			context.closePath();
		}
	</script>
</body>
</html>