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

No:3196

189

←

Prev Next

→

Lets shutter on metal!
Developer User3589｜Date and time 23/6/24 5:36:29
Build time 46.407 sec｜Game capacity 4.478KB｜

Script

金属にシャッターを切ろう！

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>金属にシャッターを切ろう！</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #1F1F1F;
			color: white;
			text-align: center;
			font-family: sans-serif;
			font-size: 2em;
			margin: 0;
			padding: 0;
		}
		
		canvas {
			display: block;
			margin: auto;
		}
	</style>
</head>
<body>
	<h1>金属にシャッターを切ろう！</h1>
	<canvas id="canvas"></canvas>

// ボールの初期位置、半径、色、速度
		const ball = {
			x: canvas.width / 2,
			y: canvas.height - 30,
			radius: 10,
			color: 'white',
			dx: 2,
			dy: -2
		};

// 操作する板の大きさ、位置、色
		const paddle = {
			width: 75,
			height: 10,
			x: (canvas.width - 75) / 2,
			color: '#DDDDDD'
		};

// ブロックの行数、列数、大きさ、間の隙間、位置、色
		const brick = {
			rowCount: 3,
			colCount: 5,
			width: 75,
			height: 20,
			padding: 10,
			offsetTop: 30,
			offsetLeft: (canvas.width - (5 * (75 + 10))) / 2,
			color: '#DDDDDD'
		};

// ブロックを二次元配列で保持する
		let bricks = [];
		for (let c = 0; c < brick.colCount; c++) {
			bricks[c] = [];
			for (let r = 0; r < brick.rowCount; r++) {
				bricks[c][r] = { x: 0, y: 0, status: 1 };
			}
		}

// キー入力を監視
		let rightPressed = false;
		let leftPressed = false;
		document.addEventListener('keydown', keyDownHandler, false);
		document.addEventListener('keyup', keyUpHandler, false);
		function keyDownHandler(event) {
			if (event.key === 'ArrowRight') {
				rightPressed = true;
			} else if (event.key === 'ArrowLeft') {
				leftPressed = true;
			}
		}
		function keyUpHandler(event) {
			if (event.key === 'ArrowRight') {
				rightPressed = false;
			} else if (event.key === 'ArrowLeft') {
				leftPressed = false;
			}
		}

// ボールとブロックの当たり判定
		function collisionDetection() {
			for (let c = 0; c < brick.colCount; c++) {
				for (let r = 0; r < brick.rowCount; r++) {
					const b = bricks[c][r];
					if (b.status === 1) {
						if (ball.x > b.x && ball.x < b.x + brick.width && ball.y > b.y && ball.y < b.y + brick.height) {
							ball.dy = -ball.dy;
							b.status = 0;
						}
					}
				}
			}
		}

// 描画する関数
		function drawBall() {
			ctx.beginPath();
			ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
			ctx.fillStyle = ball.color;
			ctx.fill();
			ctx.closePath();
		}
		function drawPaddle() {
			ctx.beginPath();
			ctx.rect(paddle.x, canvas.height - paddle.height, paddle.width, paddle.height);
			ctx.fillStyle = paddle.color;
			ctx.fill();
			ctx.closePath();
		}
		function drawBricks() {
			for (let c = 0; c < brick.colCount; c++) {
				for (let r = 0; r < brick.rowCount; r++) {
					if (bricks[c][r].status === 1) {
						const brickX = (c * (brick.width + brick.padding)) + brick.offsetLeft;
						const brickY = (r * (brick.height + brick.padding)) + brick.offsetTop;
						bricks[c][r].x = brickX;
						bricks[c][r].y = brickY;
						ctx.beginPath();
						ctx.rect(brickX, brickY, brick.width, brick.height);
						ctx.fillStyle = brick.color;
						ctx.fill();
						ctx.closePath();
					}
				}
			}
		}
		function draw() {
			// キャンバスをクリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// ボールの描画
			drawBall();
			ball.x += ball.dx;
			ball.y += ball.dy;

// ボールが壁に当たった時の処理
			if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
				ball.dx = -ball.dx;
			}
			if (ball.y + ball.dy < ball.radius) {
				ball.dy = -ball.dy;
			} else if (ball.y + ball.dy > canvas.height - ball.radius) {
				if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
					ball.dy = -ball.dy;
				} else {
					alert('ゲームオーバー！');
					document.location.reload();
				}
			}

// 板の描画
			drawPaddle();
			if (rightPressed && paddle.x < canvas.width - paddle.width) {
				paddle.x += 7;
			} else if (leftPressed && paddle.x > 0) {
				paddle.x -= 7;
			}

// ブロックの描画
			drawBricks();
			collisionDetection();

requestAnimationFrame(draw);
		}
		draw();
	</script>
</body>
</html>