質問編集履歴
1
追記とcssとhtmlを追加しました。 あとｄとかｃとかzxcxなどの分かりにくかったのも書き直しました。
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 = ('
|
|
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
|
|
69
|
+
\\「var block = document.getElementById('blockid');」～「var blockclientX = e.clientX;」は後の棒の衝突反応のために書いています
|
|
37
|
-
var
|
|
70
|
+
var blockid = document.getElementById('blockid');
|
|
38
71
|
|
|
39
|
-
var clientRect =
|
|
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
|
|
78
|
+
var blockclientX = e.clientX;
|
|
46
79
|
|
|
47
|
-
var canvas = document.getElementById('
|
|
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('
|
|
98
|
+
var canvas2 = document.getElementById('bounseball');
|
|
68
99
|
|
|
69
100
|
var ctx = canvas2.getContext('2d');
|
|
70
101
|
|
|
71
102
|
var x = s.clientX;
|
|
72
|
-
|
|
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 &&
|
|
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 &&
|
|
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
|
-
の
|
|
156
|
+
のblockclientX をそのまま[blockclientX ]にしておくと棒がない場所でも跳ね返る状態に、blockclientX を[x+dx]にするとクリックした際に棒があった場所にだけ反応して跳ね返るじょうたいになりました。どうしたらいいでしょうか？
|
|
157
|
+
|
|
158
|
+
追記：クリックする前と後でのblockrightとblockleft をそれぞれコンソールログで確認するとクリックした後の方は棒をどれだけ動かしても値が変わらなかったのでこれをどうにかできたらいいのかなと考えています。合っているかわかりませんが。
|