はじめに
こんにちは！@70days_jsです。
canvas内でボールが動き続けるものを作りました。
MDNにあるゲームを参考にしています。
今日は56日目。(2019/12/13)
よろしくお願いします。
サイトURL
やったこと
こんなことをやりました。（gif）↓
丸いボールがゆっくり動いています。
真ん中にある四角に入ると、ボールの色と大きさが変わり、軌道が消えます。
スペースキーを押すとボールのスピードが上がります。
html↓
<body>
<div>
spaceを押した回数（ペースアップ）: <span id="spaceClick">0</span>回
</div>
<canvas id="myCanvas" width="480" height="320"></canvas>
</body>
canvasを使っています。
css↓
canvas {
background: rgba(255, 255, 255, 0.5);
border: solid 1px black;
}
canvasのレイアウトを変えたぐらいです。
JavaScript↓
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 5; //ボールの大きさ
var x = canvas.width / 2; //開始位置 X
var y = canvas.height / 3; //開始位置 Y
var dx = 1;
var dy = -1;
let color = "red";
let count = 0;
let spaceClick = document.getElementById("spaceClick");
document.addEventListener("keydown", space, false);
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
ctx.rect(220, 140, 50, 50); //x, y , 幅、高さ
if (x > 220 && x < 270 && (y > 140 && y < 190)) {
randomBallSize();
randomRGB();
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
ctx.fillStyle = color;
ctx.fill(); //実行
ctx.closePath();
}
function draw() {
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
dy = -dy;
}
drawBall();
x += dx;
y += dy;
requestAnimationFrame(draw);
}
//setInterval(draw, 10);
function space(e) {
count++;
spaceClick.innerHTML = count;
if (e.keyCode == 32) {
let fugou = Math.sign(dx);
if (fugou === 1) {
dx++;
} else {
dx--;
}
let fugou2 = Math.sign(dy);
if (fugou2 === 1) {
dy++;
} else {
dy--;
}
console.log("fugou: " + fugou);
}
}
function randomRGB() {
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
let rgb = "rgba(" + r + ", " + g + "," + b + ", .5)";
color = rgb;
}
function randomBallSize() {
let ball = Math.floor(Math.random() * 8);
ballRadius = ball + 3;
}
draw();
drawBall()関数でボールを描いています。
中にあるif文は
if (x > 220 && x < 270 && (y > 140 && y < 190)) {
真ん中の四角の位置です。
この中に入ると
randomBallSize();
randomRGB();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ボールのサイズを変更、色を変更、軌道を消します。
スペースキーの方はイベントリスナーで実装しています。
document.addEventListener("keydown", space, false);
変数dxとdyは速さを調整する変数で、これら絶対値を上げていくことでボールの速度を速くしています。
最後に、
requestAnimationFrame(draw);
この関数↑でアニメーションのフレームレートを自動で判断しています。
setInterval()よりこっちの方が効率よくていいですね。
感想
やっぱりゲームみたいな描画系はcanvasを使うべきなんだなと思いました。
canvasだとチャートとか、他にも色々作れそうなので勉強してみようかな。。
最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。
参考
MDNさん今回もお世話になりました！ありがとうございます！