213 lines
6.2 KiB
HTML
213 lines
6.2 KiB
HTML
<!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>
|