Gamedev Canvas Workshop - lesson 10

Finishing up.

by TR1N1TYF0XX

HTML

<canvas id="myCanvas" width="480" height="400"></canvas>
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
    background-color: #BB8FCE;
    color: white;
    padding: 8px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    top:-400px;
    left:10px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #BB8FCE;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: White;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #8E44AD}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #8E44AD;
}
</style>
</head>
<body>
<div class="dropdown">
  <button class="dropbtn">Menu</button>
  <div class="dropdown-content">
    <script>
    var txt = "Easy";
    document.write
    (txt.link("file:///F:/Game%20Design/Demi's%20project%20level%201.html")+"</p>");
    </script>
    
    <script>
    var txt = "Medium";
    document.write
    (txt.link("file:///F:/Game%20Design/Demi's%20project%20level%202x.html")+"</p>");
    </script>
    
     <script>
    var txt = "Hard";
    document.write
    (txt.link("")+"</p>");
    </script>
  </div>
</div>

</body>
</html>

CSS

canvas {
background:url(https://i.imgur.com/gRnQD1O.gif); }

JavaScript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 8;
var dy = -8;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 8;
var brickColumnCount = 4;
var brickWidth = 30;
var brickHeight = 10;
var brickPadding = 35;
var brickOffsetTop = 60;
var brickOffsetLeft = 30;
var score = 0;
var lives = 9;

var bricks = [];
for(var c=0; c<brickColumnCount; c++) {
  bricks[c] = [];
  for(var r=0; r<brickRowCount; r++) {
    bricks[c][r] = { x: 0, y: 0, status: 1 };
  }
}

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
document.addEventListener("mousemove", mouseMoveHandler, false);

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 mouseMoveHandler(e) {
  var relativeX = e.clientX - canvas.offsetLeft;
  if(relativeX > paddleWidth && relativeX < canvas.width) {
    paddleX = relativeX - paddleWidth;
  }
}
function collisionDetection() {
  for(var c=0; c<brickColumnCount; c++) {
    for(var r=0; r<brickRowCount; r++) {
      var b = bricks[c][r];
      if(b.status == 1) {
        if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
          dy = -dy;
          b.status = 0;
          score++;
          if(score == brickRowCount*brickColumnCount) {
            alert("YOU WIN, CONGRATS!");
            document.location.reload();
          }
        }
      }
    }
  }
}

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI*2);
  ctx.fillStyle = "#BB8FCE";
  ctx.fill();
  ctx.closePath();
}
function drawPaddle()...