はじめに
こんにちは！@70days_jsです。
文字を入力したら、ランダムな位置にランダムな大きさで表示されます。gif↓
64日目。(2019/12/21)
よろしくお願いします。
サイトURL
やったこと
キーダウンをイベントリスナーで捉えて、入力文字は一つずつオブジェクトを作っています。
50文字打ち込んだら全てのオブジェクトが消える仕組みになっています。
html↓
<body>
<div id="countWrapper">COUNT: <span id="count"></span></div>
<canvas id="canvas"></canvas>
</body>
css↓
body {
height: 100vh;
margin: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#canvas {
border: solid 1px rgba(31, 227, 13, 1);
}
#countWrapper {
color: rgba(31, 227, 13, 1);
padding-bottom: 20px;
}
JavaScript(61行)↓
let canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
twidth = (canvas.width = 500),
theight = (canvas.height = 500),
chars = [],
count = document.getElementById("count"),
fontSize = Math.random() * 100,
countNumber = 0;
function Character(ctx, e) {
this.ctx = ctx;
this.x = Math.floor(Math.random() * twidth);
this.y = Math.floor(Math.random() * theight);
this.size = fontSize;
this.char = String.fromCharCode(e.keyCode);
}
Character.prototype.render = function() {
this.draw();
};
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();
};
//_________keydown_________;
document.addEventListener("keydown", logKey, false);
function logKey(e) {
if (countNumber >= 50) {
countNumber = 0;
chars.length = 0;
alert("Characters are not eternal.");
} else if (e.keyCode < 65 || e.keyCode > 91) {
return false;
} else {
let char = new Character(ctx, e);
chars.push(char);
countNumber++;
count.innerHTML = countNumber;
}
}
function render() {
fontSize = Math.random() * 100;
ctx.clearRect(0, 0, twidth, theight);
for (var i = 0; chars.length > i; i++) {
let char = chars[i];
char.render();
}
requestAnimationFrame(render);
}
render();
function Character(ctx, e) {...}
↑これはコンストラクターです。
位置、サイズ、文字を入れています。
色々詰め込んだ後に、コンストラクターの役割ってなんだっけと悩みました。
コンストラクターでオブジェクト固有の値を入れるのは、どうなんだろう・・・？
このオブジェクトはrender()メソッドを通して、draw()メソッドを実行します。
メソッドの数が増えたときのためにrender()メソッドを介しています。
render関数(メソッドの方じゃないよ）はfontsizeをランダムな値に再設定しています。
fontSize = Math.random() * 100;
（あれ、もしかしてこれもコンストラクターでやればよかった・・・？）
これはキャンバスをまっさらにしています。↓
ctx.clearRect(0, 0, twidth, theight);
for文で各オブジェクトのメソッドを実行しています。↓
for (var i = 0; chars.length > i; i++) {
let char = chars[i];
char.render();
}
感想
オレオレ流でやりすぎたのを反省した一日でした。
オブジェクト指向プログラミングの本をちゃんと読まなきゃな。
最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。