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

No:3317

6002

←

Prev Next

→

generative art
Developer User3655｜Date and time 23/6/24 12:58:32
Build time 34.476 sec｜Game capacity 3.149KB｜

Script

で遊べるアプリを作ってみました！

ジェネアートゲーム

このゲームは、落ちてくるブロックを消していくパズルゲームです。ブロック同士が隣り合うと消えます。スコアは、消したブロックの数に応じて加算されます。ゲーム画面は自動的にリサイズされますので、スマホでも快適にプレイできます。楽しんでください！ 😄

←

Prev　Next

→ 　

Back　

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

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

で遊べるアプリを作ってみました！

<!DOCTYPE html>
<html>
<head>
	<title>ジェネアートゲーム</title>
	<style>
		canvas {
			border: 1px solid black;
			background-color: #eee;
			display: block;
			margin: auto;
		}
	</style>
</head>
<body>
	<h1>ジェネアートゲーム</h1>
	<canvas id="canvas"></canvas>
	<script>
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');

// ゲームの設定
		const config = {
			width: 300,
			height: 400,
			maxX: 10,
			maxY: 20,
			blockSize: 15,
			colors: ['red', 'green', 'blue', 'orange', 'purple']
		};

// ブロックの定義
		class Block {
			constructor(x, y, color) {
				this.x = x;
				this.y = y;
				this.color = color;
			}

draw() {
				ctx.fillStyle = this.color;
				ctx.fillRect(this.x * config.blockSize, this.y * config.blockSize, config.blockSize, config.blockSize);
			}
		}

// ブロックを作成
		function createBlock() {
			const x = Math.floor(Math.random() * config.maxX);
			const y = Math.floor(Math.random() * config.maxY);
			const color = config.colors[Math.floor(Math.random() * config.colors.length)];
			return new Block(x, y, color);
		}

// ゲームの初期化
		let score = 0;
		let blocks = [];

function initGame() {
			score = 0;
			blocks = [];

// 初期のブロックを作成
			for (let i = 0; i < 5; i++) {
				blocks.push(createBlock());
			}

// ゲームループを開始
			gameLoop();
		}

// ゲームの描画
		function drawGame() {
			ctx.clearRect(0, 0, config.width, config.height);

// ブロックを描画
			blocks.forEach(block => block.draw());

// スコアを描画
			ctx.fillStyle = 'black';
			ctx.font = '20px Arial';
			ctx.textAlign = 'center';
			ctx.fillText(`Score: ${score}`, config.width / 2, config.height - 20);
		}

// ゲームループ
		function gameLoop() {
			// ブロックを落とす
			blocks.forEach(block => block.y++);

// 下まで落ちたブロックを削除
			blocks = blocks.filter(block => block.y < config.maxY);

// 新しいブロックを追加
			while (blocks.length < 5) {
				blocks.push(createBlock());
			}

// ゲームを描画
			drawGame();

// 次のフレームを呼び出す
			requestAnimationFrame(gameLoop);
		}

// キャンバスのリサイズ
		function resizeCanvas() {
			canvas.width = config.width * devicePixelRatio;
			canvas.height = config.height * devicePixelRatio;
			canvas.style.width = config.width + 'px';
			canvas.style.height = config.height + 'px';
			ctx.scale(devicePixelRatio, devicePixelRatio);
			drawGame();
		}

// ウィンドウのリサイズ
		window.addEventListener('resize', () => {
			resizeCanvas();
		});

initGame();
		resizeCanvas();
	</script>
</body>
</html>