arkanoid

by Aboubacar Bah

HTML

<div id="field">

    
    
    <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="ball"></div>
    <div id="output"></div>
    <div id="attemptNode">2</div>
    <div id="scoreNode">0</div>
    <div id="strikeNode">0</div>
</div>

CSS

* {
    padding: 0;
    margin: 0;
}

body {
    padding: 5px;

}

#field {
    width: 600px;
    height: 600px;
    padding-top: 30px;
    border: 1px solid #aaa;
    position: relative;
}

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

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

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

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

.quille3 {
    width: 10px;
    height: 50px;
    margin: 1px;
    top : -278px;
    left : 130px;
    position: relative;
    border: 1px solid;
}

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

.quille4 {
    width: 60px;
    height: 10px;
    margin: 1px;
    top : -343px;
    left : 130px;
    position: relative;
    border: 1px solid;
}

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

.quille5 {
    width: 10px;
    height: 100px;
    margin: 1px;
    top : -344px;
    left : 180px;
    position: relative;
    border: 1px solid;
}

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

.quille6 {
    width: 250px;
    height: 10px;
    margin: 1px;
    top : -348px;
    left : 180px;
    position: relative;
    border: 1px solid;
}

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

.quille7 {
    width: 10px;
    height: 250px;
    margin: 1px;
    top : -350px;
    left : 420px;
    position: relative;
    border: 1px solid;
}

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


.quille8 {
    width: 90px;
    height: 10px;
    margin: 1px;
    top : -363px;
    left : 328px;
    position: relative;
    border: 1px solid;
}

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

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

JavaScript

var width = document.getElementById("field").clientWidth;
var height = document.getElementById("field").clientHeight;
var bWidth = document.getElementById("ball").clientWidth;
var bHeight = document.getElementById("ball").clientHeight;
var out = document.getElementById("output");


var ball = document.getElementById("ball");
// initial location of the ball, and step size
var step = 7;
var pTop = -2065;
var pLeft = 223px;

document.addEventListener("keydown", moveBall, false);
function moveBall(evt){
	if (evt.which == 38 || evt.keyCode == 38){
		pTop -= step;
    ball.style.top = pTop + "px";
  }else if (evt.which == 40 || evt.keyCode == 40){
    pTop += step;
    ball.style.top = pTop + "px";
  }else if (evt.which == 37 || evt.keyCode == 37){
    pLeft -= step;
    ball.style.left = pLeft + "px";
  }else if (evt.which == 39 || evt.keyCode == 39){
    pLeft += step;
    ball.style.left = pLeft + "px";
  }
}