Brick game - HTML, JS

brick-game-html-js.markdown

Brick game - HTML, JS

A Pen by Vasilii V on CodePen.

License.

index.html

<canvas id="canvas" width='500' height='300' tabindex='1'></canvas>
<div id='lives'>DIV
</div>

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">Restart</span>
    <p>Game over. Restart?</p>
  </div>

</div>
  

script.js

let posX = 90; //platform initial position
let posXBall = 75; //ball initial position
let posYBall = 70; //ball initial position
let ballDown = true; //ball goes up or down
let ballRight = true; // ball goes right or left
let lives = 3; //number of lives
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let brickarr = [[0,25], [150,25], [300,25], [450,25], [75,50], [225,50],[375,50]] //bricks coords x,y
var dx = 2;
var dy = -2;
var ballRadius = 20;
let liveelem = document.getElementById('lives');
ctx.fillStyle = "blue";

const draw = () => {
if (lives>0) {
			
			liveelem.innerHTML = lives;


}




//ball
ctx.beginPath();
ctx.arc(75, 70, 20, 0, 2 * Math.PI);
ctx.stroke();

ctx.fill();

//bricks
let adder = 0;
const bricks = (x,y) => {
  ctx.fillRect(x, y, 75, 30);


}

const gameOver = win => win? alert('You won!') : alert('You Lost!')

//ball animation
const ballMove = () => {
//check if won
if (brickarr.length === 0) {
ctx.clearRect(0,0,500,300);
	alert('Win');
   posX = 90;
  brickarr = [[0,25], [150,25], [300,25], [450,25], [75,50], [225,50],[375,50]];
  draw();
}

  ctx.clearRect(0,0,500,250);
 // bricks(0,20);
	 for (let a = 0; a<brickarr.length; a++) {
   let x = brickarr[a][0];
   let y = brickarr[a][1];
   
	    bricks(x,y);
      if (posXBall<=x+75 && posXBall>=x && posYBall <= y+30 && posYBall >= y){
	brickarr.splice(a,1);
}
	  } 
  ctx.beginPath();
  ctx.arc(posXBall, posYBall, 20, 0, 2 * Math.PI);
   if(posXBall + dx > canvas.width-ballRadius || posXBall + dx < ballRadius) {
        dx = -dx;
    }
    if(posYBall + dy > canvas.height-49-ballRadius || posYBall + dy < ballRadius) {
        dy = -dy;
    }
    
    posXBall += dx;
    posYBall += dy;
      
  
  if (posYBall >= 230 && posXBall>posX+150 || posYBall >= 230 && posXBall<posX) {
    //alert('Game over!');
    lives--;
    //render lives
		if (lives>0) {
			
			liveelem.innerHTML = lives;


}
    console.log(lives);
    if(lives === 0) {
   modal.style.display = "block";
  		
span.onclick = function() {
  document.location.reload(true);
}
    }
    
    posXBall = 75;
    posYBall = 70;
  }
  ctx.stroke();
  ctx.fill();
  
  //console.log('posXBall ' + posXBall + ' posYBall ' + posYBall + ' ballDown ' + ballDown + ' ballRight  ' + ballRight + ' platform ' + posX  )
  //console.log('moved');
}
setInterval(() => ballMove(), 10);

//platform
ctx.fillRect(90, 250, 150, 30);


//platform moving func
const animationPlatform = (ecode) => {
  
  ctx.clearRect(0,250,500,300);
  ctx.fillRect(posX, 250, 150, 30);
  if (ecode === 'ArrowRight') {posX+=5;}
  else {posX-=5}
//console.log(posX);
};


//platform moves onkeydown
canvas.addEventListener('keydown', evt => {
 if (evt.code === 'ArrowRight' && posX<350) {
    
  animationPlatform('ArrowRight');
 }
else if (evt.code === 'ArrowLeft' && posX>0) { 
  animationPlatform('ArrowLeft');
  
}

})
}
setTimeout(() => draw(), 0)

//Cursor position
function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    console.log("x: " + x + " y: " + y)
}


canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e)
})



var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

style.css

body {
  background-image: url("https://previews.123rf.com/images/roystudio/roystudio1509/roystudio150900165/44754411-white-canvas-background-texture-closeup-denim-fabric-pattern.jpg");
  background-color: #cccccc;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}