質問編集履歴

1

追記とcssとhtmlを追加しました。 あとdとかcとかzxcxなどの分かりにくかったのも書き直しました。

2022/06/22 03:20

投稿

haruatu
haruatu

score88

test CHANGED
File without changes
test CHANGED
@@ -4,22 +4,55 @@
4
4
  実現したいこと;タイトル通りです。
5
5
 
6
6
  2.該当のソースコード
7
+ game.blade.php
8
+ ```ここに言語を入力
9
+ <!DOCTYPE html>
10
+ <html lang="ja">
11
+ <head>
12
+ <meta charset="UTF-8">
13
+ <meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
14
+ <meta name="csrf-token" content="{{ csrf_token() }}">
15
+ <link rel="stylesheet" href="{{ asset('css/game.css') }}">
16
+ <title>study</title>
17
+ </head>
7
18
 
19
+
20
+ <body>
21
+
22
+ <canvas id="ball" height="600" width="1500"></canvas>
23
+
24
+ <div class="block" id='blockid'></div>
25
+
26
+
27
+ <p id='a'></p>
28
+
29
+ <script src="{{ asset('/js/jquery-3.6.0.min.js')}}"></script>
30
+ <script src="{{ asset('/js/game.js') }}"></script>
31
+
32
+ </body>
33
+
34
+ </html>
35
+ ```
36
+
37
+ game.css
38
+ ```ここに言語を入力
39
+ .block {
40
+ background-color: red;
41
+ height: 50px;
42
+ width: 200px;
43
+ margin-left: auto;
44
+ margin-right: auto;
45
+ }
46
+ ```
47
+
48
+ game.js
8
49
  ```ここに言語を入力
9
50
  var a = document.querySelector('html');
10
-
11
-
12
51
  \\クリックする前と後で、idを変えてクリック後にマウスカーソルでボールが動かないようにする
13
52
  $('html').mousedown(function() {
53
+ var ball = document.getElementById('ball');
14
54
 
15
-
16
-
17
- var ball = document.getElementById('d');
18
-
19
- ball.id = ('qwe');
55
+ ball.id = ('bounseball');
20
-
21
-
22
-
23
56
  });
24
57
 
25
58
  \\ここでマウスカーソルに合わせて棒とボールの座標を動かすようにする
@@ -33,18 +66,18 @@
33
66
  left:x
34
67
  });
35
68
 
36
- \\「var zxc = document.getElementById('zxc');」~「var zxcx = e.clientX;」は後の棒の衝突反応のために書いています
69
+ \\「var block = document.getElementById('blockid');」~「var blockclientX = e.clientX;」は後の棒の衝突反応のために書いています
37
- var zxc = document.getElementById('zxc');
70
+ var blockid = document.getElementById('blockid');
38
71
 
39
- var clientRect = zxc.getBoundingClientRect() ;
72
+ var clientRect = block.getBoundingClientRect() ;
40
73
 
41
- var c = clientRect.left ;
74
+ var blockleft = clientRect.left ;
42
75
 
43
- var b = clientRect.right ;
76
+ var blockright = clientRect.right ;
44
77
 
45
- var zxcx = e.clientX;
78
+ var blockclientX = e.clientX;
46
79
 
47
- var canvas = document.getElementById('d');
80
+ var canvas = document.getElementById('ball');
48
81
 
49
82
  var ctx = canvas.getContext('2d');
50
83
 
@@ -60,34 +93,29 @@
60
93
 
61
94
  \\ここがクリックした後の動き
62
95
  a.onmouseup = function (s) {
63
-
64
-
65
96
  if (s) event = s;
66
-
97
+
67
- var canvas2 = document.getElementById('qwe');
98
+ var canvas2 = document.getElementById('bounseball');
68
99
 
69
100
  var ctx = canvas2.getContext('2d');
70
101
 
71
102
  var x = s.clientX;
72
- var y = 472;
103
+ var y = 472;
73
104
 
74
105
  var dx = 2;
75
106
  var dy = -2;
76
107
 
77
108
 
78
109
  function draw() {
79
-
80
110
  var ballsize = 20;
81
111
 
82
112
  \\この二つのif文が棒の衝突反応
83
- if ( y+dy > 472 && zxcx<b && zxcx>c || y+dy < ballsize ) {
113
+ if ( y+dy > 472 && blockclientX <blockright && blockclientX >blockleft || y+dy < ballsize ) {
84
114
  dy = -dy;
85
-
86
115
  }
87
116
 
88
117
  if (x+dx < ballsize || x+dx > canvas2.width-ballsize) {
89
118
  dx = -dx;
90
-
91
119
  }
92
120
 
93
121
  ctx.clearRect(0,0,canvas2.width,canvas2.height);
@@ -99,24 +127,16 @@
99
127
  ctx.fillStyle = "#0095dd";
100
128
 
101
129
  ctx.fill();
102
-
103
-
104
-
130
+
105
131
  ctx.closePath();
106
-
107
-
108
132
 
109
-
110
133
  x = x+dx;
111
134
  y = y+dy;
112
-
113
-
114
135
  }
115
136
 
116
137
  setInterval(draw,10);
117
138
 
118
139
  };
119
-
120
140
 
121
141
  };
122
142
  ```
@@ -127,10 +147,12 @@
127
147
 
128
148
  具体的に書くと、
129
149
  ```ここに言語を入力
130
- if ( y+dy > 472 && zxcx<b && zxcx>c || y+dy < ballsize ) {
150
+ if ( y+dy > 472 && blockclientX <blockright && blockclientX >blockleft || y+dy < ballsize ) {
131
151
  dy = -dy;
132
152
 
133
153
  }
134
154
 
135
155
  ```
136
- zxcxをそのま[zxcx]にしておくと棒がない場所でも跳ね返る状態に、zxcxを[x+dx]にするとクリックした際に棒があった場所にだけ反応して跳ね返るじょうたいになりました。どうしたらいいでしょうか?
156
+ blockclientX をそのま[blockclientX ]にしておくと棒がない場所でも跳ね返る状態に、blockclientX を[x+dx]にするとクリックした際に棒があった場所にだけ反応して跳ね返るじょうたいになりました。どうしたらいいでしょうか?
157
+
158
+ 追記:クリックする前と後でのblockrightとblockleft をそれぞれコンソールログで確認するとクリックした後の方は棒をどれだけ動かしても値が変わらなかったのでこれをどうにかできたらいいのかなと考えています。合っているかわかりませんが。