ピクセルブロック崩し 1ピクセル単位のブロック崩しです。ボールもブロックも1ピクセルです。ボールは、最初10個から始まり、ランダムに跳ね返ります。崩されたブロックは下に自由落下し、ボールとして機能します。ゲームオーバーはありません。's game

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

No:3123

2642

←

Prev Next

→

ピクセルブロック崩し 1ピクセル単位のブロック崩しです。ボールもブロックも1ピクセルです。ボー..ALL
Developer もちきなこ｜Date and time 23/6/23 22:11:57
Build time 28.047 sec｜Game capacity 2.274KB｜

Script

ピクセルブロック崩しを実装しました！以下がプログラムです。

スマホでも遊べるように、画面幅は320ピクセル、高さは400ピクセルに設定しました。ブロックやボールの大きさは1ピクセルで、ボールは毎フレームランダムな方向に1ピクセル移動します。ブロックを当てると跳ね返り、ブロックは削除され、ボールとして再利用されます。ゲームオーバーはありませんので、ずっと遊び続けてください！ ðŸŽ®

←

Prev　Next

→ 　

Back　

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

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

ピクセルブロック崩しを実装しました！以下がプログラムです。

<!DOCTYPE html>
<html>
<head>
	<title>ピクセルブロック崩し</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
			margin: 0 auto;
			background-color: #f2f2f2;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="320" height="400"></canvas>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var ball = {x: 160, y: 200, vx: 1, vy: -1};
		var blocks = [];
		var blockSize = 1;
		var blockColor = "#000";
		
		// create blocks
		for (var y = 0; y < 220; y += blockSize) {
			for (var x = 0; x < 320; x += blockSize) {
				blocks.push({x: x, y: y});
			}
		}
		
		// draw ball
		function drawBall() {
			ctx.fillStyle = "#000";
			ctx.fillRect(ball.x, ball.y, blockSize, blockSize);
		}
		
		// draw blocks
		function drawBlocks() {
			ctx.fillStyle = blockColor;
			for (var i = 0; i < blocks.length; i++) {
				ctx.fillRect(blocks[i].x, blocks[i].y, blockSize, blockSize);
			}
		}
		
		// update ball position and collide with blocks
		function updateBall() {
			ball.x += ball.vx;
			ball.y += ball.vy;
			if (ball.x < 0 || ball.x > canvas.width - blockSize) {
				ball.vx = -ball.vx;
			}
			if (ball.y < 0 || ball.y > canvas.height - blockSize) {
				ball.vy = -ball.vy;
			}
			for (var i = 0; i < blocks.length; i++) {
				if (ball.x == blocks[i].x && ball.y == blocks[i].y) {
					blocks.splice(i, 1);
					ball.vy = -ball.vy;
					ball.y += blockSize;
				}
			}
		}
		
		// draw everything and update ball position
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBall();
			drawBlocks();
			updateBall();
			requestAnimationFrame(draw);
		}
		
		draw();
	</script>
</body>
</html>