<html> <head><title>Simple Game</title></head> <style> #score{ background-color: white; height:50px; width:140px; top:10px; left:540px; font-size:30px; } #board{ position:absolute; width:5000px; height:300px; } #background{ position:absolute; width:700px; height:500px; } #ball{ position:absolute; width:70px; height:70px; top: 410px; left: 300px; } #goalie{ position:absolute; width:100px; top:200px; left:300px; } #rules{ position:absolute; top:0px; left:730px; } </style> <body> <div id="board">

<div id="score" style="position:absolute;" >Score</div> </div> <div id="rules" style="position:absolute;" >

Simple Shooter Game

On building this simple game I learnt more about how the programming languages HTML5, CSS and JavaScript worked. The rules are stated below

jkdsgjs
hfdja
`jeatngdadv

Have fun!!

<button onclick="shootLeft()" style="top:400px; left:100px;" type="leftButton">Shoot left</button> <button onclick="shootRight()" style="top:400px; left:200px;" type="rightButton">Shoot right</button> <div>

</div> </div> <script> var ball = null; var x = 1; var score = 0; document.getElementById('score').innerHTML = '0'; var animate; ball = document.getElementById('ball'); function shootLeft(){ var ran = Math.random(); while(parseInt(ball.style.top) != 300){ ball.style.left = parseInt(ball.style.left) - 1 + 'px'; ball.style.top = parseInt(ball.style.top) - 1 + 'px'; animate = setTimeout(shootLeft,20); } if(ran<0.3){ score = score + 1; document.getElementById('score').innerHTML = score; } else{ document.getElementById('score').innerHTML = score; } x++; if(x==10){ document.getElementById('gameover').innerHTML = "Game over! You got a score of " + score; } ball.style.left = '300px'; ball.style.top = '410px'; } function shootRight(){ van ran = Math.random(); while(parseInt(ball.style.top != 300){ ball.style.left = parseInt(ball.style.left) + 1 + 'px'; ball.style.top = parseInt(ball.style.top) - 1 + 'px'; animate = setTimeout(shootRight,20); } if(ran>0.7){ score = score + 1; document.getElementById('score').innerHTML = score; } else{ document.getElementById('score').innerHTML = score; } x++; if(x==10){ document.getElementById('gameover').innerHTML = "Game over! You got a score of " + score; } ball.style.left = '300px'; ball.style.top = '410px'; } } </script> </body> </html>

1Thank You

ANSWER