AI game creator

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

No:42421

←

Prev Next

→

Block Breaker
Developer User18878｜Date and time 24/2/11 18:10:26
Build time 17.907 sec｜Game capacity 4.752KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>floppy game</title>
<style>
	canvas {
		background: #eee;
		display: block;
		margin: 0 auto;
	}
</style>
</head>
<body>
	<canvas id="blockBreakerCanvas" width="480" height="320"></canvas>
	<script>
		// Enclosing the game code in script tags
		(function() {
			// Initializing canvas and context variables
			var canvas = document.getElementById("blockBreakerCanvas");
			var ctx = canvas.getContext("2d");

// Ball properties
			var ballX = canvas.width / 3;
			var ballY = canvas.height - 30;
			var ballRadius = 10;
			var ballSpeed = 1;
			var ballSpeedX = ballSpeed;
			var ballSpeedY = -ballSpeed;

// Paddle properties
			var paddleWidth = 75;
			var paddleHeight = 10;
			var paddleX = (canvas.width - paddleWidth) / 2;
			var paddleSpeed = 1;
			var rightPressed = false;
			var leftPressed = false;

// Block properties
			var blockRowCount = 3;
			var blockColumnCount = 5;
			var blockWidth = 75;
			var blockHeight = 20;
			var blockPadding = 10;
			var blockOffsetTop = 30;
			var blockOffsetLeft = 30;

// Score
			var score = 0;

// Create the blocks array
			var blocks = [];
			for(var c = 0; c < blockColumnCount; c++) {
				blocks[c] = [];
				for(var r = 0; r < blockRowCount; r++) {
					blocks[c][r] = { x: 0, y: 0, status: 1 };
				}
			}

// Event listeners for paddle movement
			document.addEventListener("keydown", keyDownHandler, false);
			document.addEventListener("keyup", keyUpHandler, false);

// Event handlers for paddle movement
			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;
				}
			}

// Collision detection function
			function collisionDetection() {
				for(var c = 0; c < blockColumnCount; c++) {
					for(var r = 0; r < blockRowCount; r++) {
						var block = blocks[c][r];
						if(block.status == 1) {
							if(ballX > block.x && ballX < block.x + blockWidth && ballY > block.y && ballY < block.y + blockHeight) {
								ballSpeedY = -ballSpeedY;
								block.status = 0;
								score++;
								if(score == blockRowCount * blockColumnCount) {
									alert("Congratulations! You won!");
									document.location.reload();
								}
							}
						}
					}
				}
			}

// Drawing functions
			function drawBall() {
				ctx.beginPath();
				ctx.arc(ballX, ballY, ballRadius, 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: " + score, 8, 20);
			}

// Game loop
			function draw() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				drawBlocks();
				drawBall();
				drawPaddle();
				drawScore();
				collisionDetection()1000;

// Ball movement
				ballX += ballSpeedX;1
				ballY += ballSpeedY;1

// Paddle movement
				if(rightPressed && paddleX < canvas.width - paddleWidth) {
					paddleX += paddleSpeed;
				} else if(leftPressed && paddleX > 0) {
					paddleX -= paddleSpeed;
				}

// Ball collision with walls
				if(ballX + ballSpeedX > canvas.width - ballRadius || ballX + ballSpeedX < ballRadius) {
					ballSpeedX = -ballSpeedX;
				}
				if(ballY + ballSpeedY < ballRadius) {
					ballSpeedY = -ballSpeedY;
				} else if(ballY + ballSpeedY > canvas.height - ballRadius) {
					if(ballX > paddleX && ballX < paddleX + paddleWidth) {
						ballSpeedY = -ballSpeedY;
					} else {
						alert("Game Over!");
						document.location.reload();
					}
				}

requestAnimationFrame(draw);
			}

// Start the game
			draw();
		})();
	</script>
</body>
</html>