키보드로 플레이어 이미지 이동하기

Question

안녕하세요. 플랫폼 게임을하기 전에, 플레이어는 사각형이었습니다. 이제 이미지로 바꿨지 만 키는 움직이지 않습니다. WASD가 플레이어 이미지를 이동시키기 위해 어떻게 키를 만들 수 있습니까? 나는 전에 그것을했지만, 나는 그것을 어떻게했는지 잊어 버린다. 에서의 drawImage

(function() { 
 
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
 
    window.requestAnimationFrame = requestAnimationFrame; 
 
})(); 
 

 
var canvas = document.getElementById("canvas"), 
 
    ctx = canvas.getContext("2d"), 
 
    width = 1000, 
 
    height = 200, 
 
    player = { 
 
     x: width/2, 
 
     y: height - 15, 
 
     width: 48, 
 
     height: 64, 
 
     speed: 3, 
 
     velX: 0, 
 
     velY: 0, 
 
     jumping: false, 
 
     grounded: false, 
 
     count: 0, 
 
     img: new Image() 
 
    }, 
 
    keys = [], 
 
    friction = 0.8, 
 
    gravity = 0.3; 
 
    player.img.src = "img/playersheet.png"; 
 
    player.img.onload = draw; 
 

 
var boxes = []; 
 

 
// dimensions 
 
boxes.push({ 
 
    x: 0, 
 
    y: 0, 
 
    width: 10, 
 
    height: height 
 
}); 
 
boxes.push({ 
 
    x: 0, 
 
    y: height - 2, 
 
    width: width, 
 
    height: 50 
 
}); 
 
boxes.push({ 
 
    x: width - 10, 
 
    y: 0, 
 
    width: 50, 
 
    height: height 
 
}); 
 

 
boxes.push({ 
 
    x: 120, 
 
    y: 100, 
 
    width: 80, 
 
    height: 80 
 
}); 
 
boxes.push({ 
 
    x: 250, 
 
    y: 150, 
 
    width: 80, 
 
    height: 80 
 
}); 
 
boxes.push({ 
 
    x: 400, 
 
    y: 180, 
 
    width: 80, 
 
    height: 80 
 
}); 
 
boxes.push({ 
 
    x: 270, 
 
    y: 150, 
 
    width: 40, 
 
    height: 40 
 
}); 
 

 
canvas.width = width; 
 
canvas.height = height; 
 
var fps = 3; 
 
var msPerFrame = 1000/fps; 
 
var startTime; 
 

 
function draw() { 
 
    if (!startTime) startTime = Date.now(); 
 
    var elapsedTime = Date.now() - startTime; 
 
    var spriteIndex = Math.floor(elapsedTime/msPerFrame) % 3; 
 
    requestAnimationFrame(draw); 
 
    document.getElementById('index').innerHTML = spriteIndex; 
 
    sprX = (spriteIndex % 3) * 170; 
 
    sprY = Math.floor(spriteIndex/3) * 350; 
 
    ctx.drawImage(player.img, sprX, sprY, 170, 350, 150, 20, 48, 48); 
 
} 
 

 
function update() { 
 
    // check keys 
 
    if (keys[87] || keys[32]) { 
 
     // up arrow or space 
 
     if (!player.jumping && player.grounded) { 
 
      player.jumping = true; 
 
      player.grounded = false; 
 
      player.velY = -player.speed * 2; 
 
     } 
 
    } 
 
    if (keys[68]) { 
 
     // right arrow 
 
     if (player.velX < player.speed) { 
 
      player.velX++; 
 
      //player.img.src = "img/player_r.png"; 
 
     } 
 
    } 
 
    if (keys[65]) { 
 
     // left arrow 
 
     if (player.velX > -player.speed) { 
 
      player.velX--; 
 
      //player.img.src = "img/player.png"; 
 
     } 
 
    } 
 
    if (keys[83]) { 
 
     // down arrow 
 
      //player.img.src = "img/player_crouch.png"; 
 
    } 
 

 
    player.velX *= friction; 
 
    player.velY += gravity; 
 

 
    ctx.clearRect(0, 0, width, height); 
 
    ctx.fillStyle = "black"; 
 
    ctx.beginPath(); 
 
    
 
    player.grounded = false; 
 
    for (var i = 0; i < boxes.length; i++) { 
 
     ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height); 
 
     
 
     var dir = colCheck(player, boxes[i]); 
 

 
     if (dir === "l" || dir === "r") { 
 
      player.velX = 0; 
 
      player.jumping = false; 
 

 
     } else if (dir === "b") { 
 
      player.grounded = true; 
 
      player.jumping = false; 
 
     } else if (dir === "t") { 
 
      player.velY *= -1; 
 
     } 
 

 
    } 
 
    
 
    if(player.grounded){ 
 
     player.velY = 0; 
 
    } 
 
    
 
    player.x += player.velX; 
 
    player.y += player.velY; 
 

 
    ctx.fill(); 
 
    draw(); 
 
    
 

 
    requestAnimationFrame(update); 
 
} 
 

 

 

 
function colCheck(shapeA, shapeB) { 
 
    // get the vectors to check against 
 
    var vX = (shapeA.x + (shapeA.width/2)) - (shapeB.x + (shapeB.width/2)), 
 
     vY = (shapeA.y + (shapeA.height/2)) - (shapeB.y + (shapeB.height/2)), 
 
     // add the half widths and half heights of the objects 
 
     hWidths = (shapeA.width/2) + (shapeB.width/2), 
 
     hHeights = (shapeA.height/2) + (shapeB.height/2), 
 
     colDir = null; 
 

 
    // if the x and y vector are less than the half width or half height, they we must be inside the object, causing a collision 
 
    if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) { 
 
     // figures out on which side we are colliding (top, bottom, left, or right) 
 
     var oX = hWidths - Math.abs(vX), 
 
      oY = hHeights - Math.abs(vY); 
 
     if (oX >= oY) { 
 
      if (vY > 0) { 
 
       colDir = "t"; 
 
       shapeA.y += oY; 
 
      } else { 
 
       colDir = "b"; 
 
       shapeA.y -= oY; 
 
      } 
 
     } else { 
 
      if (vX > 0) { 
 
       colDir = "l"; 
 
       shapeA.x += oX; 
 
      } else { 
 
       colDir = "r"; 
 
       shapeA.x -= oX; 
 
      } 
 
     } 
 
    } 
 
    return colDir; 
 
} 
 

 
document.body.addEventListener("keydown", function (e) { 
 
    keys[e.keyCode] = true; 
 
}); 
 

 
document.body.addEventListener("keyup", function (e) { 
 
    keys[e.keyCode] = false; 
 
}); 
 

 

 
window.addEventListener("load", function() { 
 
    update(); 
 
});

<head> 
 
    <title>Platformer Game</title> 
 
</head> 
 
<body> 
 
    <h3>Arrow keys to move, and space to jump</h3> 
 
    <div> 
 
    Sprite #<span id="index"></span> 
 
</div> 
 
    <canvas id="canvas"></canvas> 
 
    <style> 
 
    canvas { 
 
    border:1px solid #d3d3d3; 
 
    background-color: #f1f1f1; 
 
\t } 
 
\t </style> 
 
</body>

Answer 1

여섯 번째와 일곱 번째 파라미터 상수이다. 변경 :

ctx.drawImage(player.img, sprX, sprY, 170, 350, player.x, player.y, 48, 48);