<!DOCTYPE html>
<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">
<img id="background" src="img/background.jpg" />
<img id="ball" src="img/ball.jpg"/>
<img id="goalie" src="img/goalie.jpg"/>
<div id="score" style="position:absolute;" >Score</div>
</div>
<div id="rules" style="position:absolute;" >
<h1>Simple Shooter Game</h1>
<p>On building this simple game I learnt more about how the programming languages HTML5, CSS and JavaScript worked. The rules are stated below<p>
<ul>
<li>jkdsgjs</li>
<li>hfdja</li>
<li>`jeatngdadv</li>
</ul>
<p>Have fun!!</p>
<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>
<p id="gameover"></p>
</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>