回答編集履歴

修正しました。

2019/01/23 09:51

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -30,13 +30,9 @@
     GAIN = 0.99,
-    PI2 = Math.PI * 2;
+    PI2 = Math.PI * 2,
-  const
-    square = (n) => n * n;
+    DEF_COLOR = 'rgba(255,0,0,.5)';
@@ -74,7 +70,7 @@
   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);
@@ -82,7 +78,7 @@
       this.r = r;
-      this.color = c;
+      this.color = color;
       this.direction = direction;
@@ -94,25 +90,29 @@
-    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;
     }
@@ -166,25 +166,21 @@
     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;
         }
@@ -192,7 +188,13 @@
+      this.mx = x;
+      this.my = y;
-      this.x = x; this.y = y;
+      this.x = event.clientX;
+      this.y = event.clientY;
     }
@@ -200,9 +202,15 @@
     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) {
@@ -230,11 +238,11 @@
   class Field {
-    constructor (target, objs = [ ]) {
+    constructor (target, ary = [ ]) {
       this.target = target;
-      this.ary = objs;
+      this.ary = ary;
       this.w = target.width;
@@ -254,7 +262,11 @@
     progress () {
+      let { w, h, ary } = this;
-      this.ary.forEach (b => {
+      ary.forEach (b => {
         let
@@ -264,9 +276,9 @@
-        x += d.x;
+        x += d.x *= GAIN;
-        y += d.y;
+        y += d.y *= GAIN;
@@ -278,9 +290,9 @@
         }
-        else if (this.w - r < x) {
+        else if (w - r < x) {
-          x = this.w - r;
+          x = w - r;
           d.x *= -1;
@@ -296,9 +308,9 @@
         }
-        else if (this.h - r < y) {
+        else if (h - r < y) {
-          y = this.h - r;
+          y = h - r;
           d.y *= -1;
@@ -306,13 +318,11 @@
-        //___
         //当り判定後が雑すぎる
         let tmp = new Ball ('tmp', x, y, r);
-        this.ary.forEach (tb => {
+        ary.forEach (tb => {
           if (tb != b) {
@@ -334,20 +344,10 @@
-        //__
         b.x = x;
         b.y = y;
-        d.x *= GAIN;
-        d.y *= GAIN;
       });
     }
@@ -388,11 +388,13 @@
     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;
@@ -402,7 +404,7 @@
         ctx.arc (x, y, r, 0, PI2, false);
-        ctx.fill ();
+        ctx.fill ();
@@ -420,8 +422,6 @@
     }
   }

update

2019/01/23 09:51

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -462,7 +462,7 @@
     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)')
   ],

update

2019/01/22 00:36

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -2,18 +2,20 @@
 <!DOCTYPE html>
-<html>
 <title></title>
 <meta charset="utf-8">
 <style>
 canvas { background: #fd0; }
 </style>
 <body>
     <canvas width="700" height="700"></canvas>
@@ -90,19 +92,27 @@
     }
+    setTouch (p) {
+      let {x, y, r} = this, rst;
+      if (rst = square (p.x - x) + square (p.y - y) < square (r)) {
+        this.touched = rst;
+        this.offset = new Point (x - p.x, y - p.y);
+      }
+    }
-    setTouch (p) {
-      let {x, y, r} = this, rst;
+    isCollision ({ x, y, r }) {
-      if (rst = square (p.x - x) + square (p.y - y) < square (r)) {
+      return  square (this.x - x) + square (this.y - y) <= square (this.r+r);
-        this.touched = rst;
-        this.offset = new Point (x - p.x, y - p.y);
-      }
     }
@@ -128,7 +138,7 @@
       this.my = 0;
       ['mousedown', 'mousemove', 'mouseup']
@@ -136,7 +146,7 @@
     }
     handleEvent (event) {
@@ -144,7 +154,7 @@
     }
     mousedown (event) {
@@ -152,7 +162,7 @@
     }
     mousemove (event) {
@@ -160,11 +170,11 @@
       this.my = this.y;
       let x = event.clientX, y = event.clientY;
       this.ary.forEach (b => {
@@ -180,7 +190,7 @@
       });
       this.x = x; this.y = y;
@@ -232,7 +242,7 @@
     }
     add (obj) {
@@ -240,7 +250,7 @@
     }
     progress () {
@@ -258,7 +268,7 @@
         y += d.y;
         if (x < r) {
@@ -276,7 +286,7 @@
         }
         if (y < r) {
@@ -294,15 +304,35 @@
         }
         //___
-        //丸同士の当り判定
+        //当り判定後が雑すぎる
+        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;
+            }
+          }
+        })
         //__
@@ -322,11 +352,11 @@
     }
   }
@@ -354,7 +384,7 @@
     }
     draw (balls) {
@@ -390,7 +420,7 @@
     }
   }

update

2019/01/22 00:34

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -18,7 +18,7 @@
     <canvas width="700" height="700"></canvas>
-</body>
 <script>

update

2019/01/21 22:16

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -468,6 +468,4 @@
468 468
469 469
470 470
471	-
472	-
473 471	```