Do you understand computers?'s game

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

No:3806

2551

←

Prev Next

→

Do you understand computers?
Developer もちきなこ｜Date and time 23/6/26 17:22:40
Build time 47.768 sec｜Game capacity 4.516KB｜

Script

はい、分かります。それでは、スマホで遊べるブロック崩しゲームを作成します。以下が実装例です。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

はい、分かります。それでは、スマホで遊べるブロック崩しゲームを作成します。以下が実装例です。

<!DOCTYPE html>
<html>
<head>
	<title>ブロック崩しゲーム</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="game" width="320" height="480"></canvas>
	<script>
		var canvas = document.getElementById("game");
		var ctx = canvas.getContext("2d");

// ボールの初期位置と速度
		var ballX = canvas.width/2;
		var ballY = canvas.height-30;
		var ballSpeedX = 3;
		var ballSpeedY = -3;

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

// ブロックの初期位置とサイズ
		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 lives = 3;

// キーボード操作からパドルの移動を取得
		document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);
		var rightPressed = false;
		var leftPressed = false;
		function keyDownHandler(e) {
			if(e.keyCode == 39) {
				rightPressed = true;
			}
			else if(e.keyCode == 37) {
				leftPressed = true;
			}
		}
		function keyUpHandler(e) {
			if(e.keyCode == 39) {
				rightPressed = false;
			}
			else if(e.keyCode == 37) {
				leftPressed = false;
			}
		}

// ボールとパドル、ブロックの衝突判定
		function collisionDetection() {
			for(var c=0; c<brickColumnCount; c++) {
				for(var r=0; r<brickRowCount; r++) {
					var b = bricks[c][r];
					if(b.status == 1) {
						if(ballX > b.x && ballX < b.x+brickWidth && ballY > b.y && ballY < b.y+brickHeight) {
							ballSpeedY = -ballSpeedY;
							b.status = 0;
							score++;
							if(score == brickRowCount*brickColumnCount) {
								alert("おめでとう！クリアしました！");
								document.location.reload();
							}
						}
					}
				}
			}
			if(ballX + 10 > paddleX && ballX - 10 < paddleX + paddleWidth && ballY + 10 > canvas.height - paddleHeight) {
				ballSpeedY = -ballSpeedY;
			}
			if(ballY < 0) {
				ballSpeedY = -ballSpeedY;
			}
			if(ballX > canvas.width || ballX < 0) {
				ballSpeedX = -ballSpeedX;
			}
			if(ballY > canvas.height) {
				lives--;
				if(!lives) {
					alert("ゲームオーバー！");
					document.location.reload();
				}
				else {
					ballX = canvas.width/2;
					ballY = canvas.height-30;
					ballSpeedX = 3;
					ballSpeedY = -3;
					paddleX = (canvas.width-paddleWidth)/2;
				}
			}
		}

// 描画処理
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBricks();
			drawBall();
			drawPaddle();
			drawScore();
			drawLives();
			collisionDetection();
			if(rightPressed && paddleX < canvas.width-paddleWidth) {
				paddleX += 7;
			}
			else if(leftPressed && paddleX > 0) {
				paddleX -= 7;
			}
			ballX += ballSpeedX;
			ballY += ballSpeedY;
			requestAnimationFrame(draw);
		}

function drawBall() {
			ctx.beginPath();
			ctx.arc(ballX, ballY, 10, 0, Math.PI*2);
			ctx.fillStyle = "#0095DD";
			ctx.fill();
			ctx.closePath();
		}

function drawPaddle() {
			ctx.beginPath();
			ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
			ctx.fillStyle = "#0095DD";
			ctx.fill();
			ctx.closePath();
		}

function drawScore() {
			ctx.font = "16px Arial";
			ctx.fillStyle = "#0095DD";
			ctx.fillText("スコア: "+score, 8, 20);
		}

function drawLives() {
			ctx.font = "16px Arial";
			ctx.fillStyle = "#0095DD";
			ctx.fillText("残機: "+lives, canvas.width-65, 20);
		}

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