我正在制作一个非常简单的太空入侵者游戏，它使用空间来射击。问题是，当您点击空间并发射射弹时，它也会向下滚动页面，因为我有一个大画布。有没有办法在仍然能够滚动的同时防止这种情况发生？请记住，我是这方面的初学者，所以如果我只是愚蠢的话，我深表歉意。
我尝试将以下代码放入我的 css 文件中。
body {
overflow: 'hidden"
}
这不起作用，因为它完全隐藏了屏幕外的所有内容。不仅仅是禁用空格键滚动
这是我的代码，问题仍然存在
这是CSS文件
body{
font-family:'Courier New', Courier, monospace;
text-align: center;
}
#board {
border-bottom: 1px solid black;
}
这是 Html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport", content="width=device-width, initial-scale=1.0">
<title>Space Invaders</title>
<link rel="stylesheet" href="spaceinvaders.css">
<script src="spaceinvaders.js"></script>
</head>
<body>
<h1>Space Invaders</h1>
<canvas id="board"></canvas>
<p>blahblahblahbalhablahjgbksvdbsugbsdgudgudsughusdhdguihsduihg</p>
</body>
</html>
这是 javascript 文件
//board
let board;
let boardWidth = 500;
let boardHeight = 600;
let context;
let gameOver = false
//ship
let shipWidth = 75;
let shipHeight = 95;
let shipX = 218;
let shipY = 500;
let shipImg;
//actual dimentions
//21px from left edge
//24px from right edge
//middle at 45 from left edge
//middle 51 from right edge
//bullet
let bulletArray = [];
let bulletWidth = 75;
let bulletHeight = 95;
let bulletX = 218
//ship varuble
let ship = {
x : shipX,
y : shipY,
width : shipWidth,
height : shipHeight
}
//physics for ship
let Xspeed = 0;
let moveLeft = false;
let moveRight = false;
//physics for bullet
let bulletSpeed = 2
window.onload = function() { //when game starts
board = document.getElementById("board");
board.height = boardHeight;
board.width = boardWidth;
context = board.getContext("2d"); //used for drawing on the board
//draw initial dinosaur
// context.fillStyle="green";
// context.fillRect(dino.x, dino.y, dino.width, dino.height);
shipImg = new Image();
shipImg.src = "./spaceinvadersImgs/ship.png";
shipImg.onload = function() {
console.log("imgLoaded")
context.drawImage(shipImg, ship.x, ship.y, ship.width, ship.height);
}
bulletImg = new Image();
bulletImg.src = "./spaceinvadersImgs/bullet.png";
window.addEventListener("keydown", function(e){
switch(e.key){
case "ArrowLeft":
moveLeft = true
break;
case "ArrowRight":
moveRight = true
break;
case " ":
console.log("shoot bullet")
if (e.key === " "){
//place bullet
let bullet = {
img : bulletImg,
x : ship.x,
y : 536,
width : bulletWidth,
height: bulletHeight
}
bulletArray.push(bullet); //add bullet at this moment to the array
if (bulletArray.length > 25) {
bulletArray.shift(); //remove the first element from the array so that the array doesn't constantly grow
}
}
}
}, false);
window.addEventListener("keyup", function(e){
switch(e.key){
case "ArrowLeft":
moveLeft = false
break;
case "ArrowRight":
moveRight = false
break;
}
}, false);
update()
}
function update(){
requestAnimationFrame(update);
console.log("update")
//preping for next frame
if (gameOver) {
return;
}
if(ship.x < 0 && Xspeed == -5 || ship.x > 500 && Xspeed == 5){
Xspeed = 0
}
ship.x += Xspeed;
if(moveLeft && !moveRight){
Xspeed = -5
}
if(moveRight && !moveLeft){
Xspeed = 5
}
if(!moveLeft && !moveRight){
Xspeed = 0
}
context.clearRect(0, 0, board.width, board.height);
for (let i = 0; i < bulletArray.length; i++) {
let bullet = bulletArray[i];
bullet.y -= bulletSpeed;
context.drawImage(bullet.img, bullet.x, bullet.y, bullet.width, bullet.height);
}
context.drawImage(shipImg, ship.x, ship.y, ship.width, ship.height);
};
使用
e.preventDefault() e.preventDefault();
console.log("shoot bullet");```