Practice Set, Week 9, Keyboard Events

by Aboubacar Bah

HTML

<div id="container">
 <div class="quille"></div>
    
    <div class="quille2"></div>
    
    <div class="quille3"></div>
    
    <div class="quille4"></div>
    
    <div class="quille5"></div>
    
     <div class="quille6"></div>
     
     <div class="quille7"></div>
     
     <div class="quille8"></div>
     
     <div class="quille9"></div>
     
     <div class="quille10"></div>
     
     <div class="quille11"></div>
     
      <div class="quille12"></div>

      <div class="quille13"></div>
      
      <div class="quille14"></div>

      <div class="quille15"></div>
      
      <div class="quille16"></div>
      
      <div class="quille17"></div>

      <div class="quille18"></div>
      
      <div class="quille19"></div>
      
      <div class="quille20"></div>

      <div class="quille21"></div>
      
      <div class="quille22"></div>
      
      <div class="quille23"></div>
      
      <div class="quille24"></div>
      
      <div class="quille25"></div>
      
      <div class="quille26"></div>


  <div id="output"></div>
  <div id="puck"></div>
</div>

CSS

#container {
  height: 600px;
  width: 600px;
  border: 1px solid black;
  background-color: #dddddd;
}

#puck {
  border: 1px solid red;
  height: 20px;
  width: 20px;
  background-color: red;
  position: relative;
  top: 500px;
  left: 190px;
}


.quille {
    width: 10px;
    height: 380px;
    margin: 1px;
    left: 20px;
    top : 180px;
    border: 1px solid;
    position: absolute;
}

.quille {
    background-color: silver;
    border-radius: 3px;
}

.quille2 {
    width: 120px;
    height: 10px;
    margin: 1px;
    display: flex;
    top : 170px;
    left : 20px;
    border: 1px solid;
    position: absolute;
}

.quille2 {
    background-color: silver;
    border-radius: 3px;
}

.quille3 {
    width: 10px;
    height: 50px;
    margin: 1px;
    top : 118px;
    left : 130px;
    position: absolute;
    border: 1px solid;
}

.quille4 {
    width: 60px;
    height: 10px;
    margin: 1px;
    top : 108px;
    left : 130px;
    position: absolute;
    border: 1px solid;
}


.quille5 {
    width: 10px;
    height: 100px;
    margin: 1px;
    top : 120px;
    left : 180px;
    position: absolute;
    border: 1px solid;
}


.quille6 {
    width: 250px;
    height: 10px;
    margin: 1px;
    top : 210px;
    left : 180px;
    position: absolute;
    border: 1px solid;
}

.quille6 {
    background-color: silver;
    border-radius: 3px;
}


.quille5 {
    background-color: silver;
    border-radius: 3px;
}


.quille4 {
    background-color: silver;
    border-radius: 3px;
}


.quille3 {
    background-color: silver;
    border-radius: 3px;
}

.quille7 {
    width: 10px;
    height: 250px;
    margin: 1px;
    top : 220px;
    left : 420px;
    position: absolute;
    border: 1px solid;
}

.quille7 {
    background-color: silver;
    border-radius: 3px;
}

.quille8 {
    width: 90px;
    height: 10px;
    margin: 1px;
    top : 460px;
    left : 328px;
    position: absolute;
    border: 1px solid;
}


.quille9 {
    width: 10px;
    height: 175px;
    margin:...

JavaScript

document.addEventListener("keydown", moveBall,false);

function moveBall(evt) {
  if (evt.which == 37 || evt.keyCode == 37) {
    mvleft();
  } else if (evt.which == 38 || evt.keyCode == 38) {
    mvup();
  } else if (evt.which == 39 || evt.keyCode == 39) {
    mvright();
  } else if (evt.which == 40 || evt.keyCode == 40) {
    mvdown();
  }
};

// initial location of the puck, and step size
var step = 4;
var pTop = 500;
var pLeft = 190;

// utility functions that will move the puck

// get a reference to the puck and container
var puck = document.getElementById("puck");
var theIce = document.getElementById("container");

// get the width and height of the ice and puck
var iceWidth = theIce.clientWidth;
var iceHeight = theIce.clientHeight;
var puckWidth = puck.offsetWidth;
var puckHeight = puck.offsetHeight;

// added code to make sure puck doesn't move off the ice
function mvup() {
  if (pTop - step >= 0) {
    pTop -= step;
  } else {
    pTop = 0;
  }
  puck.style.top = pTop + "px";
}

function mvdown() {
  if (pTop + step < iceHeight - puckHeight) {
    pTop += step;
  } else {
    pTop = iceHeight - puckHeight;
  }
  puck.style.top = pTop + "px";
}

function mvleft() {
  if (pLeft - step >= 0) {
  	pLeft -= step;
	} else {
  	pLeft = 0;
  }
  puck.style.left = pLeft + "px";
}

function mvright() {
	if (pLeft + step < iceWidth - puckWidth){
  	pLeft += step;
  } else {
  	pLeft = iceWidth - puckWidth;
  }
  puck.style.left = pLeft + "px";
}