はじめに
こんにちは！@70days_jsです。
今日は文字を泳がせてみました。(gif)↓
65日目。(2019/12/22)
よろしくお願いします。
サイトURL
やったこと
文字を泳がせてみました。
別の言い方をすると、文字がランダムなスピードでY方向の移動をくり返しています。
html↓
<body>
<canvas id="canvas"></canvas>
</body>
canvasを使っています。
css↓
body {
margin: 0;
}
#canvas {
background-color: black;
}
bodyのmarginを消して、背景を黒にしています。
JavaScript↓
let canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
twidth = (canvas.width = window.innerWidth),
theight = (canvas.height = window.innerHeight),
chars = [],
fontSize = Math.random() * 100,
countNumber = 1,
flag = true;
chars2 = [
"あ",
"い",
"う",
...略...
"を",
"ん"
];
function Character(ctx) {
this.ctx = ctx;
this.x = Math.floor(Math.random() * twidth);
this.y = Math.floor(Math.random() * theight);
this.size = fontSize;
this.char = chars2[Math.floor(Math.random() * chars2.length)];
this.v = Math.floor(Math.random() * 5);
}
Character.prototype.render = function() {
this.draw();
this.positionChange();
};
Character.prototype.positionChange = function() {
this.y -= this.v + 1;
if (this.y < 0) this.y = theight;
if (this.y > theight) this.y = 0;
};
Character.prototype.draw = function() {
let ctx = this.ctx;
ctx.beginPath();
ctx.fillStyle = "rgba(31, 227, 13, .5)";
ctx.font = this.size + "px Arial";
ctx.fill();
ctx.fillText(this.char, this.x, this.y);
ctx.closePath();
};
for (var i = 0; i < 100; i++) {
fontSize = Math.random() * 15;
let char = new Character(ctx);
chars.push(char);
}
function render() {
ctx.clearRect(0, 0, twidth, theight);
for (var i = 0; chars.length > i; i++) {
let char = chars[i];
char.render();
}
requestAnimationFrame(render);
}
render();
昨日作ったCharacterコンストラクターを再利用しています。
メソッドは新たにpositionChange()メソッドを加えました。
Y方向の移動をthis.vを使って変更しています。
this.vはランダムで作っているので、あまり遅すぎるものを警戒して最後に+1しています。
感想
とてもシンプルなコードですが、文字が動いているのはワクワクしますね。
ひらがなっていいな。
最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。