在现代Web开发中，Canvas成为了一个越来越受欢迎的技术，特别是在游戏开发领域。Canvas是HTML5中的一个元素，可以用于绘制图形、动画、游戏等富媒体内容。本文将介绍如何使用Canvas创建一个简单的游戏。
准备工作
首先，我们需要一个包含Canvas元素的HTML文件。可以通过以下代码创建一个Canvas元素：
<!DOCTYPE html>
<html>
<head>
<title>Canvas游戏</title>
<style>
#gameCanvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script src="game.js"></script>
</body>
</html>
在上面的代码中，我们创建了一个Canvas元素，并设置了一个id为gameCanvas。同时，我们也准备了一个名称为game.js的JavaScript文件，用于编写游戏逻辑。
绘制基本图形
接下来，打开game.js文件，我们可以开始编写游戏的逻辑了。首先，我们可以使用Canvas的getContext()方法来获取2D上下文，以便后续绘制图形和动画。
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
接下来，我们可以使用ctx上的一些方法来进行绘制。比如，使用fillRect()方法绘制一个矩形：
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
上述代码会在Canvas中绘制一个红色的矩形，左上角坐标为(50, 50)，宽度和高度均为100。
添加动画效果
下一步，我们可以通过更新Canvas上的图形来创建动画效果。可以使用requestAnimationFrame()方法来实现一个持续的动画循环。
function gameLoop() {
// 将此处的代码替换为自己的逻辑
requestAnimationFrame(gameLoop);
}
gameLoop();
在上述代码中，我们定义了一个名为gameLoop的函数，用于更新Canvas上的图形。然后，我们通过调用requestAnimationFrame()方法，告诉浏览器我们希望在下一次绘制帧之前执行gameLoop函数。这样就能创建一个动画循环。
键盘交互
在游戏中，用户可以通过键盘与游戏进行交互。为了实现这一点，我们可以使用keydown和keyup事件来检测键盘按下和释放的动作。
let leftPressed = false;
let rightPressed = false;
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
function handleKeyDown(event) {
if (event.key === 'ArrowLeft') {
leftPressed = true;
} else if (event.key === 'ArrowRight') {
rightPressed = true;
}
}
function handleKeyUp(event) {
if (event.key === 'ArrowLeft') {
leftPressed = false;
} else if (event.key === 'ArrowRight') {
rightPressed = false;
}
}
上述代码中，我们创建了两个变量leftPressed和rightPressed，用于记录左右箭头键是否被按下。然后，我们通过addEventListener()方法来监听键盘事件，并在触发事件时更新变量的状态。
创建游戏角色
在游戏中，通常会有一个或多个角色，例如玩家的角色或敌人的角色。我们可以使用JavaScript对象的方式来表示一个角色，并定义其属性和方法。
const player = {
x: 50,
y: 50,
width: 50,
height: 50,
speed: 5,
color: 'blue',
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
},
update() {
if (leftPressed) {
this.x -= this.speed;
}
if (rightPressed) {
this.x += this.speed;
}
},
};
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
player.draw();
player.update();
requestAnimationFrame(gameLoop);
}
上述代码中，我们定义了一个player对象，包含了角色的位置、大小、颜色等属性，以及绘制和更新角色的方法。在gameLoop函数中，我们在每一帧都先清除Canvas上的内容(clearRect())，然后绘制角色并更新其位置(player.draw()和player.update())。
现在你已经学会了使用Canvas创建游戏的基本方式，你可以尝试添加更多的功能和图形，使你的游戏更加丰富多样。祝你好运！
本文来自极简博客，作者：黑暗之影姬，转载请注明原文链接：学习使用Canvas创建游戏
