Saturday, April 16, 2022

Example of shooting game codes


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



at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Featured post;

Example of shooting game codes