音感トレーニングゲーム、レベル３を作成しました。 レベル３ということで、低いド～高いドの8音の音当てゲームです。 さらに、今回は回答数・正解数・正答率を表示する機能も搭載しました！ // ぜひ遊んでみてください！ なお、この記事を作った頃の私のス…

音感トレーニングゲームのレベル２を作りました！ ソ～高いドまでの音当てゲームができます。 // 前回のレベル１と合わせて、低いドから高いドまでを網羅できます。 arsinput.hatenablog.jp 8音は音感がない人には難易度が高すぎるので、4音ずつ音に慣れてい…

今月の目標にしていた音感トレーニングゲームを作成しました！ 今回はレベル１！！！ ド～ファまでの音当てゲームができます。 // 前回の記事でLSSさんにアドバイスをいただきましたので、 arsinput.hatenablog.jp 0,2,4,5の配列をかませて実装しました。 せ…

今月の目標の音感トレーニングのために、JavaScriptで音を出すのにチャレンジしました。 今回は第1弾として、低いド～高いドまでの音がランダムで出るボタンを作成しました。 // ボタンを押すと、音が出ると同時にどの音が出ているかの文字を表示します。 本…

文字をぼかして表示するのをやりたくて、いつもお世話になっているLSSさんの記事を丸パクリさせていただきました。 little-strange.hatenablog.com 文字がぼけて何が書いてあるか見えません。 マウスカーソルを合わせるとぼかしがなくなります すごい！ 実際…

私が作成している<CSS>イライラ迷路に動きの要素があったら面白いなと思い、 【ルール説明】<CSS>イライラ迷路 - アーシの考える迷路 今回はオブジェクトを動かすCSSを試してみました。 とりあえずできあがったものはこちら 上下左右、斜めに動かしてみました！ 知って</css></css>…

cssを使って画像を一定時間で切り替えるものを作成しました。 きれいに3つの画像が繰り返し表示されるようになりました。 いつもは自分でcssを作るのに悪戦苦闘するのですが、今回は下記のサイトで使われていたものを流用するだけで大体できてしまいました。…

最近、html・css・svgと、テキスト記法で色々なことができるようになってきました。 そういったテキストを用いた記述をするとき、色をどうやって指定したらいいのだろうというのを結構悩みます。 RGBをそれぞれ256の濃さから選んで1600万色以上の色を任意に…

LSSさんのブログを参考にsvgを試してみました。 little-strange.hatenablog.com 恥ずかしながら、今までsvgはなんなのかを知りませんでした。 Scalable Vector Graphicsの略で、テキスト形式でお絵かきができるものです。 まず、最初にLSSさんのソースを丸パ…

11月の新作迷路を作るべく、CSSの学習をしてみました。 CSSは見様見真似で色々と実験してみました。 ※今回の記事はパソコンを前提としています まずは、今回のものを色々試すための箱を作ります。 ＜箱のcss＞ #box{ position:relative; width:200px; height…

はためく という処理を結構前にですが、LSSさんが作っていました little-strange.hatenablog.com はためくといったら旗ですよね！ 旗といったらこのブログの最近の流れでは国旗です。 ということで、私が過去に取り上げた国旗の中からいくつかをはためかせて…

最近ちょこちょこHTMLやJavaScriptに触っています。 今回はHTMLで作るテキストボックスに、あらかじめ値を入れたりする方法を学んだため、紹介します。 ■普通のテキストボックス 値を入れることができます。 ■未入力の時に文字が見えるテキストボックス あら…

占いを作ってみました。 あなたの運勢を占う！ // '+first[Math.floor(Math.random() * first.length)]+last[Math.floor(Math.random() * last.length)]+''; result.innerHTML=myFortune; } window.onload = myRndLink; // ]]> 2つの言葉を組み合わせて占い…

先日から何度かJavaScriptで作成した迷路をこのブログで公開していますが、迷路が主であるはずの迷路ブログの方では未だに公開していません。 その理由は下記で公開していますが、JavaScriptで生成した迷路が何故か迷路ブログでは幅が自動調整されて表示崩れ…

はてなブログ中で動作させることができる迷路が完成しました。 ぜひ遊んでみてください！ 上へ移動 左へ移動 右へ移動 下へ移動 // "; for (j=y-5;j"; for(i=x-5;i自"; }else if(meiro.substr((j*meiro_yMax+i)%(meiro_xMax*meiro_yMax),1)=="0"){ txt+=" ";…

最近JavaScriptにはまっています。 いつかJavaScriptで迷路を作ってやるぞと思っています。 という訳で、今回はJavaScriptで迷路を表示、移動をできるような迷路のひな型を作りました。 上へ移動 左へ移動 右へ移動 下へ移動 // "; for (j=y-5;j"; for(i=x-5…

JavaScriptを使って●を捕まえるゲームを作りました。 ●を10回捕まえてみてください！ // =370){ if(g=3 && g=7){ mx=-16; my=my+2 } } if(x=2 && g=5 && g=8){mx=25;} } if(y>=250){ my=-my } if(y0){ if(x=10){ gamen.innerHTML='クリアおめでとう！'; }els…

ブログでできる動くプログラムを学ぶべく、既存プログラムを勝手に書き換えてみます。 今回はソースを公開してくださっているこちらを使っていきます。 little-strange.hatenablog.com LSSさんにはいつもお世話になっております。 ぴょんぴょんプログラムを…

最近JavaScript熱が再びでてきました。 熱がでてきた理由は、LSSさんがブログで使えるhtmlタグやCSS、Javascript色々と投稿しているからです。 little-strange.hatenablog.com 以前私がブログでのプログラミングに挑戦したのは昨年のゴールデンウィークです…

var parser = new DOMParser(); async function getHtmlFromUrl(url) { var page = await fetch(url).then(r=>r.text()); return parser.parseFromString(page, 'text/html'); } function getEntryLinks(html) { var links = Array.from(html.querySelectorA…

前回は数値計算を行ったところ、少数の計算ができませんでした。 Java使いの私にしてみると、int型を使うとそうなってしまうよな。という感覚です。 そこで、今回はJavaScriptで使える型を確認してみることにしました。 JavaScriptの型、実は6種類しかないの…

令和初学習！ web系プログラミング練習第３回です。 第１回はやりたいことはできましたが、できた後の操作に難がありました。 arsinput.hatenablog.jp 今回は本職がシステムエンジニアのアーシとして、仕様をしっかりと検討し、後続作業の調査・設計・プログ…

前回はJavaScriptを初めて使ってみましたが、結果の出力があまり良い感じにはなりませんでした。（仕様通りです。） arsinput.hatenablog.jp document.writeという方法で文字列出力をおこなったことが原因です。 document.writeの処理としては、「ドキュメン…

今日からはてなブログを利用してプログラミングの勉強をしていきます。 web系のプログラミングはほとんど経験ありませんが、他の言語のプログラミングはいくつか経験しているので、なるべくサクサク学んでいきたいなと思っています。 今回はブログにボタンを…

私の本職はシステムエンジニアで、プログラミングもします。とはいえ、仕事で主に使う言語はJava,bash,awk,vbaあたりで、web系のプログラミングには極めて疎いです。 htmlとかJavaScriptとかを使いこなしてみたい、という思いが前々からありました。せっかく…