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: #900C3F;
    color: white;
    padding: 8px;
    font-size: 16px;
    border: none;
}

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

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

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

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

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

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</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:/Demi's%20project%20level%201x.html")+"</p>");
    </script>
    <script>
    var txt = "Medium";
    document.write
    (txt.link("")+"</p>");
    </script>
     <script>
    var txt = "Hard";
    document.write
    (txt.link("")+"</p>");
    </script>
  </div>
</div>

</body>
</html>

CSS

canvas {
background:url(https://i.pinimg.com/originals/87/87/9d/87879d98030fbb009088f2748b143721.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 = 2;
  var dy = -2;
  var paddleHeight = 10;
  var paddleWidth = 75;
  var paddleX = (canvas.width-paddleWidth)/2;
  var rightPressed = false;
  var leftPressed = false;
  var brickRowCount = 4;
  var brickColumnCount = 1;
  var brickWidth = 75;
  var brickHeight = 20;
  var brickPadding = 50;
  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() {
   ...