canvasを用いて、ボールを右に移動させる処理において分からない点があります。
html
1<!doctype html> 2 <html> 3 <head> 4 <title>breakout</title> 5 <meta charset="utf8"> 6 <style> 7 canvas { 8 9 background: #eee; 10 display:block; 11 margin:auto 0 ; 12 13 } 14 </style> 15 </head> 16 <body> 17 <h1>breakout</h1> 18 <hr> 19 20 <canvas id="mycanvas" width="500" height="400"></canvas> 21 22 <script> 23 // canvasを準備する 24 var canvas = document.getElementById("mycanvas"); // canvasを操る変数を取得する 25 var ctx = canvas.getContext("2d"); // 2Dグラフィクスを描くためのオブジェクトを取得する 26 27 // ボールを表すオブジェクトを作る 28 var ball = { 29 x: 300, // x座標 30 y: 100, // y座標 31 radius: 20, // 半径 32 dx: 5, 33 dy: 5 34 } 35 // ボールを描く関数 36 function drawBall() { 37 ctx.beginPath(); 38 ctx.arc( ball.x, ball.y, ball.radius, 0, Math.PI*2 ); // (x座標、y座標、半径、角度1、角度2) 39 ctx.fillStyle = "#ff0000"; 40 ctx.fill(); 41 ctx.closePath(); 42 43 } 44 function moveBall(){ 45 46 ball.x += ball.dx; 47 } 48 49 function collisonDetector(){ 50 51 if( ball.x >= canvas.width){ 52 53 ball.dx *= -1; 54 55 } 56 } 57 58 59 // ↓ 描く処理をまとめた関数。この中に全ての処理を入れる。 60 function draw() { 61 ctx.clearRect( 0, 0, canvas.width, canvas.height ); 62 63 drawBall(); 64 moveBall(); 65 66 67 collisionDetector(); 68 69 } 70 71 setInterval( draw, 10 ); // 10ミリ秒間隔で描き続ける(draw関数を繰り返し実行する) 72 </script> 73 </body> 74 </html>
上記の、「function moveBall() { ball.x += ball.dx; } 」ここの部分なのですが、ball.xの座標「300」にball.dx「5」を+したら、「305」になるかと思います。となると、ボールが移動する距離は「5」のみかと思うのですが、moveBall関数を実行すると、右端までボールが移動します。何故なのでしょうか?
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/05 11:20
2018/12/05 11:27