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