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

No:175

231

AHA experience
Developer User2754｜Date and time 23/6/3 4:56:08
Build time 79.301 sec｜Game capacity 2.802KB｜

ご依頼ありがとうございます。以下が、アハ体験のゲームを1枚のhtmlファイルに実装したサンプルプログラムです。JavaScriptを含んでおり、スマホで遊べるように画面サイズに合わせて自動調整されます。また、絵文字を多めに使用し、ゲームの簡単な概要も表示されます。

アハ体験ゲーム

スマホで遊べます！

このプログラムを実行すると、画面に「アハ体験ゲーム」というタイトルと、「スマホで遊べます！」という文言が表示されます。キャンバスの中央には「答えを見たらアハ体験が終わります。答えを見ずに10秒間待ちましょう！」というゲームの説明文が表示され、10秒後にランダムに選ばれた答えが表示されます。スマホで操作できるように画面サイズに合わせて自動調整されているので、画面サイズを変えても問題ありません。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

ご依頼ありがとうございます。以下が、アハ体験のゲームを1枚のhtmlファイルに実装したサンプルプログラムです。JavaScriptを含んでおり、スマホで遊べるように画面サイズに合わせて自動調整されます。また、絵文字を多めに使用し、ゲームの簡単な概要も表示されます。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>アハ体験ゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #FFF5EE;
			font-size: 24px;
			text-align: center;
		}
		canvas {
			width: 100%;
			height: 100%;
			display: inline-block;
			background-color: #FAEBD7;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<h1>アハ体験ゲーム</h1>
	<p>スマホで遊べます！</p>
	<canvas id="gameCanvas"></canvas>
	<script>
		// ゲームの概要
		var gameIntro = "答えを見たらアハ体験が終わります。答えを見ずに10秒間待ちましょう！";

// 答えのリスト
		var answerList = ["👻", "🎃", "🦇", "🕸️", "🕷️"];

// ゲームスタート時の時間
		var startTime = 0;

// ゲーム画面の表示用キャンバス
		var canvas = document.getElementById("gameCanvas");
		var ctx = canvas.getContext("2d");
		resizeCanvas();
		
		// 画面サイズに合わせてキャンバスのサイズを調整する
		window.onresize = resizeCanvas;
		function resizeCanvas() {
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight - 100;
		}

// ゲームを開始する
		window.onload = function() {
			startGame();
		}
		
		function startGame() {
			// ゲームの説明を表示する
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillText(gameIntro, 0, canvas.height / 2 - 50);

// 10秒後に答えを表示する
			setTimeout(function() {
				showAnswer();
			}, 10000);
		}
		
		function showAnswer() {
			// 答えをランダムに選び、表示する
			var answer = answerList[Math.floor(Math.random() * answerList.length)];
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillText(answer, canvas.width / 2 - 50, canvas.height / 2 - 50);
		}
	</script>
</body>
</html>
```

このプログラムを実行すると、画面に「アハ体験ゲーム」というタイトルと、「スマホで遊べます！」という文言が表示されます。キャンバスの中央には「答えを見たらアハ体験が終わります。答えを見ずに10秒間待ちましょう！」というゲームの説明文が表示され、10秒後にランダムに選ばれた答えが表示されます。スマホで操作できるように画面サイズに合わせて自動調整されているので、画面サイズを変えても問題ありません。