質問編集履歴
1
分かりやすくしました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
|
-
プログラミング初心者です。下
|
|
1
|
+
プログラミング初心者です。以下のコードはマウスの動きと同時にボールが動くようにしたいのですが、そもそも赤い球が描写されません。ご教授願います。
|
|
2
2
|
|
|
3
|
+
ちなみに、Pointはほかのファイルでfunction Point(){
|
|
4
|
+
|
|
3
|
-
|
|
5
|
+
this.x=0; this.y=0;} と書いてあります。
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
```java script
|
|
12
|
+
|
|
13
|
+
コード
|
|
4
14
|
|
|
5
15
|
let screenCanvas;
|
|
6
16
|
|
|
@@ -12,25 +22,41 @@
|
|
|
12
22
|
|
|
13
23
|
let mouse=new Point();
|
|
14
24
|
|
|
25
|
+
let ctx;
|
|
26
|
+
|
|
27
|
+
let fire=false;
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
const shot_color="red";
|
|
32
|
+
|
|
33
|
+
const shot_count=10;
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
screenCanvas=document.getElementById("mycanv");
|
|
38
|
+
|
|
39
|
+
let ctx=screenCanvas.getContext("2d");
|
|
40
|
+
|
|
15
41
|
|
|
16
42
|
|
|
17
43
|
|
|
18
44
|
|
|
19
45
|
window.onload=function(){
|
|
20
46
|
|
|
21
|
-
screenCanvas=document.getElementById("mycanv");
|
|
22
|
-
|
|
23
|
-
let ctx=screenCanvas.getContext("2d");
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
47
|
screenCanvas.addEventListener("mousemove",mouseMove,true);
|
|
28
48
|
|
|
29
49
|
window.addEventListener("keydown",keyDown,true);
|
|
30
50
|
|
|
51
|
+
screenCanvas.addEventListener("mousedown",mouseMove,ture);
|
|
52
|
+
|
|
53
|
+
info=document.getElementById("info");
|
|
31
54
|
|
|
32
55
|
|
|
56
|
+
|
|
33
|
-
|
|
57
|
+
let chara=new character();
|
|
58
|
+
|
|
59
|
+
chara.init(10);
|
|
34
60
|
|
|
35
61
|
|
|
36
62
|
|
|
@@ -38,23 +64,11 @@
|
|
|
38
64
|
|
|
39
65
|
info.innerHTML=mouse.x+":"+mouse.y;
|
|
40
66
|
|
|
41
|
-
|
|
67
|
+
|
|
42
68
|
|
|
43
69
|
ctx.clearRect(0,0,screenCanvas.offsetWidth,screenCanvas.offsetHeight);
|
|
44
70
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
ctx.beginPath();
|
|
48
|
-
|
|
49
|
-
ctx.fillStyle="red";
|
|
50
|
-
|
|
51
|
-
ctx.arc(mouse.x,mouse.y,10,0,Math.PI*2,false);
|
|
52
|
-
|
|
53
|
-
|
|
71
|
+
draw();
|
|
54
|
-
|
|
55
|
-
ctx.closePath();
|
|
56
|
-
|
|
57
|
-
|
|
58
72
|
|
|
59
73
|
if(run){setTimeout(arguments.callee,fps);}
|
|
60
74
|
|
|
@@ -66,6 +80,24 @@
|
|
|
66
80
|
|
|
67
81
|
|
|
68
82
|
|
|
83
|
+
function draw(){
|
|
84
|
+
|
|
85
|
+
ctx.beginPath()
|
|
86
|
+
|
|
87
|
+
chara.potision.x=mouse.x;
|
|
88
|
+
|
|
89
|
+
chara.potision.y=mouse.y;
|
|
90
|
+
|
|
91
|
+
ctx.fillStyle="red";
|
|
92
|
+
|
|
93
|
+
ctx.arc(chara.potision.x,chara.potision.y,chara.size,0,Math.PI*2,false);
|
|
94
|
+
|
|
95
|
+
ctx.fill();
|
|
96
|
+
|
|
97
|
+
ctx.closePath();
|
|
98
|
+
|
|
99
|
+
}
|
|
100
|
+
|
|
69
101
|
|
|
70
102
|
|
|
71
103
|
function mouseMove(event){
|
|
@@ -75,6 +107,14 @@
|
|
|
75
107
|
mouse.y = event.clientY - screenCanvas.offsetTop;
|
|
76
108
|
|
|
77
109
|
|
|
110
|
+
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
function mouseDown(event){
|
|
116
|
+
|
|
117
|
+
fire=true;
|
|
78
118
|
|
|
79
119
|
}
|
|
80
120
|
|
|
@@ -91,3 +131,7 @@
|
|
|
91
131
|
}
|
|
92
132
|
|
|
93
133
|
}
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
```
|