|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Project Supernova</title>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<style>
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
|
|
|
body {
|
|
|
background-color: #000;
|
|
|
color: #0f0;
|
|
|
font-family: 'Orbitron', sans-serif;
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
height: 100vh;
|
|
|
margin: 0;
|
|
|
}
|
|
|
canvas {
|
|
|
background-color: #0a0a0a;
|
|
|
border: 2px solid #0ff;
|
|
|
box-shadow: 0 0 20px #0ff;
|
|
|
cursor: crosshair;
|
|
|
}
|
|
|
.ui-overlay {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
flex-direction: column;
|
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
|
color: #0ff;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.ui-overlay h1 {
|
|
|
font-size: 4rem;
|
|
|
text-shadow: 0 0 15px #0ff;
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
.ui-overlay p {
|
|
|
font-size: 1.2rem;
|
|
|
margin-bottom: 2rem;
|
|
|
}
|
|
|
.ui-button {
|
|
|
background-color: transparent;
|
|
|
border: 2px solid #0ff;
|
|
|
color: #0ff;
|
|
|
padding: 1rem 2rem;
|
|
|
font-family: 'Orbitron', sans-serif;
|
|
|
font-size: 1.2rem;
|
|
|
text-transform: uppercase;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s ease;
|
|
|
margin: 0.5rem;
|
|
|
box-shadow: 0 0 10px #0ff inset;
|
|
|
}
|
|
|
.ui-button:hover {
|
|
|
background-color: #0ff;
|
|
|
color: #000;
|
|
|
box-shadow: 0 0 20px #0ff;
|
|
|
}
|
|
|
#hud {
|
|
|
position: absolute;
|
|
|
top: 20px;
|
|
|
width: 100%;
|
|
|
padding: 0 40px;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
font-size: 1.5rem;
|
|
|
text-shadow: 0 0 5px #fff;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
#player-hud {
|
|
|
color: #0ff;
|
|
|
}
|
|
|
#ai-hud {
|
|
|
color: #f0f;
|
|
|
}
|
|
|
#timer-hud {
|
|
|
color: #fff;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="hud" class="hidden">
|
|
|
<div id="player-hud">Player: 0 | Lives: 3</div>
|
|
|
<div id="timer-hud">3:00</div>
|
|
|
<div id="ai-hud">Rival: 0 | Lives: 3</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="menu" class="ui-overlay">
|
|
|
<h1 class="text-6xl font-bold">PROJECT SUPERNOVA</h1>
|
|
|
<p class="text-xl">An AI has challenged you to a duel amidst the asteroids.</p>
|
|
|
<div>
|
|
|
<button id="easy-btn" class="ui-button">Easy</button>
|
|
|
<button id="medium-btn" class="ui-button">Medium</button>
|
|
|
<button id="hard-btn" class="ui-button">Hard</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="game-over" class="ui-overlay hidden">
|
|
|
<h1 id="winner-text" class="text-6xl font-bold"></h1>
|
|
|
<p id="final-scores" class="text-xl"></p>
|
|
|
<button id="play-again-btn" class="ui-button">Play Again</button>
|
|
|
</div>
|
|
|
|
|
|
<canvas id="gameCanvas"></canvas>
|
|
|
|
|
|
<script type="module">
|
|
|
|
|
|
const canvas = document.getElementById('gameCanvas');
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
const menu = document.getElementById('menu');
|
|
|
const gameOverScreen = document.getElementById('game-over');
|
|
|
const hud = document.getElementById('hud');
|
|
|
|
|
|
let game;
|
|
|
|
|
|
function resizeCanvas() {
|
|
|
canvas.width = window.innerWidth;
|
|
|
canvas.height = window.innerHeight;
|
|
|
}
|
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
resizeCanvas();
|
|
|
|
|
|
|
|
|
class Vector {
|
|
|
constructor(x = 0, y = 0) {
|
|
|
this.x = x;
|
|
|
this.y = y;
|
|
|
}
|
|
|
add(v) { return new Vector(this.x + v.x, this.y + v.y); }
|
|
|
subtract(v) { return new Vector(this.x - v.x, this.y - v.y); }
|
|
|
multiply(s) { return new Vector(this.x * s, this.y * s); }
|
|
|
get magnitude() { return Math.sqrt(this.x ** 2 + this.y ** 2); }
|
|
|
get angle() { return Math.atan2(this.y, this.x); }
|
|
|
normalize() {
|
|
|
const mag = this.magnitude;
|
|
|
return mag === 0 ? new Vector() : new Vector(this.x / mag, this.y / mag);
|
|
|
}
|
|
|
static fromAngle(angle, magnitude = 1) {
|
|
|
return new Vector(magnitude * Math.cos(angle), magnitude * Math.sin(angle));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function isColliding(obj1, obj2) {
|
|
|
const dist = obj1.pos.subtract(obj2.pos).magnitude;
|
|
|
return dist < obj1.radius + obj2.radius;
|
|
|
}
|
|
|
|
|
|
function wrapEdges(obj) {
|
|
|
if (obj.pos.x < -obj.radius) obj.pos.x = canvas.width + obj.radius;
|
|
|
if (obj.pos.x > canvas.width + obj.radius) obj.pos.x = -obj.radius;
|
|
|
if (obj.pos.y < -obj.radius) obj.pos.y = canvas.height + obj.radius;
|
|
|
if (obj.pos.y > canvas.height + obj.radius) obj.pos.y = -obj.radius;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class Ship {
|
|
|
constructor(x, y, color, name) {
|
|
|
this.name = name;
|
|
|
this.pos = new Vector(x, y);
|
|
|
this.vel = new Vector();
|
|
|
this.angle = -Math.PI / 2;
|
|
|
this.radius = 15;
|
|
|
this.color = color;
|
|
|
this.isThrusting = false;
|
|
|
this.rotation = 0;
|
|
|
this.lives = 3;
|
|
|
this.score = 0;
|
|
|
this.isInvincible = false;
|
|
|
this.invincibilityTimer = 0;
|
|
|
this.shootCooldown = 0;
|
|
|
}
|
|
|
|
|
|
draw() {
|
|
|
ctx.save();
|
|
|
ctx.translate(this.pos.x, this.pos.y);
|
|
|
ctx.rotate(this.angle);
|
|
|
|
|
|
if (this.isInvincible && Math.floor(Date.now() / 100) % 2) {
|
|
|
ctx.strokeStyle = '#fff';
|
|
|
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
|
|
|
} else {
|
|
|
ctx.strokeStyle = this.color;
|
|
|
ctx.fillStyle = 'rgba(10, 10, 10, 0.5)';
|
|
|
}
|
|
|
|
|
|
|
|
|
ctx.shadowColor = this.color;
|
|
|
ctx.shadowBlur = 15;
|
|
|
ctx.lineWidth = 2;
|
|
|
ctx.beginPath();
|
|
|
ctx.moveTo(15, 0);
|
|
|
ctx.lineTo(-10, -10);
|
|
|
ctx.lineTo(-10, 10);
|
|
|
ctx.closePath();
|
|
|
ctx.stroke();
|
|
|
ctx.fill();
|
|
|
|
|
|
|
|
|
if (this.isThrusting && Math.random() > 0.2) {
|
|
|
ctx.fillStyle = '#fff';
|
|
|
ctx.beginPath();
|
|
|
ctx.moveTo(-10, 0);
|
|
|
ctx.lineTo(-18 - Math.random() * 5, 5);
|
|
|
ctx.lineTo(-18 - Math.random() * 5, -5);
|
|
|
ctx.closePath();
|
|
|
ctx.fill();
|
|
|
}
|
|
|
ctx.restore();
|
|
|
}
|
|
|
|
|
|
update() {
|
|
|
this.angle += this.rotation;
|
|
|
if (this.isThrusting) {
|
|
|
const force = Vector.fromAngle(this.angle, 0.1);
|
|
|
this.vel = this.vel.add(force);
|
|
|
}
|
|
|
|
|
|
this.vel = this.vel.multiply(0.99);
|
|
|
if (this.vel.magnitude > 5) {
|
|
|
this.vel = this.vel.normalize().multiply(5);
|
|
|
}
|
|
|
this.pos = this.pos.add(this.vel);
|
|
|
wrapEdges(this);
|
|
|
|
|
|
if (this.shootCooldown > 0) this.shootCooldown--;
|
|
|
if (this.isInvincible) {
|
|
|
this.invincibilityTimer--;
|
|
|
if (this.invincibilityTimer <= 0) {
|
|
|
this.isInvincible = false;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
shoot() {
|
|
|
if (this.shootCooldown === 0) {
|
|
|
const bulletVel = Vector.fromAngle(this.angle, 7).add(this.vel);
|
|
|
const bulletPos = this.pos.add(Vector.fromAngle(this.angle, 15));
|
|
|
game.bullets.push(new Bullet(bulletPos.x, bulletPos.y, bulletVel, this.color, this.name));
|
|
|
this.shootCooldown = 15;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
hit() {
|
|
|
if (this.isInvincible) return;
|
|
|
this.lives--;
|
|
|
game.createExplosion(this.pos, this.color, 40);
|
|
|
if (this.lives > 0) {
|
|
|
this.resetPosition();
|
|
|
} else {
|
|
|
game.handlePlayerDeath(this);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
resetPosition() {
|
|
|
this.pos = new Vector(Math.random() * canvas.width, Math.random() * canvas.height);
|
|
|
this.vel = new Vector();
|
|
|
this.isInvincible = true;
|
|
|
this.invincibilityTimer = 180;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
class Player extends Ship {
|
|
|
constructor(x, y) {
|
|
|
super(x, y, '#0ff', 'Player');
|
|
|
this.keys = {};
|
|
|
this.setupControls();
|
|
|
}
|
|
|
|
|
|
setupControls() {
|
|
|
window.addEventListener('keydown', (e) => this.keys[e.code] = true);
|
|
|
window.addEventListener('keyup', (e) => this.keys[e.code] = false);
|
|
|
}
|
|
|
|
|
|
update() {
|
|
|
this.rotation = 0;
|
|
|
if (this.keys['KeyA'] || this.keys['ArrowLeft']) this.rotation = -0.05;
|
|
|
if (this.keys['KeyD'] || this.keys['ArrowRight']) this.rotation = 0.05;
|
|
|
|
|
|
this.isThrusting = this.keys['KeyW'] || this.keys['ArrowUp'];
|
|
|
|
|
|
if (this.keys['Space']) {
|
|
|
this.shoot();
|
|
|
}
|
|
|
super.update();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
class AI extends Ship {
|
|
|
constructor(x, y, difficulty) {
|
|
|
super(x, y, '#f0f', 'Rival');
|
|
|
this.difficulty = difficulty;
|
|
|
this.state = 'HUNTING_ASTEROID';
|
|
|
this.target = null;
|
|
|
this.stateTimer = 0;
|
|
|
this.setupDifficulty();
|
|
|
}
|
|
|
|
|
|
setupDifficulty() {
|
|
|
switch(this.difficulty) {
|
|
|
case 'easy':
|
|
|
this.accuracy = 0.3; this.aggression = 0.1; this.reactionTime = 30;
|
|
|
break;
|
|
|
case 'hard':
|
|
|
this.accuracy = 0.9; this.aggression = 0.6; this.reactionTime = 5;
|
|
|
break;
|
|
|
case 'medium':
|
|
|
default:
|
|
|
this.accuracy = 0.6; this.aggression = 0.3; this.reactionTime = 15;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
update() {
|
|
|
this.stateTimer--;
|
|
|
if (this.stateTimer <= 0) {
|
|
|
this.chooseNewState();
|
|
|
}
|
|
|
|
|
|
this.executeState();
|
|
|
|
|
|
super.update();
|
|
|
}
|
|
|
|
|
|
chooseNewState() {
|
|
|
this.stateTimer = Math.random() * 120 + 60;
|
|
|
const dangerousObject = this.findClosestThreat();
|
|
|
if (dangerousObject) {
|
|
|
this.state = 'AVOIDING_DANGER';
|
|
|
this.target = dangerousObject;
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (Math.random() < this.aggression || (game.player && game.player.score > this.score + 1000)) {
|
|
|
this.state = 'ATTACKING_PLAYER';
|
|
|
this.target = game.player;
|
|
|
} else {
|
|
|
this.state = 'HUNTING_ASTEROID';
|
|
|
this.target = this.findClosestAsteroid();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
executeState() {
|
|
|
if (!this.target) {
|
|
|
this.isThrusting = false;
|
|
|
this.rotation = 0;
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
let targetPos = this.target.pos;
|
|
|
|
|
|
|
|
|
if (this.target.vel) {
|
|
|
const timeToIntercept = this.pos.subtract(this.target.pos).magnitude / 7;
|
|
|
targetPos = this.target.pos.add(this.target.vel.multiply(timeToIntercept * (this.accuracy * 20)));
|
|
|
}
|
|
|
|
|
|
const vectorToTarget = targetPos.subtract(this.pos);
|
|
|
const desiredAngle = vectorToTarget.angle;
|
|
|
let angleDiff = desiredAngle - this.angle;
|
|
|
|
|
|
|
|
|
while (angleDiff < -Math.PI) angleDiff += 2 * Math.PI;
|
|
|
while (angleDiff > Math.PI) angleDiff -= 2 * Math.PI;
|
|
|
|
|
|
if (this.state === 'AVOIDING_DANGER') {
|
|
|
|
|
|
angleDiff += Math.PI;
|
|
|
}
|
|
|
|
|
|
|
|
|
this.rotation = Math.sign(angleDiff) * 0.05;
|
|
|
if(Math.abs(angleDiff) < 0.1) this.rotation = 0;
|
|
|
|
|
|
|
|
|
const shouldThrust = this.state === 'AVOIDING_DANGER' || vectorToTarget.magnitude > 100;
|
|
|
this.isThrusting = (Math.abs(angleDiff) < Math.PI / 2) && shouldThrust;
|
|
|
|
|
|
|
|
|
if (this.state !== 'AVOIDING_DANGER' && Math.abs(angleDiff) < 0.2 && Math.random() < this.accuracy) {
|
|
|
this.shoot();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
findClosestThreat() {
|
|
|
let closestDist = Infinity;
|
|
|
let closestThreat = null;
|
|
|
const checkRadius = 150;
|
|
|
|
|
|
for (const asteroid of game.asteroids) {
|
|
|
const dist = this.pos.subtract(asteroid.pos).magnitude;
|
|
|
if (dist < checkRadius && dist < closestDist) {
|
|
|
closestDist = dist;
|
|
|
closestThreat = asteroid;
|
|
|
}
|
|
|
}
|
|
|
return closestThreat;
|
|
|
}
|
|
|
|
|
|
findClosestAsteroid() {
|
|
|
let closestDist = Infinity;
|
|
|
let closestAsteroid = null;
|
|
|
for (const asteroid of game.asteroids) {
|
|
|
const dist = this.pos.subtract(asteroid.pos).magnitude;
|
|
|
if (dist < closestDist) {
|
|
|
closestDist = dist;
|
|
|
closestAsteroid = asteroid;
|
|
|
}
|
|
|
}
|
|
|
return closestAsteroid;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
class Asteroid {
|
|
|
constructor(x, y, radius) {
|
|
|
this.pos = new Vector(x, y);
|
|
|
this.radius = radius;
|
|
|
this.vel = Vector.fromAngle(Math.random() * Math.PI * 2, Math.random() * 2 + 0.5);
|
|
|
this.angle = 0;
|
|
|
this.rotationSpeed = (Math.random() - 0.5) * 0.02;
|
|
|
this.shape = [];
|
|
|
const numVertices = Math.floor(Math.random() * 5) + 7;
|
|
|
for (let i = 0; i < numVertices; i++) {
|
|
|
const angle = (i / numVertices) * Math.PI * 2;
|
|
|
const r = this.radius * (Math.random() * 0.4 + 0.8);
|
|
|
this.shape.push(new Vector(Math.cos(angle) * r, Math.sin(angle) * r));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
draw() {
|
|
|
ctx.save();
|
|
|
ctx.translate(this.pos.x, this.pos.y);
|
|
|
ctx.rotate(this.angle);
|
|
|
ctx.strokeStyle = '#fff';
|
|
|
ctx.shadowColor = '#fff';
|
|
|
ctx.shadowBlur = 5;
|
|
|
ctx.lineWidth = 1.5;
|
|
|
ctx.beginPath();
|
|
|
ctx.moveTo(this.shape[0].x, this.shape[0].y);
|
|
|
for (let i = 1; i < this.shape.length; i++) {
|
|
|
ctx.lineTo(this.shape[i].x, this.shape[i].y);
|
|
|
}
|
|
|
ctx.closePath();
|
|
|
ctx.stroke();
|
|
|
ctx.restore();
|
|
|
}
|
|
|
|
|
|
update() {
|
|
|
this.pos = this.pos.add(this.vel);
|
|
|
this.angle += this.rotationSpeed;
|
|
|
wrapEdges(this);
|
|
|
}
|
|
|
|
|
|
breakApart() {
|
|
|
game.createExplosion(this.pos, '#fff', Math.floor(this.radius / 2));
|
|
|
if (this.radius > 30) {
|
|
|
for (let i = 0; i < 2; i++) {
|
|
|
game.asteroids.push(new Asteroid(this.pos.x, this.pos.y, this.radius / 2));
|
|
|
}
|
|
|
} else if (this.radius > 15) {
|
|
|
for (let i = 0; i < 2; i++) {
|
|
|
game.asteroids.push(new Asteroid(this.pos.x, this.pos.y, this.radius / 2));
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
class Bullet {
|
|
|
constructor(x, y, vel, color, owner) {
|
|
|
this.pos = new Vector(x, y);
|
|
|
this.vel = vel;
|
|
|
this.radius = 3;
|
|
|
this.color = color;
|
|
|
this.lifespan = 80;
|
|
|
this.owner = owner;
|
|
|
}
|
|
|
draw() {
|
|
|
ctx.fillStyle = this.color;
|
|
|
ctx.shadowColor = this.color;
|
|
|
ctx.shadowBlur = 10;
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI * 2);
|
|
|
ctx.fill();
|
|
|
}
|
|
|
update() {
|
|
|
this.pos = this.pos.add(this.vel);
|
|
|
this.lifespan--;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
class Particle {
|
|
|
constructor(x, y, color) {
|
|
|
this.pos = new Vector(x, y);
|
|
|
this.vel = Vector.fromAngle(Math.random() * Math.PI * 2, Math.random() * 3);
|
|
|
this.radius = Math.random() * 2 + 1;
|
|
|
this.color = color;
|
|
|
this.lifespan = 50;
|
|
|
this.alpha = 1;
|
|
|
}
|
|
|
draw() {
|
|
|
ctx.save();
|
|
|
ctx.globalAlpha = this.alpha;
|
|
|
ctx.fillStyle = this.color;
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI * 2);
|
|
|
ctx.fill();
|
|
|
ctx.restore();
|
|
|
}
|
|
|
update() {
|
|
|
this.pos = this.pos.add(this.vel);
|
|
|
this.vel = this.vel.multiply(0.98);
|
|
|
this.lifespan--;
|
|
|
this.alpha = this.lifespan / 50;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
class Game {
|
|
|
constructor(difficulty) {
|
|
|
this.difficulty = difficulty;
|
|
|
this.player = new Player(canvas.width / 4, canvas.height / 2);
|
|
|
this.ai = new AI(canvas.width * 3 / 4, canvas.height / 2, this.difficulty);
|
|
|
this.asteroids = [];
|
|
|
this.bullets = [];
|
|
|
this.particles = [];
|
|
|
this.isGameOver = false;
|
|
|
this.roundTime = 180 * 1000;
|
|
|
this.startTime = Date.now();
|
|
|
this.winner = null;
|
|
|
this.initAsteroids(8);
|
|
|
}
|
|
|
|
|
|
initAsteroids(count) {
|
|
|
for (let i = 0; i < count; i++) {
|
|
|
const x = Math.random() * canvas.width;
|
|
|
const y = Math.random() * canvas.height;
|
|
|
|
|
|
const playerDist = new Vector(x, y).subtract(this.player.pos).magnitude;
|
|
|
const aiDist = new Vector(x, y).subtract(this.ai.pos).magnitude;
|
|
|
if(playerDist < 100 || aiDist < 100) {
|
|
|
i--;
|
|
|
continue;
|
|
|
}
|
|
|
this.asteroids.push(new Asteroid(x, y, 40));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
update() {
|
|
|
if (this.isGameOver) return;
|
|
|
|
|
|
|
|
|
this.player.update();
|
|
|
this.ai.update();
|
|
|
this.asteroids.forEach(a => a.update());
|
|
|
this.bullets.forEach(b => b.update());
|
|
|
this.particles.forEach(p => p.update());
|
|
|
|
|
|
|
|
|
this.bullets = this.bullets.filter(b => b.lifespan > 0);
|
|
|
this.particles = this.particles.filter(p => p.lifespan > 0);
|
|
|
|
|
|
|
|
|
this.handleCollisions();
|
|
|
|
|
|
|
|
|
if (this.asteroids.length < 5) {
|
|
|
this.initAsteroids(3);
|
|
|
}
|
|
|
|
|
|
|
|
|
const elapsedTime = Date.now() - this.startTime;
|
|
|
if (elapsedTime >= this.roundTime) {
|
|
|
this.endGameByTime();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
draw() {
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
ctx.shadowBlur = 0;
|
|
|
ctx.fillStyle = 'rgba(0,0,0,0.9)';
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
|
this.player.draw();
|
|
|
this.ai.draw();
|
|
|
this.asteroids.forEach(a => a.draw());
|
|
|
this.bullets.forEach(b => b.draw());
|
|
|
this.particles.forEach(p => p.draw());
|
|
|
|
|
|
this.updateHUD();
|
|
|
}
|
|
|
|
|
|
updateHUD() {
|
|
|
document.getElementById('player-hud').innerText = `Player: ${this.player.score} | Lives: ${this.player.lives}`;
|
|
|
document.getElementById('ai-hud').innerText = `Rival: ${this.ai.score} | Lives: ${this.ai.lives}`;
|
|
|
|
|
|
const remainingTime = Math.max(0, this.roundTime - (Date.now() - this.startTime));
|
|
|
const minutes = Math.floor(remainingTime / 60000);
|
|
|
const seconds = Math.floor((remainingTime % 60000) / 1000).toString().padStart(2, '0');
|
|
|
document.getElementById('timer-hud').innerText = `${minutes}:${seconds}`;
|
|
|
}
|
|
|
|
|
|
handleCollisions() {
|
|
|
|
|
|
for (let i = this.bullets.length - 1; i >= 0; i--) {
|
|
|
const bullet = this.bullets[i];
|
|
|
for (let j = this.asteroids.length - 1; j >= 0; j--) {
|
|
|
const asteroid = this.asteroids[j];
|
|
|
if (isColliding(bullet, asteroid)) {
|
|
|
this.bullets.splice(i, 1);
|
|
|
|
|
|
let points = 0;
|
|
|
if (asteroid.radius > 30) points = 20;
|
|
|
else if (asteroid.radius > 15) points = 50;
|
|
|
else points = 100;
|
|
|
|
|
|
if (bullet.owner === 'Player') this.player.score += points;
|
|
|
else if (bullet.owner === 'Rival') this.ai.score += points;
|
|
|
|
|
|
asteroid.breakApart();
|
|
|
this.asteroids.splice(j, 1);
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
[this.player, this.ai].forEach(ship => {
|
|
|
for (const asteroid of this.asteroids) {
|
|
|
if (isColliding(ship, asteroid)) {
|
|
|
ship.hit();
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
for (let i = this.bullets.length - 1; i >= 0; i--) {
|
|
|
const bullet = this.bullets[i];
|
|
|
|
|
|
if (bullet.owner !== 'Player' && isColliding(bullet, this.player)) {
|
|
|
this.player.hit();
|
|
|
this.ai.score += 500;
|
|
|
this.bullets.splice(i, 1);
|
|
|
continue;
|
|
|
}
|
|
|
|
|
|
if (bullet.owner !== 'Rival' && isColliding(bullet, this.ai)) {
|
|
|
this.ai.hit();
|
|
|
this.player.score += 500;
|
|
|
this.bullets.splice(i, 1);
|
|
|
continue;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
createExplosion(pos, color, count) {
|
|
|
for(let i=0; i < count; i++) {
|
|
|
this.particles.push(new Particle(pos.x, pos.y, color));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
handlePlayerDeath(ship) {
|
|
|
if (ship === this.player && this.ai.lives > 0) {
|
|
|
this.endGame(this.ai);
|
|
|
} else if (ship === this.ai && this.player.lives > 0) {
|
|
|
this.endGame(this.player);
|
|
|
} else {
|
|
|
|
|
|
this.endGameByTime();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
endGameByTime() {
|
|
|
if (this.player.score > this.ai.score) {
|
|
|
this.endGame(this.player);
|
|
|
} else if (this.ai.score > this.player.score) {
|
|
|
this.endGame(this.ai);
|
|
|
} else {
|
|
|
this.endGame(null);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
endGame(winner) {
|
|
|
if (this.isGameOver) return;
|
|
|
this.isGameOver = true;
|
|
|
this.winner = winner;
|
|
|
|
|
|
const winnerText = document.getElementById('winner-text');
|
|
|
if (winner) {
|
|
|
winnerText.innerText = `${winner.name} Wins!`;
|
|
|
winnerText.style.color = winner.color;
|
|
|
} else {
|
|
|
winnerText.innerText = 'Draw!';
|
|
|
winnerText.style.color = '#fff';
|
|
|
}
|
|
|
|
|
|
document.getElementById('final-scores').innerText = `Final Score: ${this.player.score} (Player) vs ${this.ai.score} (Rival)`;
|
|
|
gameOverScreen.classList.remove('hidden');
|
|
|
hud.classList.add('hidden');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
let animationFrameId;
|
|
|
function gameLoop() {
|
|
|
game.update();
|
|
|
game.draw();
|
|
|
animationFrameId = requestAnimationFrame(gameLoop);
|
|
|
}
|
|
|
|
|
|
function startGame(difficulty) {
|
|
|
menu.classList.add('hidden');
|
|
|
gameOverScreen.classList.add('hidden');
|
|
|
hud.classList.remove('hidden');
|
|
|
game = new Game(difficulty);
|
|
|
if (animationFrameId) cancelAnimationFrame(animationFrameId);
|
|
|
gameLoop();
|
|
|
}
|
|
|
|
|
|
|
|
|
document.getElementById('easy-btn').onclick = () => startGame('easy');
|
|
|
document.getElementById('medium-btn').onclick = () => startGame('medium');
|
|
|
document.getElementById('hard-btn').onclick = () => startGame('hard');
|
|
|
document.getElementById('play-again-btn').onclick = () => {
|
|
|
gameOverScreen.classList.add('hidden');
|
|
|
menu.classList.remove('hidden');
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
