ALL THE FILES YOU NEED ARE RIGHT UNDER HERE !!!
|
|
| ||||||
GRAB THIS CODE AND RUN OFF LIKE YOU JUST STOLE IT !!! :)
<center> <a href="index.html" style="color: rgb(0,255,0)"><font color="46ff33">HOME</font></a></center>
<h1>
<font face="Impact" color="white" size="8">
RESPECT THE SPACE FISH !!!
</font>
</h1>
<center> <h2>
<font face="Impact" color="orange" size="5">
Arrow keys left and right, space bar to shoot. Have fun.
</font>
</h2></center>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shooting Gallery</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: #ff0000;
}
#gameArea {
position: relative;
width: 800px;
height: 400px;
border: 2px solid #333;
overflow: hidden;
background-image: url('sky.gif'); /* Replace with your background image URL */
background-size: cover; /* Ensure the image covers the entire area */
}
.target {
position: absolute;
width: 203px;
height: 65px;
background-image: url('plane.png');
background-size: cover;
animation: moveTarget 2s linear infinite;
}
@keyframes moveTarget {
0% { left: 0; }
100% { left: 750px; }
}
#shooter {
position: absolute;
bottom: 20px;
width: 50px;
height: 50px;
background-image: url('fish-swimming.gif');
background-size: cover;
left: 375px; /* Center the shooter */
}
#score {
margin: 20px;
font-size: 24px;
}
button {
margin: 10px;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Shooting Gallery</h1>
<div id="score">Score: 0</div>
<div id="gameArea">
<div id="shooter"></div>
</div>
<!-- Audio Elements -->
<audio id="shootSound" src="laser-shot.mp3"></audio>
<audio id="hitSound" src="explosion.mp3"></audio>
<audio id="bgMusic" src="bgmusic.mp3" loop autoplay></audio>
<script>
let score = 0;
let shooter = document.getElementById("shooter");
let scoreDisplay = document.getElementById("score");
let gameArea = document.getElementById("gameArea");
let shootSound = document.getElementById("shootSound");
let hitSound = document.getElementById("hitSound");
let bgMusic = document.getElementById("bgMusic");
function createTarget() {
const target = document.createElement("div");
target.classList.add("target");
target.style.top = Math.random() * (gameArea.offsetHeight - 50) + "px";
gameArea.appendChild(target);
// Remove target after some time if not clicked
setTimeout(() => {
if (target.parentNode) {
target.remove();
}
}, 2000);
}
function moveShooter(event) {
const step = 20; // Move 20px each time
const leftBound = 0;
const rightBound = gameArea.offsetWidth - shooter.offsetWidth;
let left = parseInt(window.getComputedStyle(shooter).left);
if (event.key === "ArrowLeft" && left > leftBound) {
shooter.style.left = left - step + "px";
} else if (event.key === "ArrowRight" && left < rightBound) {
shooter.style.left = left + step + "px";
} else if (event.key === " ") {
shoot();
}
}
function shoot() {
const bullet = document.createElement("div");
bullet.style.position = "absolute";
bullet.style.width = "5px";
bullet.style.height = "20px";
bullet.style.backgroundColor = "red";
bullet.style.left = (parseInt(shooter.style.left) + 22.5) + "px"; // Center the bullet
bullet.style.bottom = "70px"; // Position it above the shooter
gameArea.appendChild(bullet);
shootSound.play(); // Play shooting sound effect
let moveInterval = setInterval(() => {
bullet.style.bottom = parseInt(bullet.style.bottom) + 5 + "px"; // Move bullet up
checkCollision(bullet);
if (parseInt(bullet.style.bottom) > gameArea.offsetHeight) {
clearInterval(moveInterval);
bullet.remove();
}
}, 20);
}
function checkCollision(bullet) {
const targets = document.querySelectorAll(".target");
targets.forEach(target => {
const targetRect = target.getBoundingClientRect();
const bulletRect = bullet.getBoundingClientRect();
if (bulletRect.left < targetRect.left + targetRect.width &&
bulletRect.left + bulletRect.width > targetRect.left &&
bulletRect.top < targetRect.top + targetRect.height &&
bulletRect.height + bulletRect.top > targetRect.top) {
score++;
scoreDisplay.innerHTML = "Score: " + score;
hitSound.play(); // Play hit sound effect
target.remove();
bullet.remove();
checkScore();
}
});
}
function checkScore() {
if (score % 100 === 0 && score !== 0) {
speak("RESPECT THE SPACE FISH");
}
}
function speak(text) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'en-US';
utterance.volume = 1;
utterance.rate = 1;
speechSynthesis.speak(utterance);
}
function resetGame() {
score = 0;
scoreDisplay.innerHTML = "Score: " + score;
const targets = document.querySelectorAll(".target");
targets.forEach(target => target.remove());
}
// Create a target every second
setInterval(createTarget, 1000);
// Listen for keydown events
window.addEventListener("keydown", moveShooter);
</script>
<button onclick="resetGame()">Reset Game</button>
</body>
</html>
<h1>
<font face="Impact" color="white" size="8">
RESPECT THE SPACE FISH !!!
</font>
</h1>
<center> <h2>
<font face="Impact" color="orange" size="5">
Arrow keys left and right, space bar to shoot. Have fun.
</font>
</h2></center>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shooting Gallery</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: #ff0000;
}
#gameArea {
position: relative;
width: 800px;
height: 400px;
border: 2px solid #333;
overflow: hidden;
background-image: url('sky.gif'); /* Replace with your background image URL */
background-size: cover; /* Ensure the image covers the entire area */
}
.target {
position: absolute;
width: 203px;
height: 65px;
background-image: url('plane.png');
background-size: cover;
animation: moveTarget 2s linear infinite;
}
@keyframes moveTarget {
0% { left: 0; }
100% { left: 750px; }
}
#shooter {
position: absolute;
bottom: 20px;
width: 50px;
height: 50px;
background-image: url('fish-swimming.gif');
background-size: cover;
left: 375px; /* Center the shooter */
}
#score {
margin: 20px;
font-size: 24px;
}
button {
margin: 10px;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Shooting Gallery</h1>
<div id="score">Score: 0</div>
<div id="gameArea">
<div id="shooter"></div>
</div>
<!-- Audio Elements -->
<audio id="shootSound" src="laser-shot.mp3"></audio>
<audio id="hitSound" src="explosion.mp3"></audio>
<audio id="bgMusic" src="bgmusic.mp3" loop autoplay></audio>
<script>
let score = 0;
let shooter = document.getElementById("shooter");
let scoreDisplay = document.getElementById("score");
let gameArea = document.getElementById("gameArea");
let shootSound = document.getElementById("shootSound");
let hitSound = document.getElementById("hitSound");
let bgMusic = document.getElementById("bgMusic");
function createTarget() {
const target = document.createElement("div");
target.classList.add("target");
target.style.top = Math.random() * (gameArea.offsetHeight - 50) + "px";
gameArea.appendChild(target);
// Remove target after some time if not clicked
setTimeout(() => {
if (target.parentNode) {
target.remove();
}
}, 2000);
}
function moveShooter(event) {
const step = 20; // Move 20px each time
const leftBound = 0;
const rightBound = gameArea.offsetWidth - shooter.offsetWidth;
let left = parseInt(window.getComputedStyle(shooter).left);
if (event.key === "ArrowLeft" && left > leftBound) {
shooter.style.left = left - step + "px";
} else if (event.key === "ArrowRight" && left < rightBound) {
shooter.style.left = left + step + "px";
} else if (event.key === " ") {
shoot();
}
}
function shoot() {
const bullet = document.createElement("div");
bullet.style.position = "absolute";
bullet.style.width = "5px";
bullet.style.height = "20px";
bullet.style.backgroundColor = "red";
bullet.style.left = (parseInt(shooter.style.left) + 22.5) + "px"; // Center the bullet
bullet.style.bottom = "70px"; // Position it above the shooter
gameArea.appendChild(bullet);
shootSound.play(); // Play shooting sound effect
let moveInterval = setInterval(() => {
bullet.style.bottom = parseInt(bullet.style.bottom) + 5 + "px"; // Move bullet up
checkCollision(bullet);
if (parseInt(bullet.style.bottom) > gameArea.offsetHeight) {
clearInterval(moveInterval);
bullet.remove();
}
}, 20);
}
function checkCollision(bullet) {
const targets = document.querySelectorAll(".target");
targets.forEach(target => {
const targetRect = target.getBoundingClientRect();
const bulletRect = bullet.getBoundingClientRect();
if (bulletRect.left < targetRect.left + targetRect.width &&
bulletRect.left + bulletRect.width > targetRect.left &&
bulletRect.top < targetRect.top + targetRect.height &&
bulletRect.height + bulletRect.top > targetRect.top) {
score++;
scoreDisplay.innerHTML = "Score: " + score;
hitSound.play(); // Play hit sound effect
target.remove();
bullet.remove();
checkScore();
}
});
}
function checkScore() {
if (score % 100 === 0 && score !== 0) {
speak("RESPECT THE SPACE FISH");
}
}
function speak(text) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'en-US';
utterance.volume = 1;
utterance.rate = 1;
speechSynthesis.speak(utterance);
}
function resetGame() {
score = 0;
scoreDisplay.innerHTML = "Score: " + score;
const targets = document.querySelectorAll(".target");
targets.forEach(target => target.remove());
}
// Create a target every second
setInterval(createTarget, 1000);
// Listen for keydown events
window.addEventListener("keydown", moveShooter);
</script>
<button onclick="resetGame()">Reset Game</button>
</body>
</html>
RESPECT THE SPACE FISH !!!
Arrow keys left and right, space bar to shoot. Have fun.
Shooting Gallery
Score: 0