javascript 키보드에서 변수를 변경하는 방법

Question

저는 처음 게임을 자바 스크립트로 만들려고했습니다.이 게임은 두 선수가 직사각형을 움직여 다른 방향으로 공을 부딪히는 것과 같습니다. 플레이어가 "a"키를 치면 왼쪽으로 이동하고 d 키를 누르면 오른쪽으로 이동합니다.

지금 원하는 키를 클릭해도 아무런 변화가 없습니다.

이 내 현재 코드입니다 :

$(document).ready(function() { 
 
    // things needed 
 
    var canvas = document.getElementById("myCanvas"); 
 
    var ctx = canvas.getContext("2d"); 
 

 
    //positions of elements at start 
 
    var ballposx = 400; 
 
    var ballposy = 50; 
 
    var balldx = 1; 
 
    var balldy = 2; 
 
    var balld2x = 0; 
 
    var balld2y = 0; 
 
    var p1posx = 80; 
 
    var p1posy = 225; 
 
    var p1dx = 0; 
 
    var p1dy = 0; 
 
    var p2posx = 620; 
 
    var p2posy = 225; 
 
    var p2dx = 0; 
 
    var p2dy = 0; 
 

 

 
    function draw() { 
 

 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    //goal1 
 
    ctx.fillStyle = "#0F3F0F"; 
 
    var goal1 = ctx.fillRect(0, 150, 50, 150); 
 

 
    //goal2 
 
    ctx.fillStyle = "#204050"; 
 
    var goal2 = ctx.fillRect(750, 150, 50, 150); 
 
    ctx.beginPath(); 
 

 
    //ball 
 
    var ball = ctx.arc(ballposx, ballposy, 60, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 

 
    //p1 
 
    ctx.fillStyle = "#FF0000"; 
 
    var p1 = ctx.fillRect(p1posx, p1posy, 40, 75); 
 

 
    //p2 
 
    ctx.fillStyle = "#0000FF"; 
 
    var p1 = ctx.fillRect(p2posx, p2posy, 40, 75); 
 
    p1posx += p1dx; 
 
    p2posx += p2dx; 
 
    balldx += balld2x; 
 
    balldy += balld2y; 
 
    ballposx += balldx; 
 
    ballposy += balldy; 
 

 
    $(window).keypress(function(e) { 
 
     var code = e.which; 
 
     switch (code) { 
 
     case 65: 
 
      p1dx = 1; 
 
     case 68: 
 
      p1dx = -1; 
 
     case 37: 
 
      p2dx = -1; 
 
     case 39: 
 
      p2dx = 1; 
 
     default: 
 
      break; 
 
     } 
 
    }); 
 

 
    if (ballposy === 240) { 
 
     balldy = -1; 
 
    } else if (ballposy === 60) { 
 
     balldy = 1; 
 
    } else if (ballposx === 60) { 
 
     balldx = 1; 
 
    } else if (ballposx === 740) { 
 
     balldx = -1; 
 
    } else if (ballposx === p1posx && ballposy < p1posy) { 
 
     balldx = 1; 
 
    } else if (ballposx === p2posx && ballposy < p2posy) { 
 
     balldx = -1; 
 
    } 
 
    } 
 

 
    setInterval(draw, 10); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<center> 
 
    <canvas id="myCanvas" width="800px" height="300px" style="border:1px solid #000000;"> Sorry your browser doesnt support this!</canvas></center>

Answer 1

나는 전체 코드를 확인하지 못했지만, OU가 아니라 기본, 모든 경우에 break; 문을 추가해야합니다.

$(window).keypress(function(e){ 
    var code = e.which; 
    switch (code) 
    { 
    case 65: 
     p1dx = 1; 
     break; 
    case 68: 
     p1dx = -1; 
     break; 
    case 37: 
     p2dx = -1; 
     break; 
    case 39: 
     p2dx = 1; 
     break; 
    default: 
     break; 
    } 
}); 

Answer 2

당신은 다른 keypress 핸들러마다 10 밀리 추가하는 :

예를 들어, 코드는 무언가 같이해야합니다. 따라서 몇 초 후에 키를 누를 때마다 수천 개의 핸들러가 실행되며 이는 아마도 브라우저를 멈추게 할 것입니다. draw 함수 외부에서 처리기를 바인딩해야합니다.

그리고이 함수에서 각 case에 break 문이 필요합니다.

code 테스트도 잘못되었습니다. a은 이 아니라 97입니다. 그리고 p1dx의 값은 거꾸로됩니다. 왼쪽으로 가고 싶다면 -1이 아니라 1이되어야합니다.

$(document).ready(function() { 
 
    // things needed 
 
    var canvas = document.getElementById("myCanvas"); 
 
    var ctx = canvas.getContext("2d"); 
 

 
    //positions of elements at start 
 
    var ballposx = 400; 
 
    var ballposy = 50; 
 
    var balldx = 1; 
 
    var balldy = 2; 
 
    var balld2x = 0; 
 
    var balld2y = 0; 
 
    var p1posx = 80; 
 
    var p1posy = 225; 
 
    var p1dx = 0; 
 
    var p1dy = 0; 
 
    var p2posx = 620; 
 
    var p2posy = 225; 
 
    var p2dx = 0; 
 
    var p2dy = 0; 
 

 
    $(window).keypress(function(e) { 
 
    var code = e.which; 
 
    switch (code) { 
 
     case 97: 
 
     p1dx = -1; 
 
     break; 
 
     case 100: 
 
     p1dx = 1; 
 
     break; 
 
     case 37: 
 
     p2dx = -1; 
 
     break; 
 
     case 39: 
 
     p2dx = 1; 
 
     break; 
 
     default: 
 
     break; 
 
    } 
 
    }); 
 

 
    function draw() { 
 

 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    //goal1 
 
    ctx.fillStyle = "#0F3F0F"; 
 
    var goal1 = ctx.fillRect(0, 150, 50, 150); 
 

 
    //goal2 
 
    ctx.fillStyle = "#204050"; 
 
    var goal2 = ctx.fillRect(750, 150, 50, 150); 
 
    ctx.beginPath(); 
 

 
    //ball 
 
    var ball = ctx.arc(ballposx, ballposy, 60, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 

 
    //p1 
 
    ctx.fillStyle = "#FF0000"; 
 
    var p1 = ctx.fillRect(p1posx, p1posy, 40, 75); 
 

 
    //p2 
 
    ctx.fillStyle = "#0000FF"; 
 
    var p1 = ctx.fillRect(p2posx, p2posy, 40, 75); 
 
    p1posx += p1dx; 
 
    p2posx += p2dx; 
 
    balldx += balld2x; 
 
    balldy += balld2y; 
 
    ballposx += balldx; 
 
    ballposy += balldy; 
 

 

 
    if (ballposy === 240) { 
 
     balldy = -1; 
 
    } else if (ballposy === 60) { 
 
     balldy = 1; 
 
    } else if (ballposx === 60) { 
 
     balldx = 1; 
 
    } else if (ballposx === 740) { 
 
     balldx = -1; 
 
    } else if (ballposx === p1posx && ballposy < p1posy) { 
 
     balldx = 1; 
 
    } else if (ballposx === p2posx && ballposy < p2posy) { 
 
     balldx = -1; 
 
    } 
 
    } 
 

 
    setInterval(draw, 10); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<center> 
 
    <canvas id="myCanvas" width="800px" height="300px" style="border:1px solid #000000;"> Sorry your browser doesnt support this!</canvas></center>