튀어 오르는 공이 다른 발에서 튀어 오름

-1

저는 코딩에 익숙하지 않고 지금까지 제가해야 할 일의 절반 정도되는 프로그램을 만들었습니다. 임무는 다음과 같습니다 : 캔버스 주위에 튀는 공을 가지고 두 번째 고정 공을 캔버스 중앙에 추가하십시오. 수신 거부 볼이 튀어 오르게하십시오.튀어 오르는 공이 다른 발에서 튀어 오름

내 코드는 다음과 같습니다

<html> 
 
\t <head> 
 
\t \t <title>Javascript Game</title> 
 
\t </head> 
 
\t <body> 
 
\t \t 
 
\t \t 
 
\t \t <canvas 
 
\t \t \t style="border:1px solid #000000;" 
 
\t \t \t id = "mycanvas" 
 
\t \t \t width = "500" 
 
\t \t \t height = "500"> 
 
\t \t \t 
 
\t \t \t Your browser does not support canvas 
 
\t \t </canvas> 
 

 
\t \t <script> 
 
\t \t 
 
\t \t window.addEventListener("load", myApp, false); 
 

 

 
\t \t function myApp() { 
 
\t \t \t var canvas; 
 
\t \t \t var context; 
 
\t \t \t var textToShow; 
 
\t \t 
 
\t \t \t function getCanvas() { 
 
\t \t \t \t var tmp; 
 
\t \t \t \t 
 
\t \t \t \t tmp = document.getElementById ("mycanvas"); 
 
\t \t \t \t 
 
\t \t \t \t if (tmp == null) { 
 
\t \t \t \t \t alert ("no canvas"); 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t return tmp; 
 
\t \t \t \t \t 
 
\t \t \t } 
 

 
\t \t \t function animateMe() { 
 
\t \t \t 
 
\t \t \t \t context.clearRect (0, 0, canvas.width, canvas.height); 
 
\t \t \t \t context.beginPath(); 
 
\t \t \t \t context.arc(x,y,radius,0,2*Math.PI); 
 
\t \t \t \t context.stroke(); 
 
\t 
 
\t \t \t \t x = x + xdir; 
 
\t \t \t \t //xdir = xdir +0.1; 
 
\t \t \t \t if (x + xdir == x2 -10){ 
 
\t \t \t \t xdir *= -1; 
 
\t \t \t \t }else if (x + xdir>495) { 
 
\t \t \t \t xdir *=-1; 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t if (x+xdir <0){ 
 
\t \t \t \t xdir *= -1; 
 
\t \t \t \t } 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t y = y + ydir; 
 
\t \t \t \t if (y+ydir == y2- 10) { 
 
\t \t \t \t ydir += -1; 
 
\t \t \t \t } 
 
\t \t \t \t else if(y+ydir>=480){ 
 
\t \t \t \t ydir *= -1; 
 
\t \t \t \t } 
 
\t \t \t 
 
\t \t \t \t if (y + ydir <0){ 
 
\t \t \t \t ydir *= -1; 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t context.beginPath(); 
 
\t \t \t \t context.arc(x2,y2,radius,0,2*Math.PI); 
 
\t \t \t \t context.stroke(); 
 

 
\t \t \t \t requestAnimationFrame (animateMe); 
 
\t \t \t } 
 

 
\t \t \t canvas = getCanvas(); \t 
 
\t \t \t context = canvas.getContext ("2d"); 
 
\t \t \t 
 
\t \t \t init(); 
 
\t \t \t 
 
\t \t \t function init() { 
 
\t \t \t \t x= 20; 
 
\t \t \t \t y=20; 
 
\t \t \t \t x2=250; 
 
\t \t \t \t y2=250; 
 
\t \t \t \t xdir= 5; 
 
\t \t \t \t ydir = 5; 
 
\t \t \t \t radius=10; 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t animateMe(); 
 
\t \t \t } \t \t \t 
 

 
\t \t } 
 
\t \t \t \t 
 
\t \t </script> 
 
\t \t 
 
\t </body> 
 
\t \t 
 
</html>

것은 공이 화면의 절반으로부터 튀는 것을 내가 아무 생각이 어떻게 그 지점을 통과하지 않습니다해야 동시에 다른 공에서 튀어 오릅니다.

출처

2017-11-01 Robin Kitlinski

당신은 이런 식으로 ... 일을하도록 코딩 한'(X + xdir ==의 2 배 -10) xdir *이 = -1 경우는'당신 자마자 방향을 변경 캔버스 너비가 '500'으로 설정되고 'x2'가 '250'의 절반으로 설정됩니다. –

myApp(); 
 

 

 
function myApp() { 
 
    // No need for an init call at the moment. 
 
    // init all stuff at start of this function 
 
    var textToShow; 
 
    const ctx = canvas.getContext("2d"); 
 
    const w = canvas.width; 
 
    const h = canvas.height; 
 
    const w2 = w/2; 
 
    const h2 = h/2; 
 
    const radius = 10; 
 
    var x = 20; 
 
    var y = 40; 
 
    var xdir = 5; 
 
    var ydir = 5; 
 

 

 
     
 
    // use this to start rather than direct call. 
 
    requestAnimationFrame(animateMe); 
 

 

 
    function animateMe() { 
 
    ctx.clearRect(0, 0, w, h); 
 
    
 
    // the best way to do the calulations is first move then draw 
 
    
 
    
 

 
    x += xdir; 
 
    y += ydir; 
 

 
    const right = w - radius; 
 
    const bottom = h - radius; 
 
    
 
    // Test if the ball has gone to far and correct position and dir 
 
    // As each frame is a descrete time step you need to acount for 
 
    // the balls motion during the frame. 
 
    
 
    // If the ball is past the edge then some time between the last 
 
    // this frame it hit the wall and started moving away from the wall 
 
    // The distance moved away from the wall is the same as the distance 
 
    // we found the ball to far into the wall 
 
    
 
    // If you do xdir *= -1; 
 
    // you dont know if the ball was pushed there by something 
 
    // (assuming you will have some form of interaction) and was 
 
    // unable to escape the wall the previouse frame. This can result in 
 
    // the ball sticking to the wall. 
 
    // Always set the vector to the correct sign. 
 
    
 
    
 
    if (x > right) { 
 
     x = right - (x - right); 
 
     xdir = -Math.abs(xdir); 
 
    } else if (x < radius) { 
 
     x = radius + (radius - x); 
 
     xdir = Math.abs(xdir); 
 
    } 
 
    if (y > bottom) { 
 
     y = bottom - (y - bottom); 
 
     ydir = -Math.abs(ydir); 
 
    } else if (y < radius) { 
 
     y = radius + (radius - y); 
 
     ydir = Math.abs(ydir); 
 
    } 
 

 
    ctx.beginPath(); 
 
    ctx.arc(x, y, radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(w2, w2, radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 

 
    requestAnimationFrame(animateMe); 
 
    } 
 

 
}

<canvas style="border:1px solid #000000;" id="canvas" width="250" height="250">It's 2017 anyone that sees this message does not need to be told that nothing works. 
 
\t \t </canvas>

출처

2017-11-01 13:44:32 Blindman67

튀어 오르는 공이 다른 발에서 튀어 오름

답변

관련 문제