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

No:3214

153

←

Prev Next

→

A block breaking game like Tetris! Destroy everyth..ALL
Developer User3589｜Date and time 23/6/24 6:00:39
Build time 65.642 sec｜Game capacity 6.301KB｜

Script

ブロック崩しゲーム！全てを破壊せよ！

得点: 0

残り時間: 60秒

←

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, maximum-scale=1, user-scalable=0">
	<style>
		canvas{
			border: 2px solid black;
			margin: auto;
			display: block;
		}
		body{
			background-color: #303030;
			color: #fff;
			font-family: sans-serif;
			text-align: center;
			margin: 0;
			padding: 0;
		}
		h1{
			margin-top: 20px;
			font-size: 2.5em;
		}
		h2{
			font-size: 2em;
			margin-top: 50px;
			margin-bottom: 20px;
		}
		p{
			font-size: 1.2em;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		button{
			background-color: #4CAF50;
			color: white;
			border: none;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin-top: 20px;
			cursor: pointer;
			border-radius: 10px;
		}
	</style>
</head>
<body>
	<h1>ブロック崩しゲーム！全てを破壊せよ！</h1>
	<canvas id="myCanvas"></canvas>
	<h2>得点: <span id="score">0</span></h2>
	<p>残り時間: <span id="time">60</span>秒</p>
	<button id="startBtn">スタート！</button>
	
	<script>
		// キャンバスやコンテキストの取得
		let canvas = document.getElementById("myCanvas");
		let ctx = canvas.getContext("2d");
		
		// キャンバスのサイズを取得
		let canvasWidth = canvas.width;
		let canvasHeight = canvas.height;
		
		// ブロックの設定
		let blockRowCount = 5;
		let blockColumnCount = 6;
		let blockWidth = 75;
		let blockHeight = 20;
		let blockPadding = 10;
		let blockOffsetTop = 30;
		let blockOffsetLeft = 30;
		
		// パドルの設定
		let paddleWidth = 100;
		let paddleHeight = 10;
		let paddleX = (canvasWidth - paddleWidth) / 2;
		
		// ボールの設定
		let ballRadius = 10;
		let ballColor = "#FFFFFF";
		let ballX = canvasWidth / 2;
		let ballY = canvasHeight - 30;
		let ballDeltaX = 2;
		let ballDeltaY = -2;
		
		// キーイベント
		let rightPressed = false;
		let leftPressed = false;
		document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, 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;
			}
		}
		
		// ブロックの初期化と描画
		let blocks = [];
		for(let c=0; c<blockColumnCount; c++){
			blocks[c] = [];
			for(let r=0; r<blockRowCount; r++){
				blocks[c][r] = { x: 0, y: 0, status: 1 };
			}
		}
		
		function drawBlocks(){
			for(let c=0; c<blockColumnCount; c++){
				for(let r=0; r<blockRowCount; r++){
					if(blocks[c][r].status == 1){
						let blockX = (c*(blockWidth+blockPadding)) + blockOffsetLeft;
						let blockY = (r*(blockHeight+blockPadding)) + blockOffsetTop;
						blocks[c][r].x = blockX;
						blocks[c][r].y = blockY;
						ctx.beginPath();
						ctx.rect(blockX, blockY, blockWidth, blockHeight);
						ctx.fillStyle = "#FFD700";
						ctx.fill();
						ctx.closePath();
					}
				}
			}
		}
		
		// パドルの描画
		function drawPaddle(){
			ctx.beginPath();
			ctx.rect(paddleX, canvasHeight - paddleHeight, paddleWidth, paddleHeight);
			ctx.fillStyle = "#FFFFFF";
			ctx.fill();
			ctx.closePath();
		}
		
		// ボールの描画
		function drawBall(){
			ctx.beginPath();
			ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
			ctx.fillStyle = ballColor;
			ctx.fill();
			ctx.closePath();
		}
		
		// 衝突判定
		function collisionDetection(){
			for(let c=0; c<blockColumnCount; c++){
				for(let r=0; r<blockRowCount; r++){
					let b = blocks[c][r];
					if(b.status == 1){
						if(ballX > b.x && ballX < b.x+blockWidth && ballY > b.y && ballY < b.y+blockHeight){
							ballDeltaY = -ballDeltaY;
							b.status = 0;
							let explosionInterval = setInterval(function(){
								ctx.beginPath();
								ctx.arc(ballX, ballY, 30, 0, Math.PI*2);
								ctx.fillStyle = "#FF0000";
								ctx.fill();
								ctx.closePath();
							}, 50);
							setTimeout(function(){
								clearInterval(explosionInterval);
							}, 500);
							score++;
							if(score == blockRowCount*blockColumnCount){
								// プレイヤー勝利
								alert("Congratulations! You win!");
								document.location.reload();
							}
						}
					}
				}
			}
		}
		
		// 得点の描画
		let score = 0;
		function drawScore(){
			ctx.font = "bold 20px sans-serif";
			ctx.fillStyle = "#FFFFFF";
			ctx.fillText("Score: " + score, 20, 25);
		}
		
		// 残り時間の描画
		let timeLeft = 60;
		function drawTime(){
			ctx.font = "bold 20px sans-serif";
			ctx.fillStyle = "#FFFFFF";
			ctx.fillText("Time Left: " + timeLeft + "s", canvasWidth-170, 25);
		}
		
		// ゲームオーバー
		function gameOver(){
			alert("Game Over! Better luck next time...");
			document.location.reload();
		}
		
		// メイン関数
		function draw(){
			ctx.clearRect(0, 0, canvasWidth, canvasHeight);
			drawBlocks();
			drawPaddle();
			drawBall();
			drawScore();
			drawTime();
			collisionDetection();
			if(ballX + ballDeltaX > canvasWidth-ballRadius || ballX + ballDeltaX < ballRadius){
				ballDeltaX = -ballDeltaX;
			}
			if(ballY + ballDeltaY < ballRadius){
				ballDeltaY = -ballDeltaY;
			}else if(ballY + ballDeltaY > canvasHeight-ballRadius-paddleHeight){
				if(ballX > paddleX && ballX < paddleX + paddleWidth){
					ballDeltaY = -ballDeltaY;
				}else{
					gameOver();
				}
			}
			if(rightPressed && paddleX < canvasWidth - paddleWidth){
				paddleX += 7;
			}else if(leftPressed && paddleX > 0){
				paddleX -= 7;
			}
			ballX += ballDeltaX;
			ballY += ballDeltaY;
			timeLeft--;
			if(timeLeft == 0){
				alert("Time's up! Try again!");
				document.location.reload();
			}
		}
		
		let interval;
		document.getElementById("startBtn").addEventListener("click", function(){
			paddleX = (canvasWidth - paddleWidth) / 2;
			score = 0;
			timeLeft = 60;
			blocks = [];
			for(let c=0; c<blockColumnCount; c++){
				blocks[c] = [];
				for(let r=0; r<blockRowCount; r++){
					blocks[c][r] = { x: 0, y: 0, status: 1 };
				}
			}
			interval = setInterval(draw, 10);
		});
		
	</script>
</body>
</html>