以下是一个简单的 JavaScript 超级玛丽小游戏的代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超级玛丽小游戏</title>
<style>
canvas {
display: block;
margin: 0 auto;
background-color: #f0f8ff;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 玛丽角色
const mary = {
x: 50,
y: 500,
width: 30,
height: 30,
speed: 5,
jumpStrength: -10,
gravity: 0.5,
jumping: false,
image: new Image(),
};
mary.image.src = 'mary.png'; // 假设有玛丽的图片
// 地板
const floor = {
y: 570,
width: canvas.width,
height: 30,
image: new Image(),
};
floor.image.src = 'floor.png'; // 假设有地板的图片
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
let keysPressed = {};
function handleKeyDown(event) {
keysPressed[event.key] = true;
}
function handleKeyUp(event) {
delete keysPressed[event.key];
}
function update() {
if (keysPressed['ArrowLeft']) {
mary.x -= mary.speed;
}
if (keysPressed['ArrowRight']) {
mary.x += mary.speed;
}
if (keysPressed['ArrowUp'] && !mary.jumping) {
mary.velocityY = mary.jumpStrength;
mary.jumping = true;
}
mary.velocityY += mary.gravity;
mary.y += mary.velocityY;
if (mary.y + mary.height >= floor.y) {
mary.y = floor.y - mary.height;
mary.jumping = false;
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(mary.image, mary.x, mary.y);
ctx.drawImage(floor.image, 0, floor.y);
}
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>
基础概念:
优势:
类型:
应用场景:
可能遇到的问题及原因:
希望这个示例对你有所帮助!
没有搜到相关的文章