LemonteaのUnity部屋

C#とかのお話です~

JS

JavaScript入門 テトリスをつくる

JS

こんにちは。レモンティーです。今回はJavaScriptでテトリスです。 ↓で実際に遊べます。 https://slemontea7948.github.io/testRep/ 使っているのはこのブログで書いたJavaScript入門記事の内容の組み合わせです。 今回はこれでおしまいです。 www.sawalemon…

JavaScript入門 簡単な迷路ゲーム

JS

こんにちは。レモンティーです。 #cv{border:solid 3px black;} 今回は今までの記事を組み合わせた簡単な迷路ゲームです。黄色がプレイヤーで、矢印キーで操作して 水色のゴールにたどり着けたらクリアです。 ただし途中でピンクの敵と重なるとゲームオーバ…

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

JS

#cv{border:solid 3px black;} こんにちは。レモンティーです。今回は矢印キーで移動する四角形をつくります。 サンプルはこんな感じです。 はじめから 画面まで動く場合ここ↑にマウスでフォーカスしてからキー操作してください。 使ったのは↓の二つの記事の…

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

JS

こんにちは。レモンティーです。今回はキーボード入力を受け取ります。使うのはdocument.body.onkeydownです。 document.body.onkeydown = function(e){ //処理 }のように使います。 e.keyCodeでキーコードを取得できるので どのキーが押されたか判別できま…

JavaScript入門 Canvasで2dの描画

こんにちは。レモンティーです。今回はJavaScriptのCanvasを使って2dの描画をします。Canvasで様々な描画を行うには、 まずCanvas要素のcontextを取得します。 var canvas = document.getElementById('canvas1'); var con = canvas.getContext('2d');これで…

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

#sample2{display:none; } #sample3{position:absolute;} こんにちは。レモンティーです。今回はJavaScriptでCSSのプロパティを操作してみます。↓のように要素を取得して、.style.プロパティ = 値 とすればOKです。 let x = document.getElementById("testId…

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

JS

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

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

JS

こんにちは。レモンティーです。今回はn秒待ってから処理を行います。使うのはsetTimeoutです。 setTimeout("関数()",待機時間);ミリ秒単位で待機時間をきめてあげれば、 そのぶん待ってから関数を発火させてくれます。3秒待つサンプルサンプルのコードは…

JavaScript入門 画像を動的に変更

JS

こんにちは。レモンティーです。今回は画像を動的に変更します。使うのはgetElementByIdです。 let x = getElementById("testid");これでimgタグを取得して、srcプロパティにある画像のPathを変更すればOKです。 サンプル サンプルのコードはこうなっていま…

JavaScript入門 はてなブログでJSを使う

JS

こんにちは。レモンティーです。今回はJavaScript入門です。JavaScriptを使えば、はてなブログでも動的な仕掛けを簡単に作れます。見たまま記法以外ならJavaScriptのコードを直に書いて動かせます。さっそくやってみます。試しにここをクリックしてください…

JavaScript入門 基本文法

JS

こんにちは。レモンティーです。今回はJavaScriptの基本文法です。 (概念自体は知っている前提です) 数値、文字列、コメント 変数、定数 条件分岐 繰り返し 関数 配列 数値、文字列、コメント 数値の演算はよくある + - * / % です。文字列もよくある "aiu…

JavaScript入門 ダイアログを表示する alert confirm prompt

JS

こんにちは。レモンティーです。今回はJavaScriptでダイアログを表示します。今回扱うのは ・OKボタンのみのalertダイアログ ・OK、キャンセルの二択のconfirmダイアログ ・入力を受け付けるpromptダイアログ の三つです。 alert confirm prompt alert OKボ…

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

JS

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

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

JS

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

JavaScript入門 別のページへの遷移

JS

こんにちは。レモンティーです。今回は別のページへの遷移です。使うのは location.href = "URL"です。↓のボタンを押すとhttp://www.sawalemontea.comに遷移します。サンプル コードはこうなっています HTML <button type="button" onclick="jump()">サンプル</button>JS <script> function jump(){ location.href = "</script>…

JavaScript入門 テキストやタグの動的な書き換え

JS

こんにちは。レモンティーです。今回はテキストやタグを動的に書き換えます。使うのは次の2つです。まずdocument.getElementByIdで変更の対象を取得します。 let x = document.getElementById("test");次に取得した対象にinnerHTMLで変更を加えます。 x.inn…

JavaScript入門 文字列から数値に変換 parseInt

JS

こんにちは。レモンティーです。今回は文字列から数値への変換です。使うのはparseIntです。 let number = parseInt("text");これで文字列を数値に変換できます。 + サンプルのコードはこんな感じです。 HTML <form name="F1"> <input type="text" name="T1" value="1">+<input type="text" name="T2" value="1"> <input type="button" value="合計を計算" onclick="sum()"> </form>JS <script> function su…

JavaScript記事マップ

入門 文法 基本文法1 その他 Canvas 基本的な図形の描画 DOM テキストやタグの動的な変更 画像を動的に変更 CSSのプロパティを操作 タイマー n秒後に処理する n秒ごとに処理をする 数値・文字列 乱数 n乗・n乗根・四捨五入 文字列から数値に変換 ダイア…