Okay, zunächst der Code, der funktioniert.
<html>
<head>
<style>
body, html {
margin: 0;
padding: 0;
}
#canvas {
background-color: black;
}
</style>
<script>
function drawArc() {
ctx.beginPath();
ctx.fillStyle = "white";
ctx.arc(ax, ay, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
};
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawArc();
ax += avx;
ay -= avy;
avy -= 0.2;
if (ay + radius >= canvas.height) {
avy *= -0.8;
avx *= 0.9;
};
if (ax + radius >= canvas.width) {
avx = -avx;
};
if (ax - radius <= 0) {
avx = -avx;
};
}
function onload()
{
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ax = 50;
ay = 50;
avx = 5;
avy = 2;
radius = 50;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
setInterval(update, 10);
}
</script>
<style>
</style>
</head>
<body onload="onload()">
<canvas id="canvas"></canvas>
</body>
</html>
Zweitens, was das Problem ist/war. Ich denke, das größte Problem, das ich hatte, war, dass der von Ihnen angebotene Code Variablen und Aktionen im globalen Kontext hatte, die von den Seitenelementen abhängig waren, die noch nicht erstellt worden waren. Dies bedeutet, dass die Variablen für Canvas und cxt nicht erstellt werden konnten, da das Canvas-Tag noch nicht erstellt wurde. Ich legte all das in eine Funktion, die ich aufrufen konnte, wenn die Seite geladen war und alles funktionierte von dort aus. Wenn diese Funktion aufgerufen wird, ist die Zeichenfläche bereits vorhanden und Sie können sie verwenden, um den Kontext zu erstellen und alles andere zu tun.
Drittens basierend auf dem Titel der Frage möchten Sie wissen, warum es aufhörte zu springen. Ich glaube, Sie haben einen springenden Ball geschaffen, der von den Wänden und Böden abprallt, aber durch die Schwerkraft und eine nicht elastische Kollision mit dem Boden einen Energieverlust erleidet. Persönlich habe ich den Code nicht durchgearbeitet, aber er sieht gut aus. Warum würdest du es ändern? Wenn Sie möchten, dass es für immer weiter hüpft, müssen die Kollisionen mit den Wänden und Böden 100% elastisch sein - das bedeutet, dass Sie keine Energie verlieren und Ihr Ball so hoch springt wie zuvor. In Ihrer Interaktion mit dem FLOOR verwenden Sie den folgenden Code. Dies hat einen dämpfenden Effekt und lässt deinen Ball schließlich auf Null fallen.
avy *= -0.8;//could be -1
avx *= 0.9;//could be 1
Das schafft jedoch ein anderes Problem. Der Code, den Sie verwenden, muss gedämpft werden oder der Ball springt bei jedem Sprung höher. Dies ist, weil Sie auf dieser Linie beschleunigen und Energie gewinnen.
avy -= 0.2;
Einer Ihrer anderen Antworten vorgeschlagen, dass Sie die Dämpfung zu verringern, aber nicht vollständig entfernen, indem diese eine Zeile zu ändern.Sie müssten dies so einstellen, dass es das von Ihnen gewünschte Verhalten aufweist.
avy *= -0.8;//-0.8 is too little? -1 is too much
LETZTE BEARBEITEN, VERSPRECHEN. Ich hatte wirklich viel Spaß damit. Das Problem ist nicht so trivial, dass Sie einfach in die Pseudo-Physik einsteigen können und eine gute Simulation eines Ballsprungs erhalten. Selbst wenn du die richtigen Gleichungen eingibst, bekommst du immer noch einen kleinen unaufhörlichen Sprung, weil das im wirklichen Leben passiert. Wenn sich der Ball langsam genug bewegt und nahe genug am Boden ist, dominieren die anderen Kräfte (keine Schwerkraft, sondern starke, schwache und elektromagnetische Anziehung) und bewirken, dass der Ball aufhört sich zu bewegen. Also nahm ich noch einen Schlag und verbesserte die Physik sehr. Es ist nicht perfekt, aber irgendwann muss man fragen, ob die FIDELITÄT der Simulation wichtiger ist, als das Verhalten so zu glätten, dass es dem entspricht, was ich sehen möchte. Hoffe das hilft.
<html>
<head>
<style>
body, html {
margin: 0;
padding: 0;
}
#canvas {
background-color: black;
}
</style>
<script>
function drawArc() {
ctx.beginPath();
ctx.fillStyle = "white";
ctx.arc(xPos, yPos, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
};
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawArc();
var dx = xVel*timeStep;
var dy = yVel*timeStep;
if(yVel<radius && yVel>-radius && canvas.height-(yPos+radius) < .1)
{
yVel = 0;
yPos = canvas.height-radius;
dy=0;
//friction affects xVel
xVel *= fFloor;
}
else if (yPos + dy + radius >= canvas.height) {
//you will be below the floor; there is a bounce
//find the rest of the falling interval
var remainingY = canvas.height-(yPos+radius);
//find the rest of the time step
var remainingTime = remainingY/yVel;
//add acceleration for that time
yVel += gravity * remainingTime
//friction affects xVel
xVel *= fFloor;
//elasticity affects yVel
yVel *= eFloor;
//now you are bouncing up
//what is time up
remainingTime = timeStep - remainingTime;
//set final position
yPos = canvas.height + (yVel*remainingTime) - radius;
//add acceleration for that time
yVel += gravity * remainingTime;
}
else
{
//do not hit the floor, falling the whole time
yPos += dy;
yVel += gravity * timeStep;
}
if (xPos + dx + radius >= canvas.width)
{
//hit a wall; there is a bounce
//find the rest of the interval
var remainingX = canvas.width-(xPos+radius);
//find the rest of the time step
var remainingTime = remainingX/xVel;
//no horizontal acceleration
//friction affects yVel
yVel *= fWall;
//elasticity affects xVel
xVel *= eWall;
//now you are bouncing back
//what is time up
remainingTime = timeStep - remainingTime;
//set final position
xPos = canvas.width + (xVel*remainingTime) - radius;
//no horizontal acceleration
}
else if (xPos + dx - radius <= 0) {
//hit a wall; there is a bounce
//find the rest of the interval
var remainingX = (xPos - radius);
//find the rest of the time step
var remainingTime = remainingX/xVel;
//no horizontal acceleration
//friction affects yVel
yVel *= fWall;
//elasticity affects xVel
xVel *= eWall;
//now you are bouncing back
//what is time up
remainingTime = timeStep - remainingTime;
//set final position
xPos = xVel*remainingTime+radius;
//no horizontal acceleration
}
else {
//never hit a wall; flying the whole time
xPos += dx;
}
}
function onload()
{
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
radius = 15;
xPos = Math.random()*(canvas.width-(2*radius))+radius;
yPos = Math.random()*(canvas.height-(2*radius))+radius;
xVel = Math.random()*100-50;
yVel = Math.random()*100-50;
gravity = 9.8;
eWall = -1;
eFloor = -.8;
fFloor = .9;
fWall = .9;
interval = 10;
timeStep = .1;//apparent time step
setInterval(update, interval);
}
</script>
<style>
</style>
</head>
<body onload="onload()">
<canvas id="canvas"></canvas>
</body>
</html>
Möchten Sie, dass es für immer springt? –
Was haben Sie erwartet? Du hast codiert, dass bei jedem Bodentreffer die Geschwindigkeit des Balles reduziert wird (Reibung). Es ist also nur normal, dass der Ball nach einiger Zeit aufhört sich zu bewegen. – trincot
Wenn Sie keine Höhe verlieren wollen, müssen Sie die kinetische Energie bei jedem Sprung im Auge behalten. Diese Antwort http://stackoverflow.com/a/34187884/3877726 demonstriert, wie man einen einfachen springenden Ball macht, der im Laufe der Zeit keine Energie verliert. http://StackOverflow.com/a/34187884/3877726 – Blindman67