Games that can win the KOTY award's game | AI game creator

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

No:1411

100

Games that can win the KOTY award
Developer User3025｜Date and time 23/6/18 15:03:11
Build time 65.223 sec｜Game capacity 5.148KB｜

「ドット絵メモリーゲーム」 HTML5のcanvas要素を用いて実装し、JavaScriptを使用して動作させます。スマホでも操作可能で、絵文字を多く使い、楽しめるゲームです。ゲームの概要：出題される絵柄を覚えて、同じ絵柄を埋めていくメモリーゲームです。以下は実際のプログラムの記述です。

このプログラムを実行すると、絵柄がランダムに表示されます。画面の左上に表示された出題画像を覚えて、同じ絵柄のセルをクリックしていきます。同じ絵柄のセルを2つめをクリックすると正答となります。全ての出題に正答するとクリアです。ちなみに、imgディレクトリに絵柄と出題画像の画像ファイルが必要です。また、画像のサイズは64×64ピクセルに設定することを想定しています。以上が「ドット絵メモリーゲーム」のプログラムになります。楽しんで遊んでください！

→ 　

0　

0　

[PR]現在の売れ筋ゲームランキング

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

(C)2023 HisashiApp

「ドット絵メモリーゲーム」

HTML5のcanvas要素を用いて実装し、JavaScriptを使用して動作させます。スマホでも操作可能で、絵文字を多く使い、楽しめるゲームです。

ゲームの概要：出題される絵柄を覚えて、同じ絵柄を埋めていくメモリーゲームです。

以下は実際のプログラムの記述です。

```html
<!DOCTYPE html>
<html>
<head>
	<title>ドット絵メモリーゲーム</title>
	<script type="text/javascript">
	window.onload = function() {
		// メイン処理
		var canvas = document.getElementById("gameCanvas");
		var ctx = canvas.getContext("2d");

var CELL_SIZE = 64; // グリッド1つのサイズ
		var WIDTH = 5, HEIGHT = 4; // グリッドの幅と高さ
		var NUM_CELLS = WIDTH * HEIGHT; // グリッドの面積
		var NUM_IMAGES = 6; // 絵柄の種類数
		var NUM_QUESTIONS = 4; // 出題数

var images = []; // 絵柄の画像配列
		images[0] = new Image(); images[0].src = "img/0.png";
		images[1] = new Image(); images[1].src = "img/1.png";
		images[2] = new Image(); images[2].src = "img/2.png";
		images[3] = new Image(); images[3].src = "img/3.png";
		images[4] = new Image(); images[4].src = "img/4.png";
		images[5] = new Image(); images[5].src = "img/5.png";

var numbers = []; // 画像の番号配列
		for (var i = 0; i < NUM_CELLS; i++) {
			numbers[i] = Math.floor(Math.random() * NUM_IMAGES);
		}

var questions = []; // 出題の番号配列
		for (var i = 0; i < NUM_QUESTIONS; i++) {
			var index = Math.floor(Math.random() * NUM_CELLS);
			if (questions.indexOf(index) == -1) {
				questions.push(index);
			} else {
				i--;
			}
		}

var selected = -1; // 選択された番号
		var flipped = []; // ひっくり返した番号配列
		var found = []; // 正答した番号配列
		var canTakeInput = true; // 入力を受け付けるかどうか

canvas.addEventListener("click", function(e) {
			if (!canTakeInput) { return; }
			var x = e.offsetX, y = e.offsetY;
			var index = Math.floor(y / CELL_SIZE) * WIDTH + Math.floor(x / CELL_SIZE);
			if (found.indexOf(index) != -1 || flipped.indexOf(index) != -1) { return; }
			if (selected == -1) {
				selected = index;
				flipped.push(index);
			} else {
				if (numbers[selected] == numbers[index]) {
					found.push(selected, index);
				} else {
					canTakeInput = false;
					setTimeout(function() { flipped = []; selected = -1; canTakeInput = true; }, 1000);
				}
			}
		});

function draw() {
			// 背景
			ctx.fillStyle = "#ffffff";
			ctx.fillRect(0, 0, WIDTH * CELL_SIZE, HEIGHT * CELL_SIZE);

// グリッド
			ctx.strokeStyle = "#cccccc";
			for (var i = 0; i <= WIDTH; i++) {
				ctx.beginPath();
				ctx.moveTo(i * CELL_SIZE, 0);
				ctx.lineTo(i * CELL_SIZE, HEIGHT * CELL_SIZE);
				ctx.stroke();
			}
			for (var i = 0; i <= HEIGHT; i++) {
				ctx.beginPath();
				ctx.moveTo(0, i * CELL_SIZE);
				ctx.lineTo(WIDTH * CELL_SIZE, i * CELL_SIZE);
				ctx.stroke();
			}

// 絵柄
			for (var i = 0; i < NUM_CELLS; i++) {
				var x = i % WIDTH, y = Math.floor(i / WIDTH);
				if (found.indexOf(i) != -1) {
					ctx.drawImage(images[numbers[i]], x * CELL_SIZE, y * CELL_SIZE);
				} else if (flipped.indexOf(i) != -1 || selected == i) {
					ctx.fillStyle = "#999999";
					ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
				} else {
					ctx.drawImage(images[6], x * CELL_SIZE, y * CELL_SIZE);
				}
			}

// 出題
			ctx.fillStyle = "#000000";
			for (var i = 0; i < NUM_QUESTIONS; i++) {
				var x = questions[i] % WIDTH, y = Math.floor(questions[i] / WIDTH);
				ctx.drawImage(images[numbers[questions[i]]], x * CELL_SIZE, y * CELL_SIZE);
			}
		}

setInterval(function() { draw(); }, 100);
	};
	</script>
	<style type="text/css">
		canvas {
			border: 1px solid #cccccc;
			background-color: #ffffff;
			width: 320px;
			height: 256px;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas"></canvas>
	<script type="text/javascript">
		// 絵柄の画像
		var imgUrls = ["img/0.png", "img/1.png", "img/2.png", "img/3.png", "img/4.png", "img/5.png", "img/question.png"];
		var loaded = 0;
		for (var i = 0; i < imgUrls.length; i++) {
			var img = new Image();
			img.src = imgUrls[i];
			img.onload = function() {
				loaded++;
				if (loaded == imgUrls.length) {
					// 画像がすべて読み込まれた時に、メイン処理を実行
					window.onload();
				}
			};
		}
	</script>
</body>
</html>
```

このプログラムを実行すると、絵柄がランダムに表示されます。画面の左上に表示された出題画像を覚えて、同じ絵柄のセルをクリックしていきます。同じ絵柄のセルを2つめをクリックすると正答となります。全ての出題に正答するとクリアです。

ちなみに、imgディレクトリに絵柄と出題画像の画像ファイルが必要です。また、画像のサイズは64×64ピクセルに設定することを想定しています。

以上が「ドット絵メモリーゲーム」のプログラムになります。楽しんで遊んでください！