わかりやすいJavaScript!-3 動かしてみよう
絵文字のりんごを左から右へ動かします。画面表示したらすぐに動き出さいます。まず全体のコードから。
const new_element = document.createElement('div')
let eltop = 50;
let elleft = 100;
new_element.style.position = "absolute";
new_element.style.backgroundColor = "#add8e6 ";
new_element.style.width = "20px";
new_element.textContent = '🍎'
document.body.appendChild(new_element)
function move(){
elleft += 1;
new_element.style.top = `${eltop}px`;
new_element.style.left = `${elleft}px`;
}
setInterval(move, 10);
大事なところは
CSSでの表示位置の座標指定を絶対配置にしています。
表示位置を
と変数で定義。そして、これを変化させる関数
あとはそれを実際に動かす方法として"setInterval()"を使います。
関数moveを10mm秒ごとに実行する命令になります。
実行させると左から右へ動いていきます
この場合は絵文字のりんごの表示場所が変数で定義し、その変数の値を変えていくことで動かします。
変数の数字を変化させることで表示位置が変化し動きます。これは直接的に絵文字の座標を変えて動かしています。
参考
画像を使う場合の取得の方法。body要素に追加しています(画面に表示)。
この記事が気に入ったらサポートをしてみませんか?