如何用原生JS实现键盘输入切换Canvas精灵sx值？求代码示例

没问题，我帮你调整代码来实现键盘切换精灵的效果！核心就是监听键盘按键事件，根据输入修改sx（精灵图的X轴截取起点），然后重新绘制画布（记得先清空画布避免旧精灵残留）。

下面是修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sprite Switch Demo</title>
</head>
<body>
    <canvas id='Game' width='200' height='200' style='border: 2px solid #000000;'></canvas>
    <script>
        window.onload = function(){
            var Game = document.getElementById('Game');
            var context = Game.getContext('2d')
            var room = new Image();
            var lx = 0;
            var ly = 0;
            var li = 0;
            var lo = 0;
            var lwidth = 100;
            var lheight = 100;
            
            var sprite = new Image();
            var cx = 0;
            var cy = 125;
            var sy = 0;
            var sx = 0;
            var swidth = 35;
            var sheight = 34;
            // 假设精灵图总共有4个帧（根据你的精灵图实际数量调整）
            var maxFrames = 4;

            // 绘制函数：先清画布，再画背景，最后画精灵
            function drawScene() {
                // 清空整个画布
                context.clearRect(0, 0, Game.width, Game.height);
                // 绘制背景房间
                if (room.complete) {
                    context.drawImage(room,lx,ly,lwidth,lheight,li,lo,200,200);
                }
                // 绘制精灵
                if (sprite.complete) {
                    context.drawImage(sprite,sx,sy,swidth,sheight,cx,cy,50,50);
                }
            }

            room.onload = drawScene;
            room.src = 'https://i.ibb.co/D7fL7yN/Room.png';
            
            sprite.onload = drawScene;
            sprite.src = 'https://i.ibb.co/7VhjqPr/John-Sheet.png';

            // 监听键盘按下事件
            document.addEventListener('keydown', function(e) {
                // 左箭头或A键：切换到上一帧
                if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') {
                    sx -= swidth;
                    // 边界处理：不能小于0，回到最后一帧
                    if (sx < 0) {
                        sx = (maxFrames - 1) * swidth;
                    }
                    drawScene();
                }
                // 右箭头或D键：切换到下一帧
                else if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') {
                    sx += swidth;
                    // 边界处理：超过最大帧就回到第一帧
                    if (sx >= maxFrames * swidth) {
                        sx = 0;
                    }
                    drawScene();
                }
            });
        }
    </script>
</body>
</html>

关键修改说明： #

1. 新增drawScene函数：把绘制背景和精灵的逻辑封装起来，方便每次按键后重新调用，避免代码重复。
2. 清空画布：每次绘制前用context.clearRect(0, 0, Game.width, Game.height)清空整个画布，防止旧的精灵图像残留。
3. 键盘事件监听：给document添加keydown事件监听器，判断按下的是左/右箭头或A/D键，对应修改sx值。
4. 边界处理：限制sx在合理范围内，避免超出精灵图的截取范围，切换到边界时自动循环到另一头。

你可以根据自己精灵图的实际帧数量调整maxFrames的值，这样切换逻辑就会适配你的精灵图啦！

内容的提问来源于stack exchange，提问作者Froyleduckle Gaming