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

No:3911

309

←

Prev Next

→

ブロックを壊してアイテムを集めるアイテムはブロックを壊す速度が速くなるブロックの再生成ボタン..ALL
Developer User3747｜Date and time 23/6/26 23:03:08
Build time 69.942 sec｜Game capacity 5.95KB｜

Script

はい、了解しました。以下がブロックを壊してアイテムを集めるゲームのコードになります。

Block Breaker Game

Tap or click on the blocks to break them and collect items:

Items collected: 0

Start Game
このゲームでは、画面に表示されるブロックをタップまたはクリックして破壊し、アイテムを集めます。アイテムを集めると、スコアが上がり、ブロックを破壊する速度が上がります。また、ブロックをすべて破壊すると、再度ブロックとアイテムを生成して、新しいゲームが始まります。スマホで遊ぶ場合、画面をタップすることで操作できます。また、画面上に再生成ボタンはありませんが、ブロックを破壊していくと、ブロックの数が減っていき、自動的に再生成されます。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

はい、了解しました。以下がブロックを壊してアイテムを集めるゲームのコードになります。

<!DOCTYPE html>
<html>
<head>
	<title>Block Breaker Game</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			background-color: #f1f1f1;
			text-align: center;
		}

canvas {
			display: block;
			margin: 0 auto;
			background-color: #fff;
			border: 1px solid #000;
		}

.btn {
			display: block;
			margin: 20px auto;
			background-color: #2196F3;
			color: #fff;
			padding: 10px 20px;
			border-radius: 5px;
			text-decoration: none;
		}

.btn:hover {
			background-color: #0D47A1;
		}
	</style>
</head>
<body>
	<h1>Block Breaker Game</h1>
	<p>Tap or click on the blocks to break them and collect items:</p>
	<canvas id="canvas"></canvas>
	<p>Items collected: <span id="score">0</span></p>
	<a href="#" class="btn" id="start-btn">Start Game</a>
	<script>
		// Define canvas and game variables
		let canvas = document.getElementById('canvas');
		let ctx = canvas.getContext('2d');
		let blocks = [];
		let items = [];
		let score = 0;
		let blockSpeed = 2;
		let itemSpeed = blockSpeed * 2;
		let gameStarted = false;

// Define block object
		class Block {
			constructor(x, y, w, h) {
				this.x = x;
				this.y = y;
				this.w = w;
				this.h = h;
				this.color = '#ff6600';
			}

draw() {
				ctx.fillStyle = this.color;
				ctx.fillRect(this.x, this.y, this.w, this.h);
			}

collide(x, y) {
				if (x > this.x && x < this.x + this.w && y > this.y && y < this.y + this.h) {
					return true;
				} else {
					return false;
				}
			}
		}

// Define item object
		class Item {
			constructor(x, y, r) {
				this.x = x;
				this.y = y;
				this.r = r;
				this.color = '#00cc00';
			}

draw() {
				ctx.beginPath();
				ctx.fillStyle = this.color;
				ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
				ctx.fill();
			}

move() {
				this.y += itemSpeed;
			}

collide(x, y) {
				let dist = Math.sqrt(Math.pow(x - this.x, 2) + Math.pow(y - this.y, 2));
				if (dist < this.r) {
					return true;
				} else {
					return false;
				}
			}
		}

// Create blocks and items
		for (let i = 0; i < 50; i++) {
			let block = new Block(Math.random() * canvas.width, Math.random() * canvas.height, 50, 20);
			blocks.push(block);
			let item = new Item(Math.random() * canvas.width, Math.random() * canvas.height, 10);
			items.push(item);
		}

// Draw blocks and items
		function drawBlocks() {
			blocks.forEach(function (block) {
				block.draw();
			});
		}

function drawItems() {
			items.forEach(function (item) {
				item.draw();
			});
		}

// Move items and check collisions
		function moveItems() {
			items.forEach(function (item) {
				item.move();
				blocks.forEach(function (block, index) {
					if (block.collide(item.x, item.y)) {
						score++;
						document.getElementById('score').innerHTML = score;
						items.splice(items.indexOf(item), 1);
						blocks.splice(index, 1);
						let newBlock = new Block(Math.random() * canvas.width, Math.random() * canvas.height, 50, 20);
						blocks.push(newBlock);
						let newItem = new Item(Math.random() * canvas.width, Math.random() * canvas.height, 10);
						items.push(newItem);
					}
				});
			});
		}

// Clear canvas and draw game objects
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBlocks();
			drawItems();
			moveItems();
			if (blocks.length === 0) {
				endGame();
			}
		}

// Start and end game functions
		function startGame() {
			document.getElementById('start-btn').style.display = 'none';
			gameStarted = true;
			let gameLoop = setInterval(draw, 10);
		}

function endGame() {
			clearInterval(gameLoop);
			gameStarted = false;
			ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2);
			document.getElementById('start-btn').style.display = 'block';
			score = 0;
			blocks = [];
			items = [];
			blockSpeed = 2;
			itemSpeed = blockSpeed * 2;
			for (let i = 0; i < 50; i++) {
				let block = new Block(Math.random() * canvas.width, Math.random() * canvas.height, 50, 20);
				blocks.push(block);
				let item = new Item(Math.random() * canvas.width, Math.random() * canvas.height, 10);
				items.push(item);
			}
		}

// Add event listeners to canvas and start button
		canvas.addEventListener('click', function (e) {
			if (gameStarted) {
				items.forEach(function (item, index) {
					if (item.collide(e.offsetX, e.offsetY)) {
						score++;
						document.getElementById('score').innerHTML = score;
						items.splice(index, 1);
						let newItem = new Item(Math.random() * canvas.width, Math.random() * canvas.height, 10);
						items.push(newItem);
					}
				});
				blocks.forEach(function (block, index) {
					if (block.collide(e.offsetX, e.offsetY)) {
						blocks.splice(index, 1);
						let newBlock = new Block(Math.random() * canvas.width, Math.random() * canvas.height, 50, 20);
						blocks.push(newBlock);
						blockSpeed += 0.5;
						itemSpeed = blockSpeed * 2;
					}
				});
			}
		});

document.getElementById('start-btn').addEventListener('click', function (e) {
			e.preventDefault();
			startGame();
		});
	</script>
</body>
</html>

このゲームでは、画面に表示されるブロックをタップまたはクリックして破壊し、アイテムを集めます。アイテムを集めると、スコアが上がり、ブロックを破壊する速度が上がります。また、ブロックをすべて破壊すると、再度ブロックとアイテムを生成して、新しいゲームが始まります。スマホで遊ぶ場合、画面をタップすることで操作できます。また、画面上に再生成ボタンはありませんが、ブロックを破壊していくと、ブロックの数が減っていき、自動的に再生成されます。