はじめに
こんにちは！@70days_jsです。
マウスの位置に円を起き、リリースボタンを押したら円が動き出すものを作りました。
デリートボタンで円が消えます。(gif)↓
今日は71日目。(2019/12/28)
よろしくお願いします。
サイトURL
やったこと
マウスの位置に円を起き、リリースボタンを押したら円が動き出し、デリートボタンで円が消えるものを作りました。
html↓
<body>
<input type="button" value="delete" id="delete" />
<input type="button" value="release" id="release" />
<canvas id="canvas"></canvas>
</body>
htmlはボタンとcanvasだけです。
css↓
body {
margin: 0;
background-color: black;
}
# delete {
position: absolute;
left: 10px;
top: 10px;
}
# release {
position: absolute;
left: 100px;
top: 10px;
}
cssはボタンの位置を変えたぐらいです。
JavaScript↓
let canvas = document.getElementById("canvas"),
myDelete = document.getElementById("delete"),
myRelease = document.getElementById("release"),
ctx = canvas.getContext("2d"),
twidth = (canvas.width = window.innerWidth),
theight = (canvas.height = window.innerHeight),
chars = [],
mode;
function Circle(ctx, x, y) {
this.size = 10;
this.ctx = ctx;
this.x = x;
this.y = y;
this.r = Math.floor(Math.random() * 256);
this.g = Math.floor(Math.random() * 256);
this.b = Math.floor(Math.random() * 256);
this.a = Math.ceil(Math.random() * 10);
this.v = Math.ceil(Math.random() * 10);
}
Circle.prototype.potision = function() {
this.x += this.v;
this.y += this.v;
if (this.x < 0 + this.size) this.v *= -1;
if (this.x > twidth - this.size) this.v *= -1;
if (this.y < 0 + this.size) this.v2 *= -1;
if (this.y > theight - this.size) this.v2 *= -1;
};
Circle.prototype.render = function() {
this.draw();
if (mode === true) this.potision();
};
Circle.prototype.draw = function() {
let ctx = this.ctx,
color = this.r + "," + this.g + "," + this.b + "," + this.a;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = "rgba(" + color + ")";
ctx.fill();
ctx.closePath();
};
document.body.addEventListener("mousemove", returnMousePosition);
function returnMousePosition(e) {
let char = new Circle(ctx, e.pageX, e.pageY);
chars.push(char);
}
function render() {
ctx.clearRect(0, 0, twidth, theight);
ctx.fill();
for (var i = 0; chars.length > i; i++) {
let char = chars[i];
char.render();
}
requestAnimationFrame(render);
}
myRelease.addEventListener("click", function() {
mode = true;
});
myDelete.addEventListener("click", function() {
chars.length = 0;
});
render();
リリースに関しては、ボタンを押したらイベントで検知して、modeという変数の値をtrueに変えることで動き出すように設定しています。↓
myRelease.addEventListener("click", function() {
mode = true;
});
メソッドの部分で、modeを判定しています。↓
Circle.prototype.render = function() {
this.draw();
if (mode === true) this.potision();//←ここ。falseなら動かない。
};
デリートはオブジェクトを入れている配列の値を0にするだけです。↓
myDelete.addEventListener("click", function() {
chars.length = 0;
});
感想
リリース時に動き出す方向に法則があるのでなんとかしたいですね。
どうすればいいんだろう。
最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。