commit 196aeae294deac331eb596cbcd540157739559b5
Author: root <root@hub.scroll.pub> Date: 2024-12-27 13:18:40 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..f21990f --- /dev/null +++ b/body.html @@ -0,0 +1,15 @@ +<header> + <h1>AIroids</h1> + <p>Dodge and destroy AI company logos in this modern twist on the classic Asteroids game!</p> +</header> +<main> + <canvas id="gameCanvas" width="800" height="600"></canvas> + <div id="gameControls"> + <button id="startButton">Start Game</button> + <button id="pauseButton">Pause</button> + <div id="scoreDisplay">Score: 0</div> + </div> +</main> +<footer> + <p>Use arrow keys to move and spacebar to shoot. Survive as long as you can!</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..7d0dec9 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://airoids.scroll.pub +metaTags +editButton /edit.html +title AIroids - Asteroids Game with AI Companies Logos +style.css +body.html +script.js \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..0aacd3b --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# airoids.scroll.pub +Website generated by DeepSeek from prompt: Asteroids game with AI companies logos. Use state-of-the-art UI and render features well \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..2afd9b7 --- /dev/null +++ b/script.js @@ -0,0 +1,177 @@ +const canvas = document.getElementById('gameCanvas'); +const ctx = canvas.getContext('2d'); +const startButton = document.getElementById('startButton'); +const pauseButton = document.getElementById('pauseButton'); +const scoreDisplay = document.getElementById('scoreDisplay'); + +let ship, asteroids, bullets, score, gameOver, paused; + +const SHIP_SIZE = 30; +const ASTEROID_SIZE = 50; +const BULLET_SPEED = 5; +const ASTEROID_SPEED = 2; + +class Ship { + constructor() { + this.x = canvas.width / 2; + this.y = canvas.height / 2; + this.angle = 0; + this.speed = 0; + this.rotation = 0; + } + + draw() { + ctx.save(); + ctx.translate(this.x, this.y); + ctx.rotate(this.angle); + ctx.beginPath(); + ctx.moveTo(SHIP_SIZE, 0); + ctx.lineTo(-SHIP_SIZE, -SHIP_SIZE / 2); + ctx.lineTo(-SHIP_SIZE, SHIP_SIZE / 2); + ctx.closePath(); + ctx.strokeStyle = 'white'; + ctx.stroke(); + ctx.restore(); + } + + update() { + this.angle += this.rotation; + this.x += Math.cos(this.angle) * this.speed; + this.y += Math.sin(this.angle) * this.speed; + + if (this.x < 0) this.x = canvas.width; + if (this.x > canvas.width) this.x = 0; + if (this.y < 0) this.y = canvas.height; + if (this.y > canvas.height) this.y = 0; + } +} + +class Asteroid { + constructor() { + this.x = Math.random() < 0.5 ? 0 : canvas.width; + this.y = Math.random() * canvas.height; + this.angle = Math.atan2(ship.y - this.y, ship.x - this.x); + this.speed = ASTEROID_SPEED; + this.size = ASTEROID_SIZE; + } + + draw() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); + ctx.strokeStyle = 'red'; + ctx.stroke(); + } + + update() { + this.x += Math.cos(this.angle) * this.speed; + this.y += Math.sin(this.angle) * this.speed; + } +} + +class Bullet { + constructor(x, y, angle) { + this.x = x; + this.y = y; + this.angle = angle; + this.speed = BULLET_SPEED; + } + + draw() { + ctx.beginPath(); + ctx.arc(this.x, this.y, 2, 0, Math.PI * 2); + ctx.fillStyle = 'white'; + ctx.fill(); + } + + update() { + this.x += Math.cos(this.angle) * this.speed; + this.y += Math.sin(this.angle) * this.speed; + } +} + +function init() { + ship = new Ship(); + asteroids = []; + bullets = []; + score = 0; + gameOver = false; + paused = false; + scoreDisplay.textContent = `Score: ${score}`; +} + +function update() { + if (paused || gameOver) return; + + ship.update(); + asteroids.forEach(asteroid => asteroid.update()); + bullets.forEach(bullet => bullet.update()); + + // Check for collisions + asteroids.forEach((asteroid, aIndex) => { + bullets.forEach((bullet, bIndex) => { + if (Math.hypot(bullet.x - asteroid.x, bullet.y - asteroid.y) < asteroid.size) { + asteroids.splice(aIndex, 1); + bullets.splice(bIndex, 1); + score++; + scoreDisplay.textContent = `Score: ${score}`; + } + }); + + if (Math.hypot(ship.x - asteroid.x, ship.y - asteroid.y) < asteroid.size + SHIP_SIZE) { + gameOver = true; + } + }); + + // Spawn new asteroids + if (Math.random() < 0.02) { + asteroids.push(new Asteroid()); + } +} + +function draw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ship.draw(); + asteroids.forEach(asteroid => asteroid.draw()); + bullets.forEach(bullet => bullet.draw()); + + if (gameOver) { + ctx.fillStyle = 'white'; + ctx.font = '30px Arial'; + ctx.fillText('Game Over!', canvas.width / 2 - 70, canvas.height / 2); + } +} + +function gameLoop() { + update(); + draw(); + if (!gameOver) requestAnimationFrame(gameLoop); +} + +function handleKeyDown(e) { + if (e.key === 'ArrowLeft') ship.rotation = -0.1; + if (e.key === 'ArrowRight') ship.rotation = 0.1; + if (e.key === 'ArrowUp') ship.speed = 2; + if (e.key === ' ') { + bullets.push(new Bullet(ship.x, ship.y, ship.angle)); + } +} + +function handleKeyUp(e) { + if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') ship.rotation = 0; + if (e.key === 'ArrowUp') ship.speed = 0; +} + +startButton.addEventListener('click', () => { + init(); + gameLoop(); +}); + +pauseButton.addEventListener('click', () => { + paused = !paused; + pauseButton.textContent = paused ? 'Resume' : 'Pause'; +}); + +window.addEventListener('keydown', handleKeyDown); +window.addEventListener('keyup', handleKeyUp); + +init(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..8c2c3fc --- /dev/null +++ b/style.css @@ -0,0 +1,95 @@ +:root { + --primary-color: #1a73e8; + --secondary-color: #34a853; + --background-color: #0f0f0f; + --text-color: #ffffff; + --font-family: 'Arial', sans-serif; +} + +body { + margin: 0; + padding: 0; + font-family: var(--font-family); + background-color: var(--background-color); + color: var(--text-color); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +header { + text-align: center; + margin-bottom: 2rem; +} + +h1 { + font-size: 3rem; + color: var(--primary-color); + margin: 0; +} + +p { + font-size: 1.2rem; + color: var(--text-color); +} + +main { + position: relative; +} + +canvas { + border: 2px solid var(--primary-color); + background-color: #000; + display: block; + margin: 0 auto; +} + +#gameControls { + margin-top: 1rem; + text-align: center; +} + +button { + background-color: var(--primary-color); + color: var(--text-color); + border: none; + padding: 0.5rem 1rem; + margin: 0.5rem; + cursor: pointer; + font-size: 1rem; + border-radius: 4px; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: var(--secondary-color); +} + +#scoreDisplay { + font-size: 1.5rem; + margin-top: 1rem; +} + +footer { + margin-top: 2rem; + text-align: center; + font-size: 0.9rem; + color: var(--text-color); +} + +@media (max-width: 768px) { + canvas { + width: 100%; + height: auto; + } + + h1 { + font-size: 2rem; + } + + p { + font-size: 1rem; + } +} \ No newline at end of file