Problem mit Spritebewegung – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Problem mit Spritebewegung Tue, 22 Jan 19 19:22:13 Z https://forum.selfhtml.org/self/2019/jan/22/problem-mit-spritebewegung/1741333#m1741333 https://forum.selfhtml.org/self/2019/jan/22/problem-mit-spritebewegung/1741333#m1741333 <p>Hallo,</p> <p>ich möchte für ein Spiel eine Figur Münzen einsammeln lassen. Die Figur lässt sich mit den Pfeiltasten steuern, und genau bei der Steuerung liegt das Problem. Ich kriege es einfach nicht hin, die Figur so zu bewegen, dass die dynamisch erstellte Position der Münzen noch gespeichert wird. Leider gibt mir auch die Console keine Fehlermeldung. Hier ist der Code:</p> <p>HTML:</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Sammle die Münzen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>screen<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>SpielMitMünzen.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Jquery/jquery-3.3.1.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>playground<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sprite<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Player.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>JS:</p> <pre><code class="block language-javascript"> <span class="token keyword">let</span> coins <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">let</span> sprite <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".sprite"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> spritePosX <span class="token operator">=</span> sprite<span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"left"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> spritePosY <span class="token operator">=</span> sprite<span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"top"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> playground <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".playground"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">while</span> <span class="token punctuation">(</span>i <span class="token operator"><=</span> <span class="token number">20</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> img <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"<img class=\"coinimg\" src=\"Coin.png\">"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> coins<span class="token punctuation">.</span>push<span class="token punctuation">[</span>img<span class="token punctuation">]</span><span class="token punctuation">;</span> img<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">"id"</span><span class="token punctuation">,</span> <span class="token string">"coin"</span> <span class="token operator">+</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> min <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">let</span> max <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">;</span> <span class="token keyword">let</span> positionCoinX <span class="token operator">=</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>max <span class="token operator">-</span> min<span class="token punctuation">)</span> <span class="token operator">+</span> min<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span> <span class="token keyword">let</span> MinY <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">let</span> MaxY <span class="token operator">=</span> <span class="token number">200</span><span class="token punctuation">;</span> <span class="token keyword">let</span> positionCoinY <span class="token operator">=</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>MaxY <span class="token operator">-</span> MinY<span class="token punctuation">)</span> <span class="token operator">+</span> MinY<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span> img<span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">left</span><span class="token operator">:</span> positionCoinX<span class="token punctuation">,</span> <span class="token literal-property property">top</span><span class="token operator">:</span> positionCoinY <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> playground<span class="token punctuation">.</span><span class="token function">prepend</span><span class="token punctuation">(</span>img<span class="token punctuation">)</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">coordinates</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">[</span>positionCoinX<span class="token punctuation">,</span> positionCoinY<span class="token punctuation">,</span> spritePosX<span class="token punctuation">,</span> spritePosY<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> coords <span class="token operator">=</span> <span class="token function">coordinates</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>coords<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">keydown</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>key<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">"ArrowUp"</span><span class="token operator">:</span> coords<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span> <span class="token operator">-=</span> <span class="token number">10</span><span class="token punctuation">;</span> sprite<span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">top</span><span class="token operator">:</span> coords<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>coords<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">&&</span> coords<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">===</span> coords<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">&&</span> coords<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"berührt"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">"ArrowLeft"</span><span class="token operator">:</span> coords<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">-=</span> <span class="token number">10</span><span class="token punctuation">;</span> sprite<span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">left</span><span class="token operator">:</span> coords<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>coords<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">&&</span> coords<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">===</span> coords<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">&&</span> coords<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"berührt"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">"ArrowRight"</span><span class="token operator">:</span> coords<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>coords<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> coords<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span> coords<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span> sprite<span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">left</span><span class="token operator">:</span> coords<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>coords<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">&&</span> coords<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">===</span> coords<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">&&</span> coords<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"berührt"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">"ArrowDown"</span><span class="token operator">:</span> coords<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>coords<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>coords<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> coords<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span> <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span> sprite<span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">top</span><span class="token operator">:</span> coords<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>coords<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">&&</span> coords<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">===</span> coords<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">&&</span> coords<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"berührt"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Hat jemand eine Idee, wie die Steuerung funktionieren köntte?</p> Problem mit Spritebewegung Tue, 22 Jan 19 20:22:38 Z https://forum.selfhtml.org/self/2019/jan/22/problem-mit-spritebewegung/1741334#m1741334 https://forum.selfhtml.org/self/2019/jan/22/problem-mit-spritebewegung/1741334#m1741334 <p>Hallo af2111,</p> <p>da ist einiges im Argen.</p> <ul> <li>wenn du 20 Münzen hast, musst Du auch die Positionen aller Münzen überprüfen. Deine coordinates() Funktion liefert aber nur die Position der zuletzt generierten Münze. Du hast dein coins Array. Das musst Du nach jeder Positionsveränderung des Sprite durchlaufen und prüfen, ob das Sprite eine Münze berührt.</li> <li>Dein coords Array bringt deswegen nicht viel. Du kannst statt coords[3] und coords[4] genauso gut spritePosX und spritePosY updaten und das zum Vergleich verwenden.</li> <li>Die Frage, ob das Sprite die Münze berührt, beantwortet sich nicht durch den Vergleich der Koordinaten einer Ecke. Vor allem deshalb nicht, weil dein Sprite in Zehnpixel-Schritten springt, deine Münzen aber pixelgenau verteilt werden. Das Sprite hat eine Fläche, eine Münze hat eine Fläche. Je nach Form von Münze und Sprite ist ein echter Berührtest relativ aufwändig. Die komplett richtige Lösung für beliebige Formen besteht in einem Pixel-für-Pixel Vergleich, ob sich an einer Koordinate die Pixel von Münze und Sprite überschneiden. In den meisten Fällen kann man vereinfachen.</li> </ul> <p>Eine Münze dürfte ein Kreis sein, hat also einen Mittelpunkt und einen Radius $$r_M$$. Wenn dein Sprite ein Quadrat ist, kannst Du ihm einen Kreis einbeschreiben, der ebenfalls Mittelpunkt und Radius $$r_S$$ hat. Für einen Kollisionstest berechnest Du den Abstand der Mittelpunkte (siehe Pythagoras). Ist der kleiner als $$r_M+r_S$$, liegt eine Kollision vor bzw. das Sprite hat die Münze berührt. Wenn Sprite und Münze gleich groß sind, kannst Du Dir die Mittelpunktberechnung sogar schenken und einfach die Abstände von (spriteX,spriteY) und (coinX,coinY) - für alle Coins - berechnen.</p> <p>Ist dein Sprite kein Quadrat, oder ist seine Form einem Kreis sehr unähnlich, musst Du entweder Ungenauigkeiten bei der Kollisionsberechnung hinnehmen oder Dir einen Algorithmus überlegen, wie Du eine Überlappung von Sprite und Münze berechnen kannst.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Problem mit Spritebewegung Tue, 22 Jan 19 21:20:44 Z https://forum.selfhtml.org/self/2019/jan/22/problem-mit-spritebewegung/1741340#m1741340 https://forum.selfhtml.org/self/2019/jan/22/problem-mit-spritebewegung/1741340#m1741340 <p>Hi,</p> <blockquote> <p>Eine Münze dürfte ein Kreis sein, hat also einen Mittelpunkt und einen Radius $$r_M$$. Wenn dein Sprite ein Quadrat ist, kannst Du ihm einen Kreis einbeschreiben, der ebenfalls Mittelpunkt und Radius $$r_S$$ hat. Für einen Kollisionstest berechnest Du den Abstand der Mittelpunkte (siehe Pythagoras). Ist der kleiner als $$r_M+r_S$$, liegt eine Kollision vor bzw. das Sprite hat die Münze berührt.</p> </blockquote> <p>Die Ecke des Quadrats ist vom Mittelpunkt aber weiter entfernt als der Radius des einbeschriebenen Kreises. Die Ecke kollidiert mit dem Kreis deutlich früher - wenn der Kreismittelpunkt auf der Verlängerung der Diagonale des Quadrats liegt etwa 1,4 mal früher ( sqrt(2) ).</p> <p>cu,<br> Andreas a/k/a MudGuard</p> Problem mit Spritebewegung Wed, 23 Jan 19 08:36:31 Z https://forum.selfhtml.org/self/2019/jan/22/problem-mit-spritebewegung/1741366#m1741366 https://forum.selfhtml.org/self/2019/jan/22/problem-mit-spritebewegung/1741366#m1741366 <p>Hallo Andreas,</p> <p>die Reduktion des Sprites auf einen Kreis ist natürlich eine vereinfachende Approximation, die die Programmierung erleichtert und die Laufzeit reduziert.</p> <p>Die Prüfung, ob ein Kreis ein Quadrat berührt, muss anders programmiert werden. Aus der Hüfte geschossen würde ich sagen, das geht so:</p> <p>Sei $$(x_K,y_K)$$ der Mittelpunkt eines Kreises mit Radius r.<br> Sei Q ein Quadrat mit diagonal gegenüberliegenden Eckpunkten $$(x_1,y_1), (x_2, y_2)$$ und durch passende Sortierung sei $$x_1<=x_2$$ und $$y1<=y2$$. Dann muss man folgende Fälle unterscheiden:</p> <p>$$x_K+r \lt x_1 \vee x_K-r \gt x_2$$ ⇒ Keine Kollision (Kreis weit genug links/rechts)<br> $$y_K+r \lt y_1 \vee y_K-r \gt y_2$$ ⇒ Keine Kollision (Kreis weit genug drüber/drunter) $$x_K \le x_1 \land y_K \le y_1 \land ||(x_K,y_K),(x_1,y_1)|| > r$$ ⇒ Keine Kollision (Abstand zur linken obere Ecke)<br> $$x_K \ge x_2 \land y_K \le y_1 \land ||(x_K,y_K),(x_2,y_1)|| > r$$ ⇒ Keine Kollision (Abstand zur rechten obere Ecke)<br> $$x_K \le x_1 \land y_K \ge y_2 \land ||(x_K,y_K),(x_1,y_2)|| > r$$ ⇒ Keine Kollision (Abstand zur linken unteren Ecke)<br> $$x_K \ge x_2 \land y_K \ge y_2 \land ||(x_K,y_K),(x_2,y_2)|| > r$$ ⇒ Keine Kollision (Abstand zur rechten unteren Ecke)<br> SONST: Kollision.</p> <p>Natürlich würde man für den Abstand nicht $$\sqrt{(x_K-x_1)^2+(y_K-y_1)^2} > r$$ testen, sondern $$(x_K-x_1)^2+(y_K-y_1)^2 > r^2$$, das geht schneller und man muss r² nur einmal berechnen.</p> <p>Also: Viel mühsamer und langsamer als die Kollision zweier Kreise. Ob meine Approximation trägt, hängt von der Form des Sprites ab. Ob man einen Test Kreis vs Quadrat machen muss, ebenfalls. Effiziente Kollisionserkennung ohne Hardwareunterstützung ist eine Wissenschaft für sich.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Problem mit Spritebewegung Wed, 23 Jan 19 10:04:08 Z https://forum.selfhtml.org/self/2019/jan/22/problem-mit-spritebewegung/1741373#m1741373 https://forum.selfhtml.org/self/2019/jan/22/problem-mit-spritebewegung/1741373#m1741373 <p>@@Rolf B</p> <blockquote> <p>Natürlich würde man für den Abstand nicht $$\sqrt{(x_K-x_1)^2+(y_K-y_1)^2} > r$$ testen, sondern $$(x_K-x_1)^2+(y_K-y_1)^2 > r^2$$, das geht schneller und man muss r² nur einmal berechnen.</p> </blockquote> <p>TIL (naja, vor ein paar Tagen): <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/hypot" rel="nofollow noopener noreferrer"><code>Math.hypot()</code></a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Problem mit Spritebewegung Wed, 23 Jan 19 13:24:18 Z https://forum.selfhtml.org/self/2019/jan/22/problem-mit-spritebewegung/1741389#m1741389 https://forum.selfhtml.org/self/2019/jan/22/problem-mit-spritebewegung/1741389#m1741389 <p>Hallo Gunnar,</p> <p>ich habe mal handgemachten Pythagoras (mit und ohne Wurzelziehen) und Math.hypot gegeneinander gestellt.</p> <p>Math.hypot enthält einen Überlaufschutz. Der macht es extrem lahm.</p> <p><a href="https://jsfiddle.net/ymp8vdcj/1/" rel="noopener noreferrer">https://jsfiddle.net/ymp8vdcj/1/</a> - Ergebnisse in der Console.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div>