Scribd
Upload
6 views

JS VS

Uploaded by

vierlyyanegara
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

JS VS

Uploaded by

vierlyyanegara
Copyright
© © All Rights Reserved
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