彈跳球從另一個球彈起
[英]Bouncing ball bouncing off from another bal
問題描述
我對編碼很陌生，到目前為止，我設法制作了一個程序，這只是我被要求做的一半。 任務是： 在畫布周圍放置一個彈跳球，然后在畫布中央添加第二個固定球。 讓彈跳球從這里彈開。
我的代碼是：
<html> <head> <title>Javascript Game</title> </head> <body> <canvas style="border:1px solid #000000;" id = "mycanvas" width = "500" height = "500"> Your browser does not support canvas </canvas> <script> window.addEventListener("load", myApp, false); function myApp() { var canvas; var context; var textToShow; function getCanvas() { var tmp; tmp = document.getElementById ("mycanvas"); if (tmp == null) { alert ("no canvas"); } return tmp; } function animateMe() { context.clearRect (0, 0, canvas.width, canvas.height); context.beginPath(); context.arc(x,y,radius,0,2*Math.PI); context.stroke(); x = x + xdir; //xdir = xdir +0.1; if (x + xdir == x2 -10){ xdir *= -1; }else if (x + xdir>495) { xdir *=-1; } if (x+xdir <0){ xdir *= -1; } y = y + ydir; if (y+ydir == y2- 10) { ydir += -1; } else if(y+ydir>=480){ ydir *= -1; } if (y + ydir <0){ ydir *= -1; } context.beginPath(); context.arc(x2,y2,radius,0,2*Math.PI); context.stroke(); requestAnimationFrame (animateMe); } canvas = getCanvas(); context = canvas.getContext ("2d"); init(); function init() { x= 20; y=20; x2=250; y2=250; xdir= 5; ydir = 5; radius=10; animateMe(); } } </script> </body> </html>
問題是球從屏幕的一半反彈，我不知道如何讓它通過那個點，但同時從另一個球反彈。
1 個解決方案
解決方案1
0 2017-11-01 13:44:32
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. </canvas>
球從地板上彈起
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.