Even a soft landing on the moon is a game's game

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

No:4155

5325

←

Prev Next

→

Even a soft landing on the moon is a game
Developer anonymous｜Date and time 70/1/1 10:09:26
Build time unknown sec｜Game capacity 4.166KB｜

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 charset="utf-8">
	<style>
		#canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body onload="gameLoop()">
	<canvas id="canvas" width="320" height="480"></canvas>
	<script>
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');

// ボールの初期位置・速度
		var ballX = canvas.width / 2;
		var ballY = canvas.height - 30;
		var ballDX = 3;
		var ballDY = -3;
		var ballRadius = 10;

// パドルの初期位置・サイズ
		var paddleHeight = 10;
		var paddleWidth = 75;
		var paddleX = (canvas.width - paddleWidth) / 2;
		var paddleY = canvas.height - paddleHeight;

// ブロックの初期位置・サイズ
		var brickRowCount = 3;
		var brickColumnCount = 5;
		var brickWidth = 75;
		var brickHeight = 20;
		var brickPadding = 10;
		var brickOffsetTop = 30;
		var brickOffsetLeft = 30;
		var bricks = [];
		for (var c = 0; c < brickColumnCount; c++) {
			bricks[c] = [];
			for (var r = 0; r < brickRowCount; r++) {
				bricks[c][r] = { x: 0, y: 0, status: 1 };
			}
		}

// スコアと残りのブロック数
		var score = 0;
		var remainingBricks = brickRowCount * brickColumnCount;

// キー操作の検出
		var rightDown = false;
		var leftDown = false;
		document.addEventListener('keydown', function(event) {
			if (event.keyCode == 39) {
				rightDown = true;
			} else if (event.keyCode == 37) {
				leftDown = true;
			}
		});
		document.addEventListener('keyup', function(event) {
			if (event.keyCode == 39) {
				rightDown = false;
			} else if (event.keyCode == 37) {
				leftDown = false;
			}
		});

function drawBall() {
			ctx.beginPath();
			ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
			ctx.fillStyle = 'red';
			ctx.fill();
			ctx.closePath();
		}

function drawPaddle() {
			ctx.beginPath();
			ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
			ctx.fillStyle = 'black';
			ctx.fill();
			ctx.closePath();
		}

function drawScore() {
			ctx.font = '16px Arial';
			ctx.fillStyle = 'black';
			ctx.fillText('Score: ' + score, 8, 20);
		}

function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBall();
			drawPaddle();
			drawBricks();
			drawScore();
			collisionDetection();

// ボールの反射
			if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
				ballDX = -ballDX;
			}
			if (ballY + ballDY < ballRadius) {
				ballDY = -ballDY;
			} else if (ballY + ballDY > canvas.height - ballRadius - paddleHeight) {
				if (ballX > paddleX && ballX < paddleX + paddleWidth) {
					ballDY = -ballDY;
				} else {
					alert('GAME OVER');
					document.location.reload();
				}
			}

// パドルの移動
			if (rightDown && paddleX < canvas.width - paddleWidth) {
				paddleX += 7;
			} else if (leftDown && paddleX > 0) {
				paddleX -= 7;
			}

ballX += ballDX;
			ballY += ballDY;
		}

function gameLoop() {
			setInterval(draw, 10);
		}
	</script>
</body>
</html>