教你用JavaScript实现键盘控制小方块移动

// 获取canvas元素并设置绘图上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
 
// 定义小方块类
class Box {
    constructor(x, y, w, h, color) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.color = color;
    }
 
    // 绘制方块
    draw() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.w, this.h);
    }
 
    // 根据按键移动方块
    move(keyCode) {
        switch (keyCode) {
            case 'LEFT':
                this.x -= 10;
                break;
            case 'RIGHT':
                this.x += 10;
                break;
            case 'UP':
                this.y -= 10;
                break;
            case 'DOWN':
                this.y += 10;
                break;
        }
    }
}
 
// 创建一个小方块实例
var box = new Box(50, 50, 20, 20, 'blue');
 
// 绘制初始方块
box.draw();
 
// 为window添加键盘按下事件监听
window.addEventListener('keydown', function(e) {
    // 根据按下的键盘键移动方块
    box.move(e.key.toUpperCase());
    // 清除canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 重新绘制移动后的方块
    box.draw();
});

这段代码定义了一个Box类，包含了绘制方法和移动方法。在keydown事件监听器中，我们根据按下的键来调用move方法，并重绘canvas以显示小方块的移动。这个例子教导了如何使用JavaScript来响应键盘事件，并对画布上的对象进行交互式操作。