LemonteaのUnity部屋

C#とかのお話です~

Font Awesome 無料で綺麗なアイコンを使う

こんにちは。レモンティーです。

今回は、Webサイトやアプリで綺麗なアイコンを無料で使えるFontAwesomeを使います。

↓公式
fontawesome.com


公式ページにある↓のコードをheadにコピペすればすぐ使えます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

はてなブログで全ページで使いたい場合は 詳細設定>headに要素を追加 でOK)

使い方は簡単で

<i class="fa fa-ban"></i>

のようにします。

faの部分はアイコンの大まかな分類ですが、無料で使えるのはfa(fas)とfabだけなので
普段はfaでブランドのロゴの時だけfabと考えて大丈夫です。

そしてfa-banの部分で名前を指定します。

例えば  は

<i class="fa fa-burn"></i>

です。

フォントの名前についても公式サイトに一覧があります↓。
fontawesome.com


回転や大きさの変化もできます。


・大きさの変化 fa-nx

<i class="fab fa-android fa-1x"></i>
<i class="fab fa-android fa-3x"></i>
<i class="fab fa-android fa-5x"></i>


・回転 fa-rotate-90


<i class="fa fa-fighter-jet fa-rotate-90"></i>
<i class="fa fa-fighter-jet fa-rotate-180"></i>
<i class="fa fa-fighter-jet fa-rotate-270"></i>


また、CSSも適用できます。

<i class="fab fa-apple fa-3x red"></i>

CSS
.red{color:red;}

さらに、共通の親の子にすることで重ねることもできます。
この場合は親がfa-stack、子がfa-stack-nxクラスを持つ必要があります。


<span class="fa-stack fa-3x">
  <i class="fa fa-burn fa-stack-2x red"></i>
  <i class="fab fa-twitter fa-stack-1x blue"></i>
</span>

(はてなブログの場合、改行せず書きましょう。)



要素をクルクル回転させることもできます。

fa-spinでなめらかに

fa-pulseでカクカク  回転します。


<i class="fa fa-sync  fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>


公式で他にも色々紹介されています。


今回はこれでおしまいです。
www.sawalemontea.com






JavaScript入門 テトリスをつくる

こんにちは。レモンティーです。

今回はJavaScriptテトリスです。


↓で実際に遊べます。
https://slemontea7948.github.io/testRep/



使っているのはこのブログで書いたJavaScript入門記事の内容の組み合わせです。


今回はこれでおしまいです。
www.sawalemontea.com

JavaScript入門 簡単な迷路ゲーム

こんにちは。レモンティーです。

今回は今までの記事を組み合わせた簡単な迷路ゲームです。

黄色がプレイヤーで、矢印キーで操作して
水色のゴールにたどり着けたらクリアです。
ただし途中でピンクの敵と重なるとゲームオーバーです。
(記事が複数表示されている状態だと動きません。)







矢印キーを押すと画面まで動く場合は↑の空欄にカーソルを合わせてください。

使ったのは↓を含むいくつかの記事で書いた内容です。
www.sawalemontea.com


今回はこれでおしまいです。
www.sawalemontea.com


JavaScript入門 Canvas 矢印キーで移動する四角形


こんにちは。レモンティーです。

今回は矢印キーで移動する四角形をつくります。


サンプルはこんな感じです。






画面まで動く場合ここ↑にマウスでフォーカスしてからキー操作してください。


使ったのは↓の二つの記事の内容です。
www.sawalemontea.com
www.sawalemontea.com


キー入力で受け取ったキーコードは連想配列で座標の変化量に変えて…

var moovKeys = {
                37: [-10,0], //left
                39: [10,0], //right
                40: [0,10], //down
                38: [0,-10], //up
            };

座標を動かして、
Canvasからはみ出していないかチェックしてから再描画します。

 document.body.onkeydown = function(e){
                
                if(moovKeys[e.keyCode]){
                    let moov = moovKeys[e.keyCode];
                    playerPosX += moov[0];
                    playerPosY += moov[1];
                }

                checkPosition();                
                render();
            };
function render(){
                con.clearRect(0,0,canvasW,canvasH);
                con.fillRect(playerPosX,playerPosY,playerW,playerH);
            }

これで矢印キーで動かすことができます。

今回はこれでおしまいです。
www.sawalemontea.com