Skip to content

Commit

Permalink
Merge pull request #1080 from Meetjain1/main
Browse files Browse the repository at this point in the history
Feat : Added Breakout Game
  • Loading branch information
Durgesh4993 authored Jul 25, 2024
2 parents bb800be + 0caf8c3 commit 38ae184
Show file tree
Hide file tree
Showing 4 changed files with 302 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) |



Expand Down
20 changes: 20 additions & 0 deletions SinglePlayer - Games/BreakOut Game/index.html
Original file line number Diff line number Diff line change
@@ -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>
67 changes: 67 additions & 0 deletions SinglePlayer - Games/BreakOut Game/main.css
Original file line number Diff line number Diff line change
@@ -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;
}
214 changes: 214 additions & 0 deletions SinglePlayer - Games/BreakOut Game/main.js
Original file line number Diff line number Diff line change
@@ -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);

0 comments on commit 38ae184

Please sign in to comment.