diff --git a/README.md b/README.md index 12db9ce0..6cfe5683 100644 --- 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 new file mode 100644 index 00000000..ddf2529d --- /dev/null +++ b/SinglePlayer - Games/BreakOut Game/index.html @@ -0,0 +1,20 @@ + + + + + Breakout Game + + + +
+
+

Game Over

+

+
+ + +
+ + + + \ No newline at end of file diff --git a/SinglePlayer - Games/BreakOut Game/main.css b/SinglePlayer - Games/BreakOut Game/main.css new file mode 100644 index 00000000..73f3972d --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/SinglePlayer - Games/BreakOut Game/main.js b/SinglePlayer - Games/BreakOut Game/main.js new file mode 100644 index 00000000..c056c58e --- /dev/null +++ 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 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);