Force move the marble randomly if it stays still over 1 second.

README.md

@@ -6,6 +6,8 @@ This is a lucky draw by dropping marbles.
 
 # ChangeLogs
 
+- 2023-11-24:
+  - Force move the marble randomly if it stays still over 1 second.
 - 2023-10-08:
   - Save names in the local storage automatically. 
 - 2023-09-23:

index.html

@@ -297,7 +297,7 @@
 
 		document.querySelector('#btnShuffle').click();
 
-		const currentNotice = 20231008;
+		const currentNotice = 20231124;
 		const closed = parseInt(localStorage.getItem('noticeClose') || '0', 10);
 
 		if (closed < currentNotice) {
@@ -313,6 +313,8 @@
 <div id="notice" class="hide">
 	<h3>Change logs</h3>
 	<dl>
+		<dt>2023-11-24</dt>
+			<dd>Force move the marble randomly if it stays still over 1 second.</dd>
 		<dt>2023-10-08</dt>
 			<dd>Save names automatically.</dd>
 		<dt>2023-09-23</dt>
@@ -325,7 +327,7 @@ <h3>Change logs</h3>
 			<dd>Adjusted the map to prevent a marble stays too long in a specific place.</dd>
 		<dt>2023-07-21</dt>
 			<dd>Show change logs when there is a new update.</dd>
-		<dd>Improve the performance when there are too many marbles in the game.</dd>
+			<dd>Improve the performance when there are too many marbles in the game.</dd>
 			<dd>Fixed the issue that the slow motion is not smooth.</dd>
 			<dd>Now end the game immediately if only one marble survives and the winning rank is the last.</dd>
 		<dt>2023-05-29</dt>
@@ -339,7 +341,7 @@ <h3>Change logs</h3>
 		You can set weight values for each member by putting a number after each name with a slash. (ex: Tom/2, Jane/5)<br />
 		You can set the count of each member by putting a number after each name with a star. (ex: Tom*2, Jane*5)
 	</p>
-	<textarea id="in_names" placeholder="Input names saparated by commas or line feed here">짱구*5, 짱아*10, 오리꿍*3</textarea>
+	<textarea id="in_names" placeholder="Input names separated by commas or line feed here">짱구*5, 짱아*10, 스신*3</textarea>
 	<div class="actions">
 		<label>
 			The winner is #<input type="number" id="in_winningRank" value="1" min="1" />

src/data/constants.ts

@@ -2,6 +2,7 @@ export const initialZoom = 30;
 export const canvasWidth = 1600;
 export const canvasHeight = 900;
 export const zoomThreshold = 5;
+export const STUCK_DELAY = 1000;
 
 export enum Skills {
     None,

src/marble.ts

@@ -1,7 +1,8 @@
 import * as planck from 'planck';
-import {Skills} from './data/constants';
+import {Skills, STUCK_DELAY} from './data/constants';
 import {rad} from './utils/utils';
 import options from './options';
+import {Vec2} from 'planck';
 
 export class Marble {
     type: 'marble' = 'marble';
@@ -16,6 +17,8 @@ export class Marble {
     private _skillRate = 0.0005;
     private _coolTime = 5000;
     private _maxCoolTime = 5000;
+    private _stuckTime = 0;
+    private lastPosition: Vec2 = Vec2(0, 0);
 
     get position() {
         return this.body.getPosition();
@@ -70,6 +73,17 @@ export class Marble {
     }
 
     update(deltaTime: number) {
+        if (this.body.isActive() && this.lastPosition.sub(this.position).length() < 0.001) {
+            this._stuckTime += deltaTime;
+
+            if (this._stuckTime > STUCK_DELAY) {
+                this.body.applyForceToCenter(Vec2(Math.random() * 10 - 5, Math.random() * 10 - 5), true);
+            }
+        } else {
+            this._stuckTime = 0;
+        }
+        this.lastPosition = this.position.clone();
+
         this.skill = Skills.None;
         if (this.impact) {
             this.impact = Math.max(0, this.impact - deltaTime);