Make a QR card. each screen, make a box in which blocks appear when tapped, and stack them to make the QR code shown on the screen, then move on to the next screen.'s game

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

No:1994

2481

←

Prev Next

→

Make a QR card. each screen, make a box in which b..ALL
Developer User3457｜Date and time 23/6/19 17:18:51
Build time 52.501 sec｜Game capacity 4.013KB｜

Script

はい、了解しました。以下が実際のプログラムになります：

スコア: 0

このプログラムは「ブロックを積もう！」というブロック崩し風のゲームです。QRコードを表示するための箱を積み上げることが目的になっています。画面をタップすると、その位置に重なっている箱を削除することができます。スコアを稼いで、レベルアップに挑戦しましょう。 QRコードはプログラムの終了後、ブラウザの画面をキャプチャすれば作成することができます。

←

Prev　Next

→ 　

Back　

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

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

はい、了解しました。

以下が実際のプログラムになります：

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ブロックを積もう！</title>
	<style>
	body {
		margin: 0;
		padding: 0;
	}
	canvas {
		display: block;
		margin: auto;
		background-color: #EEEEEE;
	}
	#score {
		text-align: center;
		font-size: 1.5rem;
		margin-top: 1rem;
	}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<p id="score">スコア: 0</p>

// キャンバスの設定
	let canvas = document.getElementById("canvas");
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	let ctx = canvas.getContext("2d");

// スコアの初期化
	let score = 0;
	let scoreElement = document.getElementById("score");
	scoreElement.textContent = `スコア: ${score}`;

// ブロックの配列
	let blocks = [];

// ブロックのクラス
	class Block {
		constructor(x, y, color) {
			this.x = x;
			this.y = y;
			this.width = BLOCK_WIDTH;
			this.height = BLOCK_HEIGHT;
			this.color = color;
		}

// ブロックを描画
		draw() {
			ctx.fillStyle = this.color;
			ctx.fillRect(this.x, this.y, this.width, this.height);
		}
	}

// 新しいブロックを作成
	function createBlock() {
		let x = Math.floor(Math.random() * (canvas.width - BLOCK_WIDTH));
		let y = -BLOCK_HEIGHT;
		let color = BLOCK_COLORS[Math.floor(Math.random() * BLOCK_COLORS.length)];

let block = new Block(x, y, color);
		blocks.push(block);
	}

// ブロックを移動
	function moveBlocks() {
		for (let i = 0; i < blocks.length; i++) {
			let block = blocks[i];
			block.y += block.height;
			if (block.y > canvas.height) {
				// ブロックが画面外に出た場合は削除
				blocks.splice(i, 1);
				i--;
				score--;
				score = score < 0 ? 0 : score;
				scoreElement.textContent = `スコア: ${score}`;
			}
		}
	}

// ブロックを描画
	function drawBlocks() {
		for (let i = 0; i < blocks.length; i++) {
			let block = blocks[i];
			block.draw();
		}
	}

// ゲームオーバー処理
	function gameOver() {
		alert("ゲームオーバー！\nスコア: " + score);
		location.reload();
	}

// ゲームループ
	function gameLoop() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBlocks();
		moveBlocks();

if (score > MAX_LEVEL) {
			// 最大レベルに到達した場合はゲームクリア
			alert(`ゲームクリア！\nスコア: ${score}`);
			location.reload();
		}

if (blocks.length === 0) {
			createBlock();
		}

score++;
		scoreElement.textContent = `スコア: ${score}`;

setTimeout(gameLoop, FALL_INTERVAL[score-1]);
	}

// イベントリスナーの追加
	canvas.addEventListener("click", function(event) {
		let x = event.clientX - canvas.offsetLeft;
		let y = event.clientY - canvas.offsetTop;

for (let i = 0; i < blocks.length; i++) {
			let block = blocks[i];
			if (x > block.x && x < block.x + block.width &&
				y > block.y && y < block.y + block.height) 
			{
				// ブロックを削除
				blocks.splice(i, 1);
				i--;
				score += 5;
				scoreElement.textContent = `スコア: ${score}`;
			}
		}
	});

// ゲーム開始
	gameLoop();
	</script>
</body>
</html>
```

このプログラムは「ブロックを積もう！」というブロック崩し風のゲームです。QRコードを表示するための箱を積み上げることが目的になっています。

画面をタップすると、その位置に重なっている箱を削除することができます。スコアを稼いで、レベルアップに挑戦しましょう。

QRコードはプログラムの終了後、ブラウザの画面をキャプチャすれば作成することができます。