<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>
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>
<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>
