artisan-technologies/retro-asteroids
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Now with cool theme

Browse Source
This commit is contained in:
Eric Ratliff
2025-06-26 00:29:57 -05:00
parent a569e6b7d2
commit 4a18e20661
2 changed files with 154 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
index.html
View File

@@ -1,7 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Asteroids Game</title> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retro Asteroids</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>
<script src="ship.js"></script> <script src="ship.js"></script>
<script src="asteroid.js"></script> <script src="asteroid.js"></script>
@@ -11,7 +13,145 @@
<script src="pizza.js"></script> <script src="pizza.js"></script>
<script src="hamburger.js"></script> <script src="hamburger.js"></script>
<script src="sketch.js"></script> <script src="sketch.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 10px;
background: linear-gradient(135deg, #4A2C1B 0%, #7B4F2E 50%, #A67B5B 100%);
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
overflow: hidden;
}
h1 {
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
text-shadow: 0 0 10px #FF8C00, 0 0 20px #FF8C00;
font-size: 2em;
text-align: center;
margin: 10px 0;
animation: neon-glow 1.5s ease-in-out infinite alternate;
}
.crt-container {
position: relative;
width: 860px;
max-width: 95vw;
padding: 20px;
background: #4A2C1B;
border: 8px solid #7B4F2E;
border-radius: 15px;
box-shadow: 0 0 15px rgba(255, 140, 0, 0.7), inset 0 0 8px rgba(0, 0, 0, 0.5);
}
canvas {
display: block;
margin: 0 auto;
border-radius: 8px;
background: #000000;
box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}
.crt-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
transparent 0%,
rgba(0, 0, 0, 0.1) 1px,
transparent 2px,
transparent 3px
);
pointer-events: none;
animation: flicker 0.05s infinite;
}
.instructions {
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
text-shadow: 0 0 5px #FF8C00;
font-size: 0.9em;
text-align: center;
margin: 10px auto;
max-width: 800px;
padding: 0 10px;
}
.instructions p {
margin: 5px 0;
}
@keyframes neon-glow {
from {
text-shadow: 0 0 10px #FF8C00, 0 0 20px #FF8C00;
}
to {
text-shadow: 0 0 15px #FF8C00, 0 0 30px #FF8C00;
}
}
@keyframes flicker {
0% { opacity: 1; }
50% { opacity: 0.95; }
100% { opacity: 1; }
}
@media (max-width: 860px) {
.crt-container {
padding: 15px;
border-width: 6px;
}
h1 {
font-size: 1.5em;
}
.instructions {
font-size: 0.8em;
}
}
@media (max-width: 600px) {
.crt-container {
padding: 10px;
border-width: 5px;
}
h1 {
font-size: 1.2em;
}
.instructions {
font-size: 0.7em;
}
}
</style>
</head> </head>
<body> <body>
<h1>Retro Asteroids</h1>
<!-- <div class="crt-container">
<canvas id="gameCanvas"></canvas>
</div> -->
<div class="instructions">
<p>W/Up: Thrust</p>
<p>A/Left: Rotate Left</p>
<p>D/Right: Rotate Right</p>
<p>Space: Shoot</p>
<p>K: Kid Mode</p>
<p>R: Restart</p>
<p>White: 10pts | Gold: 50pts</p>
<p>Pizza: 20pts | Burger: 10pts</p>
<p>Cyan: Shield | Green: Quad-Shot</p>
</div>
<script>
// Prevent arrow key scrolling
window.addEventListener('keydown', (e) => {
if ([37, 38, 39].includes(e.keyCode)) {
e.preventDefault();
}
});
</script>
</body> </body>
</html> </html>

20
sketch.js
View File

@@ -5,7 +5,7 @@ let hamburgers = [];
let bullets = []; let bullets = [];
let shieldOrb = null; let shieldOrb = null;
let greenOrb = null; let greenOrb = null;
let lives = 30; let lives = 3;
let score = 0; let score = 0;
let gameOver = false; let gameOver = false;
let lastShieldSpawn = 0; let lastShieldSpawn = 0;
@@ -13,7 +13,7 @@ let lastGreenSpawn = 0;
let pizzaImg, hamburgerImg; let pizzaImg, hamburgerImg;
let level = 1; let level = 1;
let initialObjects = 5; let initialObjects = 5;
let kidMode = true; let kidMode = false;
function preload() { function preload() {
pizzaImg = loadImage('pizza.png', () => console.log('Pizza image loaded'), () => console.error('Failed to load pizza.png')); pizzaImg = loadImage('pizza.png', () => console.log('Pizza image loaded'), () => console.error('Failed to load pizza.png'));
@@ -21,7 +21,7 @@ function preload() {
} }
function setup() { function setup() {
createCanvas(800, 600); createCanvas(800, 600, P2D, 'gameCanvas');
window.kidMode = kidMode; // Set global kidMode before spawning window.kidMode = kidMode; // Set global kidMode before spawning
ship = new Ship(); ship = new Ship();
spawnObjects(initialObjects); spawnObjects(initialObjects);
@@ -231,16 +231,20 @@ function keyPressed() {
if (keyCode === 32) { // Spacebar to shoot if (keyCode === 32) { // Spacebar to shoot
if (ship.quadShotActive) { if (ship.quadShotActive) {
// Fire in four directions: forward, backward, left, right // Fire in four directions: forward, backward, left, right
bullets.push(new Bullet(ship.pos, ship.heading)); gun_count = 4
bullets.push(new Bullet(ship.pos, ship.heading + PI)); circle_radians = 2.0 * Math.PI
bullets.push(new Bullet(ship.pos, ship.heading - PI / 2)); angle_between = circle_radians / gun_count
bullets.push(new Bullet(ship.pos, ship.heading + PI / 2));
for (let gun_index = 0; gun_index < gun_count; gun_index++) {
gun_angle = gun_index * angle_between
bullets.push(new Bullet(ship.pos, gun_angle));
}
} else { } else {
bullets.push(new Bullet(ship.pos, ship.heading)); bullets.push(new Bullet(ship.pos, ship.heading));
} }
} }
if (keyCode === 82 && gameOver) { // R to restart if (keyCode === 82 && gameOver) { // R to restart
lives = 30; lives = 3;
score = 0; score = 0;
level = 1; level = 1;
initialObjects = 5; initialObjects = 5;