game development in javascript

SOURCE CODE

                
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <style>
                  #b1
                  { position:absolute;
                   top:30px;
                    left:0px;
                   width:55px;
                   height:55px;
                  background:rgba(055,190,156,1);
                  color:blue;
                  font-weight:bold;
                  border:1px solid black;
                  }
                  #b5
                  { position:absolute;
                     top:30px;
                     left:60px;
                     width:55px;
                     height:55px;
                  background:rgba(011,123,140,1);
                  font-weight:bold;
                  border:1px solid black;
                  }
                  #b3
                  { position:absolute;
                     top:30px;
                     left:120px;
                     width:55px;
                     height:55px;
                  background:rgba(022,140,190,1);
                  font-weight:bold;
                  border:1px solid black;
                  }
                  #b4
                  {
                   position:absolute;
                   top:30px;
                   left:180px;
                   width:55px;
                   height:55px;
                  background:rgba(100,290,140,1);
                  font-weight:bold;
                  border:1px solid black;

                  transition-duration:1000ms;
                  }

                  #b2
                  {
                   position:relative;
                   top:30px;

                   left:240px;
                   width:55px;
                   height:55px;
                  background:rgba(100,290,140,1);
                  font-weight:bold;
                  border:1px solid black;

                  transition-duration:1000ms;
                  }
                  html, body
                  {
                  padding: 0px;
                  margin: 0px;
                          }
                  #container1
                  {
                  position:absolute;
                  width:300px;
                  height:350px;
                  top:50px;
                  left:100px;
                  background: green;
                  }
                  #container2
                  {
                  position:absolute;
                  width:300px;
                  height:100px;
                  top:400px;
                  left:100px;
                  background: blue;
                  }
                  #obj
                  {
                  position:absolute;
                  width:27px;
                  height:18px;
                  top:5px;
                  left:5px;
                  background:#A64D2C;
                  border:1px solid black;
                  z-index:2;
                  }
                  #divider1
                  {
                  position:absolute;
                  top:0px;
                  left:50px;
                  height:80px;
                  width:2px;
                  background:maroon;
                  }
                  #divider2
                  {
                  position:absolute;
                  top:80px;
                  left:50px;
                  height:2px;
                  width:80px;
                  background:grey;
                  }
                  #divider3
                  {
                  position:absolute;
                  top:150px;
                  left:30px;
                  height:2px;
                  width:90px;
                  background:orange;
                  }
                  #divider4
                  {
                   position:absolute;
                   top:170px;
                   left:170px;
                   height:120px;
                   width:2px;
                   background:black;
                  }
                  #divider5
                  {
                   position:absolute;
                   top:170px;
                   left:250px;
                   height:120px;
                   width:2px;
                   background:yellow;
                  }
                  #divider6
                  {
                   position:absolute;
                   top:80px;
                   left:180px;
                   height:2px;
                   width:70px;
                   background:orange;
                  }
                  #divider7
                  {
                   position:absolute;
                   width:2px;
                   height:350px;
                   top:0px;
                   left:0px;
                   background:black;
                  }
                  #divider8
                  {
                    position:absolute;
                    width:300px;
                    height:2px;
                    top:0px;
                    left:0px;
                    background:black;
                  }
                  #divider9
                  {
                    position:absolute;
                    width:2px;
                    height:350px;
                    top:0px;
                    left:300px;
                    background:black;
                  }
                  #divider10
                  {
                   position:absolute;
                   width:300px;
                   height:2px;
                   top:349px;
                   left:0px;
                   background:black;
                  }
                  #gate
                  {
                  position:absolute;
                  left:2px;
                  top:320px;
                  width:50px;
                  height:30px;
                  background:white;
                  color:black;
                  }
                  </style>
                  </head>
                  <body>
                  <div id="container1">
                    <div id="obj"></div>
                    <div id="divider1"></div>
                    <div id="divider2"></div>
                    <div id="divider3"></div>
                    <div id="divider4"></div>
                    <div id="divider5"></div>
                    <div id="divider6"></div>
                    <div id="divider7"></div>
                    <div id="divider8"></div>
                    <div id="divider9"></div>
                    <div id="divider10"></div>
                    <div id="gate">END</div>
                  </div>
                  <div id="container2">
                    <button id="b1" onclick="leftAnimation()">LEFT</button>
                    <button id="b5" onclick="rightAnimation()">RIGHT</button>
                    <button id ="b2" onclick="stopAnimation()">STOP</button>
                    <button id="b3" onclick="downAnimation()">DOWN</button>
                    <button  id ="b4" onclick ="upAnimation()">UP</button>
                  </div>
                  <script>
                  function leftAnimation()
                  {
                  obj.style.left=(obj.offsetLeft=obj.offsetLeft - 1) +'px';
                  regID=window.requestAnimationFrame(leftAnimation);
                  }
                  function rightAnimation()
                  {
                  obj.style.left = ( obj.offsetLeft = obj.offsetLeft + 1) + 'px';

                  regID=window.requestAnimationFrame(rightAnimation);

                  }
                  function upAnimation()
                  {
                  obj.style.top=(obj.offsetTop=obj.offsetTop - 1) +'px';
                  regID=window.requestAnimationFrame(upAnimation);
                  }
                  function downAnimation()
                  {
                  obj.style.top=(obj.offsetTop=obj.offsetTop + 1) +'px';
                  regID=requestAnimationFrame(downAnimation);
                  }
                  function stopAnimation()
                  {
                  window.cancelAnimationFrame(regID);
                  }
                  function detectcollision()
                  {
                     elx=obj.offsetLeft;
                     ely=obj.offsetTop;
                     elw=obj.offsetWidth;
                     elh=obj.offsetHeight;

                    l1x=divider1.offsetLeft;
                    l1y=divider1.offsetTop;
                    l1w=divider1.offsetWidth;
                    l1h=divider1.offsetHeight;
                  if((( elx + elw )> l1x ) && (elx <( l1x + l1w )) && (( ely + elh )>l1y) && ( ely<( l1y + l1h )))

                     {
                      alert("You Lost !!!");
                      el.parentNode.removeChild(el);

                     }
                     l2x=divider2.offsetLeft;
                     l2y=divider2.offsetTop;
                     l2w=divider2.offsetWidth;
                     l2h=divider2.offsetHeight;
                  if((( elx + elw )> l2x ) && (elx <( l2x + l2w )) && (( ely + elh )>l2y) && ( ely<( l2y + l2h )))

                      {
                       alert("You Lost !!!");
                       el.parentNode.removeChild(el);

                      }
                      l3x=divider3.offsetLeft;
                      l3y=divider3.offsetTop;
                      l3w=divider3.offsetWidth;
                      l3h=divider3.offsetHeight;
                  if((( elx + elw )> l3x ) && (elx <( l3x + l3w )) && (( ely + elh )>l3y) && ( ely<( l3y + l3h )))

                       {
                        alert("You Lost !!!");
                        el.parentNode.removeChild(el);

                       }
                       l4x=divider4.offsetLeft;
                       l4y=divider4.offsetTop;
                       l4w=divider4.offsetWidth;
                       l4h=divider4.offsetHeight;
                  if((( elx + elw )> l4x ) && (elx <( l4x + l4w )) && (( ely + elh )>l4y) && ( ely<( l4y + l4h )))

                        {
                         alert("You Lost !!!");
                         el.parentNode.removeChild(el);

                        }
                        l5x=divider5.offsetLeft;
                        l5y=divider5.offsetTop;
                        l5w=divider5.offsetWidth;
                        l5h=divider5.offsetHeight;
                  if((( elx + elw )> l5x ) && (elx <( l5x + l5w )) && (( ely + elh )>l5y) && ( ely<( l5y + l5h )))

                         {
                          alert("You Lost !!!");
                          el.parentNode.removeChild(el);

                         }
                         l6x=divider6.offsetLeft;
                         l6y=divider6.offsetTop;
                         l6w=divider6.offsetWidth;
                         l6h=divider6.offsetHeight;
                  if((( elx + elw )> l6x ) && (elx <( l6x + l6w )) && (( ely + elh )>l6y) && ( ely<( l6y + l6h )))

                          {
                           alert("You Lost !!!");
                           el.parentNode.removeChild(el);

                          }
                          l7x=divider7.offsetLeft;
                          l7y=divider7.offsetTop;
                          l7w=divider7.offsetWidth;
                          l7h=divider7.offsetHeight;
                  if((( elx + elw )> l7x ) && (elx <( l7x + l7w )) && (( ely + elh )>l7y) && ( ely<( l7y + l7h )))

                           {
                            alert("You Lost !!!");
                            el.parentNode.removeChild(el);

                           }
                           l8x=divider8.offsetLeft;
                           l8y=divider8.offsetTop;
                           l8w=divider8.offsetWidth;
                           l8h=divider8.offsetHeight;
                  if((( elx + elw )> l8x ) && (elx <( l8x + l8w )) && (( ely + elh )>l8y) && ( ely<( l8y + l8h )))

                            {
                             alert("You Lost !!!");
                             el.parentNode.removeChild(el);

                            }
                            l9x=divider9.offsetLeft;
                            l9y=divider9.offsetTop;
                            l9w=divider9.offsetWidth;
                            l9h=divider9.offsetHeight;
                  if((( elx + elw )> l9x ) && (elx <( l9x + l9w )) && (( ely + elh )>l9y) && ( ely<( l9y + l9h )))

                             {
                              alert("You Lost !!!");
                              el.parentNode.removeChild(el);

                             }
                             l10x=divider10.offsetLeft;
                             l10y=divider10.offsetTop;
                             l10w=divider10.offsetWidth;
                             l10h=divider10.offsetHeight;
                  if((( elx + elw )> l10x ) && (elx <( l10x + l10w )) && (( ely + elh )>l10y) && ( ely<( l10y + l10h )))

                              {
                               alert("You Lost !!!");
                               el.parentNode.removeChild(el);

                              }
                              gx=gate.offsetLeft;
                              gy=gate.offsetTop;
                              gw=gate.offsetWidth;
                              gh=gate.offsetHeight;
                  if((( elx + elw )> gx ) && (elx <( gx + gw )) && (( ely + elh )>gy) && ( ely<( gy + gh )))

                               {
                                alert("You Won !!!");
                                el.parentNode.removeChild(el);

                               }

                  window.requestAnimationFrame(detectcollision);
                  }
                    function docReady()
                     {
                       el=document.getElementById("obj");
                       l1=document.getElementById("divider1");
                        detectcollision();
                     }
                  window.addEventListener("load",docReady);
                  </script>
                  </body>
                  </html>