Feat : Added Breakout Game

ChromeGaming · Jul 21, 2024 · 0caf8c3 · 0caf8c3
1 parent 9b18d2e
commit 0caf8c3
Show file tree

Hide file tree

Showing 4 changed files with 302 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -258,6 +258,7 @@ ________________________________________________________________________________
 |  201   | [Cooking_Challenge Game](.SinglePlayer%20-%20Games/Cooking_Challenge Game) |
 |  202   | [Doodling_Game](.SinglePlayer%20-%20Games/Doodling_Game) |
 |  203   | [Duck_Hunt_Game](.SinglePlayer%20-%20Games/Duck_Hunt_Game) |
+|  203   | [Breakout_Game](.SinglePlayer%20-%20Games/BreakOut_Game) |
 
 
 

diff --git a/SinglePlayer - Games/BreakOut Game/index.html b/SinglePlayer - Games/BreakOut Game/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+      <meta charset="utf-8" />
+      <title>Breakout Game</title>
+      <link rel="stylesheet" href="main.css" type="text/css"/>
+  </head>
+  <body>
+  	<div class="container" id="js-canvas">
+  		<div class="overlay">
+  			<h2>Game Over</h2>
+  			<p id="score-box"></p>
+  		</div>
+  		<canvas id="myCanvas" width="480" height="320"></canvas>
+  		<button type="button" class="button__restart" id="reset-btn">Try Again</button>
+  	</div>
+
+  	<script src="main.js"></script>
+  </body>
+</html>
diff --git a/SinglePlayer - Games/BreakOut Game/main.css b/SinglePlayer - Games/BreakOut Game/main.css
@@ -0,0 +1,67 @@
+* { 
+  padding: 0; 
+  margin: 0; 
+}
+
+body {
+  background-color: #111111;
+  background-image: linear-gradient(135deg, #0a0a0a 0%, #18191a 100%);
+  font-family: Arial, sans-serif;
+  min-height: 100vh;
+}
+
+.container {
+  margin: 100px auto 0;
+  position: relative;
+}
+
+.button__restart,
+.overlay {
+  display: none;
+}
+
+.game-over .overlay {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #dbc1c1;
+  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
+  position: absolute;
+  top: 0;
+  width: 480px;
+  height: 320px;
+  left: 400px;
+  opacity: .5;
+  margin: 0 auto;
+  color: white;
+  text-align: center;  
+  text-transform: uppercase;
+  letter-spacing: 4px;
+}
+
+
+.game-over .button__restart {
+  display: block;
+  cursor: pointer;
+  margin: 10px auto;
+  background: rgb(102, 35, 226);
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  min-width: 200px;
+  text-transform: uppercase;
+  font-size: 18px;
+  transition: .2s;
+}
+
+.game-over .button__restart:hover {
+  background:#ffbbbb;
+  color: white;
+}
+
+canvas { 
+  background: #eee; 
+  display: block; 
+  margin: 0 auto; 
+}
diff --git a/SinglePlayer - Games/BreakOut Game/main.js b/SinglePlayer - Games/BreakOut Game/main.js
@@ -0,0 +1,214 @@
+// Main JS file 
+
+var canvas = document.getElementById("myCanvas"),
+	ctx = canvas.getContext("2d"),
+	// Positions
+	x = canvas.width/4,
+	y = canvas.height-30,
+	dx = 0.2,
+	dy = -0.2,
+	ballRadius = 10,
+	ballColour = randomColour(),
+
+	// Paddle 
+	paddleHeight = 10,
+	paddleWidth = 75, 
+	paddleX = (canvas.width-paddleWidth)/2,
+
+	// Keys
+	rightPressed = false,
+	leftPressed = false,
+
+	// Bricks
+	brickRowCount = 3,
+	brickColumnCount  = 5,
+	brickWidth = 75,
+	brickHeight = 20,
+	brickPadding = 10,
+	brickOffsetTop = 30,
+	brickOffsetLeft = 30,
+	bricks = [],
+
+	//Score 
+	score = 0,
+
+	//Restart Button
+	restartButton = document.getElementById('reset-btn'),
+
+	//Timestamp
+	tZero;
+
+// Build our bricks 
+for(c = 0; c < brickColumnCount; c++){
+	bricks[c] = [];
+	for(r = 0; r < brickRowCount; r++){
+		bricks[c][r] = {
+			x: 0,
+			y: 0,
+			status: 1 
+		};
+	}
+}
+
+// Draw our bricks 
+function drawBricks(){
+	for (c = 0; c < brickColumnCount; c++){
+		for(r = 0; r < brickRowCount; r++){
+			if(bricks[c][r].status == 1) { // Only draw bricks that not have been hit
+			var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft,
+				brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+				bricks[c][r].x = brickX;
+				bricks[c][r].y = brickY;
+				ctx.beginPath();
+				ctx.rect(brickX, brickY, brickWidth, brickHeight);
+				ctx.fillStyle = "#0095DD";
+				ctx.fill();
+				ctx.closePath();
+			} 
+		}
+	}
+}
+
+// Draw our ball
+function drawBall() {
+	ctx.beginPath();
+	ctx.arc(x, y, ballRadius, 0, Math.PI*2);
+	ctx.fillStyle = ballColour;
+	ctx.fill();
+	ctx.closePath();
+}
+
+// Get a random rgb colour 
+function randomColour() {
+
+	function value() {
+		return Math.floor(Math.random() * Math.floor(255)) 
+	}
+	return 'rgb(' + value() + ',' + value() + ',' + value() + ')';
+}
+
+// Draw our paddle
+function drawPaddle() {
+	ctx.beginPath()
+	ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
+	ctx.fillStyle = 'rgb(48, 10, 38)';
+	ctx.fill();
+	ctx.closePath();
+}
+
+// Create some collsion detection
+function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) { 
+            	// Check if the brick has been hit
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                    // Winner
+                    if(score == brickRowCount*brickColumnCount){
+                    	alert("YOU WIN, CONGRATULATIONS!");
+                        document.location.reload();
+                    }
+                }
+            }
+        }
+    }
+}
+
+function drawScore(){
+	ctx.font = "16px Arial";
+	ctx.fillStyle = "#0095DD"
+	ctx.fillText("Score: "+score, 8, 20); // Text to draw + placement on canvas
+}
+
+
+// Our main Draw function
+function draw(t) {
+
+	if(!tZero){
+		tZero = t;
+	}
+
+	var dt = t - tZero;
+	tZero = t;
+
+	var canvasContainer = document.getElementById('js-canvas');
+	ctx.clearRect(0, 0, canvas.width, canvas.height); 	//stop drawing from leaving a trail by clearing the canvas each time
+	drawBricks();
+	drawBall(ballColour);
+	drawPaddle();
+	drawScore();
+	collisionDetection();
+
+//- Bounce of top or bottom
+	if(y + dy < ballRadius){
+		dy = -dy;
+		ballColour = randomColour();
+		drawBall(ballColour);
+
+	}else if(y + dy > canvas.height-ballRadius) {
+        if(x > paddleX && x < paddleX + paddleWidth) {
+            dy = -dy;
+        }
+        else {
+        	canvasContainer.classList.add('game-over');
+        	document.getElementById('score-box').innerHTML = "Your Score was: "+score;
+  			return false;
+        }
+    }
+//- Bounce of left or right 
+	if(x + dx < ballRadius || x + dx > canvas.width - ballRadius){
+		dx = -dx;
+		ballColour = randomColour();
+		drawBall(ballColour);
+	}
+
+	x += dx * dt; //update x and y to move the position each time it draws
+	y += dy * dt;
+
+//-- Move the paddle
+	if(rightPressed && paddleX < canvas.width-paddleWidth) {
+		paddleX += 0.5 * dt;
+	} else if(leftPressed && paddleX > 0){
+		paddleX -= 0.5 * dt;
+	}
+
+	requestAnimationFrame(draw);
+
+}
+
+requestAnimationFrame(draw);
+
+// Key event functions
+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 restartGame(){
+	setTimeout(function(){
+		document.location.reload();
+	}, 100);
+}
+
+// Listen for key event
+document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);
+
+//Listen for click on restart button 
+restartButton.addEventListener("click", restartGame);