dangrain/fantastic-garbanzo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update Redditlikespacesuit.HTML

Browse source
This commit is contained in:
Dangrainage 2023-11-09 10:33:46 +01:00 • committed by GitHub
parent 58e6be8b87
commit 7671a13fef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
Redditlikespacesuit.HTML
View file

@ -8,10 +8,27 @@
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">&lt;</div>
<div class="control-button" id="shoot-button">!</div>
<div class="control-button" id="right-arrow">&gt;</div>
</div>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
@ -21,7 +38,9 @@
y: canvas.height - 30,
width: 30,
height: 30,
speed: 8, // Increased player speed
speed: 6,
isMovingLeft: false,
isMovingRight: false,
};
const bullets = [];
@ -34,16 +53,35 @@
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 === "ArrowLeft" && player.x > 0) {
player.x -= player.speed;
} else if (event.key === "ArrowRight" && player.x < canvas.width - player.width) {
player.x += player.speed;
} else if (event.key === " ") {
bullets.push({ x: player.x + player.width / 2, y: player.y });
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);
@ -63,6 +101,7 @@
function updateGameArea() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
movePlayer();
drawPlayer();
for (let i = bullets.length - 1; i >= 0; i--) {
@ -70,24 +109,20 @@
bullet.y -= bulletSpeed;
drawBullet(bullet);
// Remove bullets when they go out of the canvas
if (bullet.y < 0) {
bullets.splice(i, 1);
}
}
// Spawn new invaders
if (Math.random() < 0.02 && invaders.length < maxInvaders) {
invaders.push({ x: Math.random() * (canvas.width - invaderWidth), y: 0 });
}
// Move and draw invaders
for (let i = invaders.length - 1; i >= 0; i--) {
const invader = invaders[i];
invader.y += 1;
drawInvaders();
// Check for bullet-invader collisions
for (let j = bullets.length - 1; j >= 0; j--) {
if (
bullets[j].x < invader.x + invaderWidth &&
@ -100,7 +135,6 @@
}
}
// Check for player-invader collisions
if (
player.x < invader.x + invaderWidth &&
player.x + player.width > invader.x &&
@ -115,7 +149,6 @@
invaders.splice(i, 1);
}
// Check if an invader is off the screen
if (invader.y > canvas.height) {
invaders.splice(i, 1);
}