Scribd
Upload
9 views4 pages

JS VS

Uploaded by

vierlyyanegara
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
9 views4 pages

JS VS

Uploaded by

vierlyyanegara
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/ 4

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Shooter Game</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/howler.min.js"></script>
<style>
canvas {
border: 1px solid #b55a5a;
background-image: url("file:///D:/kuliah%20ajg/download%20(1).jpeg");
background-size: cover;
}
</style>
</head>

<body>
<canvas id="gameCanvas" width="1024" height="768"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const shootSound = new Howl({


src: ['shoot.mp3'],
volume: 0.5,
});

const gameOverSound = new Howl({


src: ['gameover.mp3'],
volume: 0.8,
});

function playShootSound() {
shootSound.play();
}

function playGameOverSound() {
gameOverSound.play();
}

const player = {
x: 50,
y: 768 / 2,
width: 30,
height: 30,
color: 'blue',
speed: 8,
};

const enemies = [];

function createEnemies() {
for (let i = 0; i < 3; i++) {
enemies.push({
x: canvas.width + Math.random() * 200,
y: Math.random() * (canvas.height - 30),
size: 30,
color: 'purple',
speed: Math.random() * 3 + 1,
});
}
}

const bullets = [];

let score = 0;
let isGameOver = false;

function drawPlayer() {
ctx.fillStyle = player.color;
ctx.beginPath();
ctx.moveTo(player.x, player.y);
ctx.lineTo(player.x, player.y + player.height);
ctx.lineTo(player.x + player.width, player.y + player.height / 2);
ctx.fill();
}

function drawEnemies() {
ctx.fillStyle = 'purple';
for (const enemy of enemies) {
const angleStep = (Math.PI * 2) / 5;
ctx.beginPath();
for (let j = 0; j < 5; j++) {
const angle = j * angleStep;
const enemyX = enemy.x + Math.cos(angle) * enemy.size;
const enemyY = enemy.y + Math.sin(angle) * enemy.size;
if (j === 0) {
ctx.moveTo(enemyX, enemyY);
} else {
ctx.lineTo(enemyX, enemyY);
}
}
ctx.closePath();
ctx.fill();
}
}

function drawBullets() {
ctx.fillStyle = 'red';
for (const bullet of bullets) {
if (bullet.state === 'fire') {
ctx.beginPath();
ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
ctx.fill();
}
}
}

function drawScore() {
ctx.fillStyle = 'red';
ctx.font = '24px Arial';
ctx.fillText('Score: ' + score, 10, 30);
}

function drawGameOver() {
ctx.fillStyle = 'red';
ctx.font = '48px Arial';
ctx.fillText('Game Over! Press R to Restart', canvas.width / 2 - 300, canvas.height / 2);
}

function updatePositions() {
if (!isGameOver) {
for (const enemy of enemies) {
enemy.x -= enemy.speed;
if (enemy.x + enemy.size < 0) {
enemy.x = canvas.width + Math.random() * 200;
enemy.y = Math.random() * (canvas.height - 30);
}
}

for (const bullet of bullets) {


if (bullet.state === 'fire') {
bullet.x += bullet.speed;
if (bullet.x > canvas.width) {
bullet.state = 'ready';
}
}
}

checkCollision();
}
}

function checkCollision() {
for (let i = bullets.length - 1; i >= 0; i--) {
for (let j = enemies.length - 1; j >= 0; j--) {
const bullet = bullets[i];
const enemy = enemies[j];
if (
bullet.x + bullet.radius > enemy.x - enemy.size / 2 &&
bullet.x - bullet.radius < enemy.x + enemy.size / 2 &&
bullet.y + bullet.radius > enemy.y - enemy.size / 2 &&
bullet.y - bullet.radius < enemy.y + enemy.size / 2
) {
score++;
bullet.state = 'ready';
bullets.splice(i, 1);
enemies.splice(j, 1);
enemies.push({
x: canvas.width + Math.random() * 200,
y: Math.random() * (canvas.height - 30),
size: 30,
color: 'purple',
speed: Math.random() * 3 + 1,
});
break;
}
}
}

for (const enemy of enemies) {


if (
player.x < enemy.x + enemy.size / 2 &&
player.x + player.width > enemy.x - enemy.size / 2 &&
player.y < enemy.y + enemy.size / 2 &&
player.y + player.height > enemy.y - enemy.size / 2
) {
gameOver();
}
}
}

function gameOver() {
isGameOver = true;
playGameOverSound();
drawGameOver();
}

function restartGame() {
if (isGameOver) {
isGameOver = false;
score = 0;
player.x = 50;
player.y = 768 / 2;
enemies.length = 0;
createEnemies();
draw();
}
}

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
drawEnemies();
drawBullets();
drawScore();

updatePositions();

if (!isGameOver) {
requestAnimationFrame(draw);
}
}

window.addEventListener('keydown', function (e) {


if (!isGameOver) {
if (e.key === 'ArrowUp' && player.y > 0) {
player.y -= player.speed;
} else if (e.key === 'ArrowDown' && player.y + player.height < canvas.height) {
player.y += player.speed;
} else if (e.key === ' ' && bullets.every(bullet => bullet.state === 'ready')) {
bullets.push({
x: player.x + player.width,
y: player.y + player.height / 2,
radius: 5,
color: 'red',
speed: 8,
state: 'fire',
});
playShootSound();
}
}
});

window.addEventListener('keydown', function (e) {


if (e.key === 'r') {
restartGame();
}
});

createEnemies();
draw();
</script>
</body>

</html>

You might also like