回答編集履歴

修正しました。

2019/01/23 09:51

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -14,11 +14,9 @@
 {
   const
     GAIN = 0.99,
-    PI2 = Math.PI * 2;
+    PI2 = Math.PI * 2,
+    DEF_COLOR = 'rgba(255,0,0,.5)';
-  const
-    square = (n) => n * n;
   //__
   class Point {
     constructor (x = 0, y = 0) {
@@ -36,26 +34,28 @@
   //__
   class Ball extends Point  {
-    constructor (name, x, y, r = 100, c = 'rgba(255,0,0,.5)', direction = new Vector) {
+    constructor (name, x, y, r = 100, color = DEF_COLOR, direction = new Vector) {
       super (x, y);
       this.name = name;
       this.r = r;
-      this.color = c;
+      this.color = color;
       this.direction = direction;
       this.touched = false;
       this.offset = null;
     }
-    setTouch (p) {
+    setTouch ({x: px, y: py}) {
-      let {x, y, r} = this, rst;
+      let {x, y, r} = this;
-      if (rst = square (p.x - x) + square (p.y - y) < square (r)) {
+      if ((px - x)**2 + (py - y)**2 < r**2) {
-        this.touched = rst;
+        this.touched = true;
-        this.offset = new Point (x - p.x, y - p.y);
+        this.offset = new Point (x - px, y - py);
+        this.direction = new Vector;
       }
     }
-    isCollision ({ x, y, r }) {
+    isCollision ({x: px, y: py, r: pr}) {
+      let {x, y, r} = this;
-      return  square (this.x - x) + square (this.y - y) <= square (this.r+r);
+      return (x - px)**2 + (y - py)**2 <= (r + pr)**2;
     }
   }
@@ -82,25 +82,29 @@
     }
     mousemove (event) {
-      this.mx = this.x;
-      this.my = this.y;
+      let {x, y, ary} = this;
-      let x = event.clientX, y = event.clientY;
-      this.ary.forEach (b => {
+      ary.forEach (b => {
         if (b.touched) {
+          let o = b.offset;
-          b.x = this.x + b.offset.x;
+          b.x = x + o.x;
-          b.y = this.y + b.offset.y;
+          b.y = y + o.y;
-          b.direction = new Point;
+          b.direction = new Vector;
         }
       });
+      this.mx = x;
+      this.my = y;
-      this.x = x; this.y = y;
+      this.x = event.clientX;
+      this.y = event.clientY;
     }
     mouseup (event) {
+      let
+        {mx, my, ary} = this,
-      let v = new Vector (event.clientX - this.mx, event.clientY - this.my);
+        v = new Vector (event.clientX - mx, event.clientY - my);
-      this.ary.forEach (b => {
+      ary.forEach (b => {
         if (b.touched) {
           b.touched = false;
           b.direction = v;
@@ -114,9 +118,9 @@
   //__
   class Field {
-    constructor (target, objs = [ ]) {
+    constructor (target, ary = [ ]) {
       this.target = target;
-      this.ary = objs;
+      this.ary = ary;
       this.w = target.width;
       this.h = target.height;
     }
@@ -126,20 +130,22 @@
     }
     progress () {
+      let { w, h, ary } = this;
-      this.ary.forEach (b => {
+      ary.forEach (b => {
         let
           {x, y, r} = b,
           d = b.direction;
-        x += d.x;
+        x += d.x *= GAIN;
-        y += d.y;
+        y += d.y *= GAIN;
         if (x < r) {
           x = r;
           d.x *= -1;
         }
-        else if (this.w - r < x) {
+        else if (w - r < x) {
-          x = this.w - r;
+          x = w - r;
           d.x *= -1;
         }
@@ -147,15 +153,14 @@
           y = r;
           d.y *= -1;
         }
-        else if (this.h - r < y) {
+        else if (h - r < y) {
-          y = this.h - r;
+          y = h - r;
           d.y *= -1;
         }
-        //___
         //当り判定後が雑すぎる
         let tmp = new Ball ('tmp', x, y, r);
-        this.ary.forEach (tb => {
+        ary.forEach (tb => {
           if (tb != b) {
             if (tmp.isCollision (tb)) {
               d.x *= -1;
@@ -166,13 +171,8 @@
           }
         })
-        //__
         b.x = x;
         b.y = y;
-        d.x *= GAIN;
-        d.y *= GAIN;
       });
     }
@@ -193,14 +193,15 @@
     }
     draw (balls) {
+      let ctx = this.ctx;
       balls.forEach (b => {
-        let {name, x, y, r, color } = b;
+        let {name, x, y, r, color} = b;
-        let ctx = this.ctx;
         ctx.fillStyle = color;
         ctx.beginPath ();
         ctx.arc (x, y, r, 0, PI2, false);
-        ctx.fill ();
+        ctx.fill ();
         ctx.font = "18px 'ＭＳ Ｐゴシック'";
         ctx.fillStyle = 'rgba(0,0,0,.5)';
@@ -209,7 +210,6 @@
         ctx.fillText (name, x, y);
       });
     }
   }

update

2019/01/23 09:51

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -230,7 +230,7 @@
   balls = [
     new Ball ('Hello', 200, 300),
     new Ball ('こんにちは', 500, 300, 80),
-    new Ball ('当り判定無視', 700, 500, 70, 'rgba(0,255,255,.5)')
+    new Ball ('当り判定が雑', 700, 500, 70, 'rgba(0,255,255,.5)')
   ],
   field = new Field (target, balls),
   ctrl = new Mouse (target, balls);

update

2019/01/22 00:36

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -1,11 +1,12 @@
 ```javascript
 <!DOCTYPE html>
-<html>
 <title></title>
 <meta charset="utf-8">
 <style>
 canvas { background: #fd0; }
 </style>
 <body>
     <canvas width="700" height="700"></canvas>
@@ -44,7 +45,7 @@
       this.touched = false;
       this.offset = null;
     }
     setTouch (p) {
       let {x, y, r} = this, rst;
       if (rst = square (p.x - x) + square (p.y - y) < square (r)) {
@@ -52,6 +53,10 @@
         this.offset = new Point (x - p.x, y - p.y);
       }
     }
+    isCollision ({ x, y, r }) {
+      return  square (this.x - x) + square (this.y - y) <= square (this.r+r);
+    }
   }
@@ -63,25 +68,25 @@
       this.ary = ary;
       this.mx = 0;
       this.my = 0;
       ['mousedown', 'mousemove', 'mouseup']
         .forEach (etype => target.addEventListener (etype, this, false));
     }
     handleEvent (event) {
       this[event.type](event);
     }
     mousedown (event) {
       this.ary.forEach (b => b.setTouch (this));
     }
     mousemove (event) {
       this.mx = this.x;
       this.my = this.y;
       let x = event.clientX, y = event.clientY;
       this.ary.forEach (b => {
         if (b.touched) {
           b.x = this.x + b.offset.x;
@@ -89,7 +94,7 @@
           b.direction = new Point;
         }
       });
       this.x = x; this.y = y;
     }
@@ -115,11 +120,11 @@
       this.w = target.width;
       this.h = target.height;
     }
     add (obj) {
       this.ary.push (obj);
     }
     progress () {
       this.ary.forEach (b => {
         let
@@ -128,7 +133,7 @@
         x += d.x;
         y += d.y;
         if (x < r) {
           x = r;
           d.x *= -1;
@@ -137,7 +142,7 @@
           x = this.w - r;
           d.x *= -1;
         }
         if (y < r) {
           y = r;
           d.y *= -1;
@@ -146,11 +151,21 @@
           y = this.h - r;
           d.y *= -1;
         }
         //___
-        //丸同士の当り判定
+        //当り判定後が雑すぎる
+        let tmp = new Ball ('tmp', x, y, r);
+        this.ary.forEach (tb => {
+          if (tb != b) {
+            if (tmp.isCollision (tb)) {
+              d.x *= -1;
+              d.y *= -1;
+              x = b.x;
+              y = b.y;
+            }
+          }
+        })
         //__
         b.x = x;
@@ -160,10 +175,10 @@
         d.y *= GAIN;
       });
     }
   }
   //__
   class Canvas {
     constructor (canvas) {
@@ -176,7 +191,7 @@
     cls () {
       this.ctx.clearRect (0, 0, this.w, this.h);
     }
     draw (balls) {
       balls.forEach (b => {
         let {name, x, y, r, color } = b;
@@ -194,7 +209,7 @@
         ctx.fillText (name, x, y);
       });
     }
   }

update

2019/01/22 00:34

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -8,7 +8,7 @@
 </style>
 <body>
     <canvas width="700" height="700"></canvas>
-</body>
 <script>
 {
   const

update

2019/01/21 22:16

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -233,5 +233,4 @@
 </html>
 ```