163 lines
4.4 KiB
HTML
163 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<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: 20px;
|
|
}
|
|
.control-button {
|
|
margin: 0 15px;
|
|
cursor: pointer;
|
|
width: 50px; /* Increased button size */
|
|
text-align: center;
|
|
}
|
|
</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">!</div>
|
|
<div class="control-button" id="right-arrow">></div>
|
|
</div>
|
|
<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: 6,
|
|
isMovingLeft: false,
|
|
isMovingRight: false,
|
|
};
|
|
|
|
const bullets = [];
|
|
const bulletSpeed = 5;
|
|
|
|
const invaders = [];
|
|
const invaderWidth = 30;
|
|
const invaderHeight = 30;
|
|
const maxInvaders = 2;
|
|
|
|
let failedCount = 0;
|
|
|
|
const leftArrowButton = document.getElementById("left-arrow");
|
|
const rightArrowButton = document.getElementById("right-arrow");
|
|
const shootButton = document.getElementById("shoot-button");
|
|
|
|
leftArrowButton.addEventListener("mousedown", () => (player.isMovingLeft = true));
|
|
leftArrowButton.addEventListener("mouseup", () => (player.isMovingLeft = false));
|
|
rightArrowButton.addEventListener("mousedown", () => (player.isMovingRight = true));
|
|
rightArrowButton.addEventListener("mouseup", () => (player.isMovingRight = false));
|
|
shootButton.addEventListener("click", () => shoot());
|
|
|
|
function shoot() {
|
|
bullets.push({ x: player.x + player.width / 2, y: player.y });
|
|
}
|
|
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === " ") {
|
|
shoot();
|
|
}
|
|
});
|
|
|
|
function movePlayer() {
|
|
if (player.isMovingLeft && player.x > 0) {
|
|
player.x -= player.speed;
|
|
}
|
|
if (player.isMovingRight && player.x < canvas.width - player.width) {
|
|
player.x += player.speed;
|
|
}
|
|
}
|
|
|
|
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);
|
|
movePlayer();
|
|
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);
|
|
}
|
|
}
|
|
|
|
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");
|
|
document.location.reload();
|
|
}
|
|
invaders.splice(i, 1);
|
|
}
|
|
|
|
if (invader.y > canvas.height) {
|
|
invaders.splice(i, 1);
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(updateGameArea);
|
|
}
|
|
|
|
updateGameArea();
|
|
</script>
|
|
</body>
|
|
</html>
|