<!DOCTYPE html> <html> <head> <link rel="icon" href="Dangrain.ico" type="image/x-icon"> <title>Space Invaders</title> <style> canvas { border: 1px solid #000; display: block; margin: 0 auto; } .controls { display: flex; justify-content: center; margin-top: 10px; font-size: 200px; } .control-button { margin: 0 30px; cursor: pointer; } #score { text-align: center; font-size: 24px; margin-top: 20px; } </style> </head> <body> <canvas id="gameCanvas" width="600" height="400"></canvas> <div class="controls"> <div class="control-button" id="left-arrow"><</div> <div class="control-button" id="shoot-button" ontouchstart="shoot()">!</div> <div class="control-button" id="right-arrow">></div> </div> <div id="score">Score: <span id="score-value">0</span> | Highest Score: <span id="highest-score">0</span></div> <h1>The score Is sort of broken, but saving your high score is as simple as not shooting enemies and letting them hit you 3 times, It... fixes it, no idea why</h1> <li><a href="Redditlike.HTML">Home</a></li> <script> const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); const player = { x: canvas.width / 2, y: canvas.height - 30, width: 30, height: 30, speed: 8, movingLeft: false, movingRight: false, }; const bullets = []; const bulletSpeed = 5; const invaders = []; const invaderWidth = 30; const invaderHeight = 30; const maxInvaders = 4; let failedCount = 0; let score = 0; let highestScore = localStorage.getItem("highestScore") || 0; const leftArrowButton = document.getElementById("left-arrow"); const rightArrowButton = document.getElementById("right-arrow"); const shootButton = document.getElementById("shoot-button"); const scoreDisplay = document.getElementById("score-value"); const highestScoreDisplay = document.getElementById("highest-score"); leftArrowButton.addEventListener("mousedown", () => startMoveLeft()); leftArrowButton.addEventListener("mouseup", () => stopMoveLeft()); leftArrowButton.addEventListener("touchstart", () => startMoveLeft()); leftArrowButton.addEventListener("touchend", () => stopMoveLeft()); rightArrowButton.addEventListener("mousedown", () => startMoveRight()); rightArrowButton.addEventListener("mouseup", () => stopMoveRight()); rightArrowButton.addEventListener("touchstart", () => startMoveRight()); rightArrowButton.addEventListener("touchend", () => stopMoveRight()); document.addEventListener("keydown", (event) => { if (event.key === "ArrowLeft") { startMoveLeft(); } else if (event.key === "ArrowRight") { startMoveRight(); } else if (event.key === " ") { shoot(); } }); document.addEventListener("keyup", (event) => { if (event.key === "ArrowLeft") { stopMoveLeft(); } else if (event.key === "ArrowRight") { stopMoveRight(); } }); function startMoveLeft() { player.movingLeft = true; } function stopMoveLeft() { player.movingLeft = false; } function startMoveRight() { player.movingRight = true; } function stopMoveRight() { player.movingRight = false; } function shoot() { bullets.push({ x: player.x + player.width / 2, y: player.y }); } function drawPlayer() { ctx.fillStyle = "blue"; ctx.fillRect(player.x, player.y, player.width, player.height); } function drawBullet(bullet) { ctx.fillStyle = "red"; ctx.fillRect(bullet.x, bullet.y, 2, 10); } function drawInvaders() { ctx.fillStyle = "green"; for (const invader of invaders) { ctx.fillRect(invader.x, invader.y, invaderWidth, invaderHeight); } } function updateGameArea() { ctx.clearRect(0, 0, canvas.width, canvas.height); if (player.movingLeft && player.x > 0) { player.x -= player.speed; } if (player.movingRight && player.x < canvas.width - player.width) { player.x += player.speed; } drawPlayer(); for (let i = bullets.length - 1; i >= 0; i--) { const bullet = bullets[i]; bullet.y -= bulletSpeed; drawBullet(bullet); if (bullet.y < 0) { bullets.splice(i, 1); } } if (Math.random() < 0.02 && invaders.length < maxInvaders) { invaders.push({ x: Math.random() * (canvas.width - invaderWidth), y: 0 }); } for (let i = invaders.length - 1; i >= 0; i--) { const invader = invaders[i]; invader.y += 1; drawInvaders(); for (let j = bullets.length - 1; j >= 0; j--) { if ( bullets[j].x < invader.x + invaderWidth && bullets[j].x + 2 > invader.x && bullets[j].y < invader.y + invaderHeight && bullets[j].y + 10 > invader.y ) { bullets.splice(j, 1); invaders.splice(i, 1); score++; } } if ( player.x < invader.x + invaderWidth && player.x + player.width > invader.x && player.y < invader.y + invaderHeight && player.y + player.height > invader.y ) { failedCount++; if (failedCount >= 3) { alert("You failed, try again"); if (score > highestScore) { highestScore = score; localStorage.setItem("highestScore", highestScore); highestScoreDisplay.textContent = highestScore; } document.location.reload(); } invaders.splice(i, 1); } if (invader.y > canvas.height) { invaders.splice(i, 1); } } scoreDisplay.textContent = score; requestAnimationFrame(updateGameArea); } highestScoreDisplay.textContent = highestScore; updateGameArea(); </script> </body> </html>