Scribd
Upload
23 views3 pages

Shoooter Game

This document contains the code for a basic space shooter game. It defines the game board dimensions and styles for the player, enemies, and bullets. It includes functions for moving the player based on keyboard input, spawning enemies, moving enemies, firing bullets from the player, moving bullets, checking for collisions, and updating the game state. The game initializes by creating an enemy and calling the update function in a loop to continuously render the game.

Uploaded by

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

Shoooter Game

This document contains the code for a basic space shooter game. It defines the game board dimensions and styles for the player, enemies, and bullets. It includes functions for moving the player based on keyboard input, spawning enemies, moving enemies, firing bullets from the player, moving bullets, checking for collisions, and updating the game state. The game initializes by creating an enemy and calling the update function in a loop to continuously render the game.

Uploaded by

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

<!

DOCTYPE html>
<html>
<head>
<title>Space Shooter</title>
<style>
#game-board {
width: 400px;
height: 600px;
border: 1px solid black;
margin: 0 auto;
position: relative;
}

#player {
width: 40px;
height: 40px;
background-color: blue;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

.enemy {
width: 30px;
height: 30px;
background-color: red;
position: absolute;
}

.bullet {
width: 5px;
height: 15px;
background-color: yellow;
position: absolute;
}
</style>
</head>
<body>
<div id="game-board">
<div id="player"></div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
// Game board dimensions
var width = 400;
var height = 600;

// Player properties
var playerWidth = 40;
var playerHeight = 40;
var playerSpeed = 5;

// Enemy properties
var enemyWidth = 30;
var enemyHeight = 30;
var enemySpeed = 2;
// Bullet properties
var bulletWidth = 5;
var bulletHeight = 15;
var bulletSpeed = 5;

// Game variables
var gameBoard = document.getElementById("game-board");
var player = document.getElementById("player");
var enemies = [];
var bullets = [];

// Function to move the player left


function moveLeft() {
var currentPosition = player.offsetLeft;
if (currentPosition > 0) {
player.style.left = currentPosition - playerSpeed + "px";
}
}

// Function to move the player right


function moveRight() {
var currentPosition = player.offsetLeft;
if (currentPosition < width - playerWidth) {
player.style.left = currentPosition + playerSpeed + "px";
}
}

// Function to create an enemy


function createEnemy() {
var enemy = document.createElement("div");
enemy.className = "enemy";
enemy.style.top = "0";
enemy.style.left = Math.random() * (width - enemyWidth) + "px";
gameBoard.appendChild(enemy);
enemies.push(enemy);
}

// Function to move the enemies


function moveEnemies() {
for (var i = 0; i < enemies.length; i++) {
var enemy = enemies[i];
var currentTop = parseInt(enemy.style.top);
if (currentTop > height) {
gameBoard.removeChild(enemy);
enemies.splice(i, 1);
} else {
enemy.style.top = currentTop + enemySpeed + "px";
}
}
}

// Function to create a bullet


function createBullet() {
var bullet = document.createElement("div");
bullet.className = "bullet";
bullet.style.top = player.offsetTop - bulletHeight + "px";
bullet.style.left = player.offsetLeft + playerWidth / 2 -
bulletWidth / 2 + "px";
gameBoard.appendChild(bullet);
bullets.push(bullet);
}

// Function to check for collisions between bullets and enemies


function checkCollisions() {
for (var i = 0; i < bullets.length; i++) {
var bullet = bullets[i];
var bulletRect = bullet.getBoundingClientRect();

for (var j = 0; j < enemies.length; j++) {


var enemy = enemies[j];
var enemyRect = enemy.getBoundingClientRect();

if (bulletRect.top <= enemyRect.bottom && bulletRect.left >=


enemyRect.left && bulletRect.right <= enemyRect.right) {
gameBoard.removeChild(bullet);
bullets.splice(i, 1);

gameBoard.removeChild(enemy);
enemies.splice(j, 1);
break;
}
}
}
}

// Function to update the game state


function update() {
moveEnemies();
moveBullets();
checkCollisions();

requestAnimationFrame(update);
}

// Function to handle key press events


function handleKeyPress(event) {
if (event.key === "ArrowLeft") {
moveLeft();
} else if (event.key === "ArrowRight") {
moveRight();
} else if (event.key === " ") {
createBullet();
}
}

// Start the game


createEnemy();
update();

// Event listener for key press events


document.addEventListener("keydown", handleKeyPress);
});
</script>

You might also like