增加对asdw但我支持!DOCTYPE htmlhtmlhead style canvas border 1px solid white; background black; display block; margin 0 auto; style style
您想在游戏中添加对ASDW键的支持，使玩家不仅可以使用箭头键，还可以使用ASDW键来控制角色移动。以下是修改后的代码：
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px solid white;
background: black;
display: block;
margin: 0 auto;
}
</style>
<style>
#score {
position: absolute;
top: 10px;
right: 10px;
font-size: 32px;
font-weight: bold;
}
</style>
<script>
let score = 0;
let is_over = false
</script>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<p id="score">score: 0</p>
<script>
const canvas = document.getElementById("gameCanvas");
const context = canvas.getContext("2d");
const mario = {
x: Math.random() * canvas.width, // 随机生成Mario的x位置
y: 0, // Mario的出生点设为屏幕顶端
width: 40,
height: 40,
speed: 5,
jumpPower: 17,
isJumping: false,
yVelocity: 0,
};
const floor = {
x: 0,
y: canvas.height - 20,
width: canvas.width,
height: 20,
};
const blockWidth = 80;
const blockHeight = 20;
const difficults = true;
const blocks = [];
for (let i = 0; i < 20; i++) {
let blockX, blockY;
let isOverlapping;
do {
isOverlapping = false;
blockX = Math.random() * (canvas.width - blockWidth);
blockY = Math.random() * (canvas.height - blockHeight);
// Check for overlap with existing blocks
for (const existingBlock of blocks) {
if (
blockX + blockWidth > existingBlock[0] &&
blockX < existingBlock[0] + blockWidth &&
blockY + blockHeight > existingBlock[1] &&
blockY < existingBlock[1] + blockHeight
) {
isOverlapping = true;
break;
}
}
} while (isOverlapping);
const yVelocity = Math.floor(Math.random() * 2 + 1);
blocks.push([blockX, blockY, yVelocity]);
}
const keys = {};
document.addEventListener("keydown", (event) => {
keys[event.key] = true;
});
document.addEventListener("keyup", (event) => {
keys[event.key] = false;
});
function update() {
// Movement
if ((keys["ArrowLeft"] || keys["a"]) && mario.x > 0) {
mario.x -= mario.speed;
}
if ((keys["ArrowRight"] || keys["d"]) && mario.x + mario.width < canvas.width) {
mario.x += mario.speed;
}
// Jumping
if ((keys["ArrowUp"] || keys["w"]) && !mario.isJumping) {
mario.isJumping = true;
mario.yVelocity = -mario.jumpPower;
}
// Gravity
if (mario.y < floor.y - mario.height || mario.isJumping) {
mario.yVelocity += 1;
mario.y += mario.yVelocity;
}
if (mario.y < 0) {
mario.y = 0;
}
// Check for collision with floor
if (mario.y + mario.height >= floor.y) {
// Game over
mario.isJumping = false;
mario.yVelocity = 0;
mario.y = canvas.height - mario.height; // Set Mario's position to be on the floor
// Reset blocks
blocks.length = 0;
is_over = true;
}
// Game Overollision with blocks
blocks.forEach((block) => {
block[1] += block[2];
if (block[1] >= canvas.height) {
block[1] = 0;
block[0] = Math.random() * (canvas.width - blockWidth)
}
if (
mario.y + mario.height >= block[1] && // Mario's bottom position is at or below block's top position
mario.y < block[1] + blockHeight && // Mario's top position is above block's bottom position
mario.x + mario.width > block[0] && // Mario's right side is to the right of block's left side
mario.x < block[0] + blockWidth // Mario's left side is to the left of block's right side
) {
mario.isJumping = false;
mario.yVelocity = 0; // Reset Mario's vertical velocity
// Check collision direction
const topCollision = mario.y + mario.height - block[1];
const bottomCollision = block[1] + blockHeight - mario.y;
const leftCollision = mario.x + mario.width - block[0];
const rightCollision = block[0] + blockWidth - mario.x;
// Handle collision direction
if (
topCollision <= bottomCollision &&
topCollision <= leftCollision &&
topCollision <= rightCollision
) {
mario.y = block[1] - mario.height; // Set Mario's position to be on top of the block
} else if (
bottomCollision <= topCollision &&
bottomCollision <= leftCollision &&
bottomCollision <= rightCollision
) {
mario.y = block[1] + blockHeight;
mario.yVelocity = (block[2] + 1) * difficults;
mario.isJumping = true; // Set Mario's position to be below the block
} else if (
leftCollision <= topCollision &&
leftCollision <= bottomCollision &&
leftCollision <= rightCollision
) {
mario.x = block[0] - mario.width; // Set Mario's position to the left of the block
} else if (
rightCollision <= topCollision &&
rightCollision <= bottomCollision &&
rightCollision <= leftCollision
) {
mario.x = block[0] + blockWidth; // Set Mario's position to the right of the block
}
}
});
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw floor
context.fillStyle = "green";
context.fillRect(floor.x, floor.y, floor.width, floor.height);
// Draw blocks
context.fillStyle = "gray";
blocks.forEach((block) => {
context.fillRect(block[0], block[1], blockWidth, blockHeight);
});
// Draw Mario
context.fillStyle = "brown";
context.fillRect(mario.x, mario.y, mario.width, mario.height);
requestAnimationFrame(draw);
}
function gameLoop() {
update();
draw();
score += 1 * (!is_over);
document.getElementById("score").innerHTML = "score: " + String(score) + "\n挑战一百层，不要掉下去哟！";
requestAnimationFrame(gameLoop);
}
gameLoop();
// Restart function
document.addEventListener("keydown", (event) => {
if (event.key === 'r') {
score = 0;
is_over = false;
mario.x = Math.random() * canvas.width;
mario.y = 0;
blocks.length = 0;
for (let i = 0; i < 20; i++) {
let blockX, blockY;
let isOverlapping;
do {
isOverlapping = false;
blockX = Math.random() * (canvas.width - blockWidth);
blockY = Math.random() * (canvas.height - blockHeight);
for (const existingBlock of blocks) {
if (
blockX + blockWidth > existingBlock[0] &&
blockX < existingBlock[0] + blockWidth &&
blockY + blockHeight > existingBlock[1] &&
blockY < existingBlock[1] + blockHeight
) {
isOverlapping = true;
break;
}
}
} while (isOverlapping);
const yVelocity = Math.floor(Math.random() * 2 + 1);
blocks.push([blockX, blockY, yVelocity]);
}
}
});
</script>
</body>
</html>
现在，玩家可以使用ASDW键来控制角色的移动
原文地址: https://www.cveoy.top/t/topic/iPJp 著作权归作者所有。请勿转载和采集!