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="ano…

JavaScript入門 簡単な迷路ゲーム

こんにちは。レモンティーです。 #cv{border:solid 3px black;} 今回は今までの記事を組み合わせた簡単な迷路ゲームです。黄色がプレイヤーで、矢印キーで操作して 水色のゴールにたどり着けたらクリアです。 ただし途中でピンクの敵と重なるとゲームオーバーです。 （記事が複数表示されている状態だと動きません。） はじめから 矢印キーを押すと画面まで動く場合は↑の空欄にカーソルを合わせてください。 使ったのは↓を含むいくつかの記事で書いた内容です。 www.sawalemontea.com 今回はこれでおしまいです。 www.sawalemontea.com const canv…

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

#cv{border:solid 3px black;} こんにちは。レモンティーです。今回は矢印キーで移動する四角形をつくります。 サンプルはこんな感じです。 はじめから 画面まで動く場合ここ↑にマウスでフォーカスしてからキー操作してください。 使ったのは↓の二つの記事の内容です。 www.sawalemontea.com www.sawalemontea.com キー入力で受け取ったキーコードは連想配列で座標の変化量に変えて… var moovKeys = { 37: [-10,0], //left 39: [10,0], //right 40: [0,10], //down 38: [0…

JavaScript入門 キーボード入力を受け取る

こんにちは。レモンティーです。今回はキーボード入力を受け取ります。使うのはdocument.body.onkeydownです。 document.body.onkeydown = function(e){ //処理 } のように使います。 e.keyCodeでキーコードを取得できるので どのキーが押されたか判別できます。キーコード一覧は↓ キーコード一覧即席チェックサンプルは↓ ここにキーを入力 キーコード サンプルはこんな感じです。 HTML <form name="f1"> ここにキーを入力 <input type="text" name="t1" value=""> キーコード <inp…

JavaScript入門 Canvasで2dの描画

こんにちは。レモンティーです。今回はJavaScriptのCanvasを使って2dの描画をします。Canvasで様々な描画を行うには、 まずCanvas要素のcontextを取得します。 var canvas = document.getElementById('canvas1'); var con = canvas.getContext('2d'); これで色々な描画ができます。 //四角形 con.fillRect(x,y,w,h); //塗りつぶし con.strokeRect(x,y,w,h); //輪郭 con.clearRect(x,y,w,h); //範囲内を消去 //直線 co…

JavaScript入門 CSSのプロパティを操作

#sample2{display:none; } #sample3{position:absolute;} こんにちは。レモンティーです。今回はJavaScriptでCSSのプロパティを操作してみます。↓のように要素を取得して、.style.プロパティ = 値 とすればOKです。 let x = document.getElementById("testId"); x.style.color = "red"; これはテストのための文です。サンプル もっと他の例も見てみます。 表示・非表示の切り替えも同様に display = "none" ←→ display = "block" 等 visi…

JavaScript入門 タイマーで定期的に処理 setIntervalでn秒ごとに処理してclearIntervalで停止

こんにちは。レモンティーです。今回は定期的な処理と、その停止です。使うのはsetIntervalとclearIntervalです。 var timer; //開始 timer = setInterval("関数()",間隔); //停止 clearInterval(timer) あああああ開始 停止 サンプルのコードはこれです。 HTML <p id="test">あああああ</p> <button type="button" onclick="start()">開始</button> <button type="button" onclick="stop()">停止</button> JS …

JavaScript入門 別のウインドウでページを開く

こんにちは。レモンティーです。今回はJavaScriptを使って別窓でページを開きます。使うのは window.open("URL","ウインドウ名","その他の情報"); です。その他の情報というのは 表示位置の情報やスクロールバーの有無などです。例えば "width=640,height=480,top=0,left=0" みたいな感じです。 サンプル コードはこんな感じです HTML <button type="button" onclick="openOtherWindow()">サンプル</button> JS <script> function openOtherWindow(){…

JavaScript入門 n秒後に処理をする setTimeout

こんにちは。レモンティーです。今回はn秒待ってから処理を行います。使うのはsetTimeoutです。 setTimeout("関数()",待機時間); ミリ秒単位で待機時間をきめてあげれば、 そのぶん待ってから関数を発火させてくれます。3秒待つサンプルサンプルのコードはこんな感じです。 HTML <button type="button" onclick="wait3sec()">3秒待つサンプル</button> JS <script> function wait3sec(){ setTimeout("alert('3秒経過しました。')",3000) } </script> 今回はこれでお…

JavaScript入門 画像を動的に変更

こんにちは。レモンティーです。今回は画像を動的に変更します。使うのはgetElementByIdです。 let x = getElementById("testid"); これでimgタグを取得して、srcプロパティにある画像のPathを変更すればOKです。 サンプル サンプルのコードはこうなっています。 （はてなフォトライフにアップした画像で試していますが、pathが長いので省略してpathとしています。） HTML <img id="Img1" src="path" width="320" height="240" border="0" alt="picture"> <button typ…

JavaScript入門 n乗、n乗根、四捨五入 Math

こんにちは。レモンティーです。今回はJavaScriptで n乗、n乗根、四捨五入、切り捨て、切り上げ などを計算します。 n乗 n乗根 円周率 四捨五入 切り捨て 切り上げ n乗 Math.pow(A,n); n乗根 Math.sqrt(A); 円周率 Math.PI; 四捨五入 Math.round(A); 切り捨て Math.ceil(A); 切り上げ Math.floor(A); 今回はこれでおしまいです。 www.sawalemontea.com

JavaScript入門 乱数を使う Math.random()

こんにちは。レモンティーです。今回は乱数をつくります。使うのはMath.randpmです。 let rnd = Math.random(); これで0以上1未満の乱数を取得できます。サンプル切り上げと組み合わせてサイコロにしてみます。 サイコロコードはこんな感じです。 HTML <button type="button" onclick="showRnd()">サイコロ</button> JS <script> function showRnd(){ let r = Math.ceil(Math.random()*6); alert(`${r}が出ました。`); } </script> 今回は…