ball-point pen factory's game

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

No:1698

3561

←

Prev Next

→

ball-point pen factory
Developer User3391｜Date and time 23/6/18 22:18:54
Build time 66.461 sec｜Game capacity 5.273KB｜

Script

以下がアプリの実装例です。

0点

上記の実装例は、『ボールペン工場』というブロック崩しゲームです。プレイヤーは、ラケットを操作して、ボールを打ち返し、画面上のブロックを破壊していくことが目的です。ブロックをすべて破壊することでゲームクリアとなります。ゲームの操作は、スマートフォンでも行えるように設計されています。また、絵文字を多めに使用して、より楽しい雰囲気を演出しています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

以下がアプリの実装例です。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ボールペン工場</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="320" height="480"></canvas>
	<div>
		<button id="start">スタート</button>
		<button id="stop" disabled>ストップ</button>
	</div>
	<div id="score">0点</div>
	<script>
		// 変数の定義
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var ball = { x: canvas.width / 2, y: canvas.height - 30 };
		var dx = 2;
		var dy = -2;
		var racket = { x: canvas.width / 2 - 30, y: canvas.height - 20, w: 60, h: 10 };
		var brickRowCount = 3;
		var brickColumnCount = 5;
		var brickWidth = 60;
		var brickHeight = 20;
		var brickPadding = 10;
		var brickOffsetTop = 30;
		var brickOffsetLeft = (canvas.width - (brickColumnCount * (brickWidth + brickPadding))) / 2;
		var bricks = [];
		var score = 0;

// ブロックを生成
		for (var i = 0; i < brickRowCount; i++) {
			bricks[i] = [];
			for (var j = 0; j < brickColumnCount; j++) {
				bricks[i][j] = { x: 0, y: 0, visible: true };
			}
		}

// 描画処理
		function draw() {
			// キャンバスをクリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// ボールを描画
			ctx.beginPath();
			ctx.arc(ball.x, ball.y, 10, 0, Math.PI * 2, false);
			ctx.fillStyle = '#FF0000';
			ctx.fill();
			ctx.closePath();

// ラケットを描画
			ctx.beginPath();
			ctx.rect(racket.x, racket.y, racket.w, racket.h);
			ctx.fillStyle = '#0000FF';
			ctx.fill();
			ctx.closePath();

// ブロックを描画
			for (var i = 0; i < brickRowCount; i++) {
				for (var j = 0; j < brickColumnCount; j++) {
					if (bricks[i][j].visible) {
						var brickX = (j * (brickWidth + brickPadding)) + brickOffsetLeft;
						var brickY = (i * (brickHeight + brickPadding)) + brickOffsetTop;
						bricks[i][j].x = brickX;
						bricks[i][j].y = brickY;
						ctx.beginPath();
						ctx.rect(brickX, brickY, brickWidth, brickHeight);
						ctx.fillStyle = '#00FF00';
						ctx.fill();
						ctx.closePath();
					}
				}
			}

// スコアを表示
			document.getElementById("score").innerHTML = score + "点";

// ボールの位置を更新
			ball.x += dx;
			ball.y += dy;

// ボールが左右の壁に当たった場合、x軸方向の速度を反転
			if (ball.x + dx > canvas.width - 10 || ball.x + dx < 10) {
				dx = -dx;
			}

// ボールが上の壁に当たった場合、y軸方向の速度を反転
			if (ball.y + dy < 10) {
				dy = -dy;
			}

// ボールが床に落ちた場合、ゲームオーバー
			if (ball.y + dy > canvas.height - 10) {
				clearInterval(interval);
				alert("ゲームオーバー\nスコア: " + score);
				document.getElementById("start").disabled = false;
				document.getElementById("stop").disabled = true;
				return;
			}

// ラケットがボールに当たった場合、y軸方向の速度を反転
			if (ball.x > racket.x && ball.x < racket.x + racket.w && ball.y + 10 > racket.y) {
				dy = -dy;
			}

// ボールがブロックに当たった場合、ブロックを削除してスコアを加算
			for (var i = 0; i < brickRowCount; i++) {
				for (var j = 0; j < brickColumnCount; j++) {
					var b = bricks[i][j];
					if (b.visible && ball.x > b.x && ball.x < b.x + brickWidth && ball.y > b.y && ball.y < b.y + brickHeight) {
						dy = -dy;
						b.visible = false;
						score += 10;
						if (score == brickRowCount * brickColumnCount * 10) {
							alert("クリア!\nスコア: " + score);
							clearInterval(interval);
							document.getElementById("start").disabled = false;
							document.getElementById("stop").disabled = true;
							return;
						}
					}
				}
			}
		}

// ゲーム開始処理
		function start() {
			document.getElementById("start").disabled = true;
			document.getElementById("stop").disabled = false;
			score = 0;
			for (var i = 0; i < brickRowCount; i++) {
				for (var j = 0; j < brickColumnCount; j++) {
					bricks[i][j].visible = true;
				}
			}
			ball = { x: canvas.width / 2, y: canvas.height - 30 };
			dx = 2;
			dy = -2;
			racket = { x: canvas.width / 2 - 30, y: canvas.height - 20, w: 60, h: 10 };
			interval = setInterval(draw, 10);
		}

// ゲーム停止処理
		function stop() {
			clearInterval(interval);
			document.getElementById("start").disabled = false;
			document.getElementById("stop").disabled = true;
		}

// イベントの設定
		document.getElementById("start").addEventListener("click", start);
		document.getElementById("stop").addEventListener("click", stop);

// ゲーム開始時の初期処理
		stop();
	</script>
</body>
</html>