teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

初心者マークつけました

2019/06/04 05:19

投稿

what
what

スコア15

title CHANGED
File without changes
body CHANGED
File without changes

1

指摘を入れていただきましたので修正しました

2019/06/04 05:19

投稿

what
what

スコア15

title CHANGED
File without changes
body CHANGED
@@ -1,8 +1,36 @@
1
1
  今jsでブロック崩しゲームを作っていて、壁にボールが当たったら色がランダムで変更されるというプログラミングをこのコードの中に入れたいのですが初心者であまりわからなく、どこに、どういうコードを入れたらいいのか教えてもらえたら幸いです
2
2
 
3
+ ソースコードはこれです
3
4
 
5
+ var canvas = document.getElementById("myCanvas");
6
+ var ctx = canvas.getContext("2d");
7
+ var ballRadius = 10;
8
+ var x = canvas.width/2;
9
+ var y = canvas.height-30;
10
+ var dx = 2;
11
+ var dy = -2;
4
12
 
13
+ function drawBall() {
14
+ ctx.beginPath();
15
+ ctx.arc(x, y, ballRadius, 0, Math.PI*2);
16
+ ctx.fillStyle = "#0095DD";
17
+ ctx.fill();
18
+ ctx.closePath();
19
+ }
5
20
 
21
+ function draw() {
6
- ![イメージ説明](11bbe5ebe438d2d7b0d58b7c7371bb8e.png)
22
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
23
+ drawBall();
24
+
25
+ if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
26
+ dx = -dx;
27
+ }
28
+ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
29
+ dy = -dy;
30
+ }
31
+
32
+ x += dx;
33
+ y += dy;
34
+ }
7
35
 
8
- ![イメージ説明](a159d8a3564316c939f34426ff9e1436.png)
36
+ setInterval(draw, 10);