Scribd
Upload
301 views5 pages

Sample Shooting Code

This document contains the code for a simple shooter game. The game uses HTML, CSS, and JavaScript to display images of a background, ball, and goalie. The CSS positions and styles these elements on the screen. The JavaScript controls the ball movement and scoring when the user clicks the "Shoot left" or "Shoot right" buttons. It tracks the score, ball position, and ends the game after 10 shots displaying the final score.

Uploaded by

Tito Fernandez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
301 views5 pages

Sample Shooting Code

This document contains the code for a simple shooter game. The game uses HTML, CSS, and JavaScript to display images of a background, ball, and goalie. The CSS positions and styles these elements on the screen. The JavaScript controls the ball movement and scoring when the user clicks the "Shoot left" or "Shoot right" buttons. It tracks the score, ball position, and ends the game after 10 shots displaying the final score.

Uploaded by

Tito Fernandez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

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>

You might also like