アーシの毎日インプット

毎日1つ以上学習する。学習した内容を公開する。を目標に自分のスキルアップを目指します。

ブログでプログラム

音感トレーニング:Lv3

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

音感トレーニング:Lv2

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

音感トレーニング:Lv1

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

JavaScriptを使ってランダムに音を出してみる

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

文字をぼかして表示する

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

オブジェクトを動かすCSSテスト

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

画像を一定時間で切り替える

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

タグ中で指定できる色

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

svgおえかき

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

【CSS】マウスで触れたら画像を出す

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

国旗がはためく

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

【HTML】テキストボックスの種類

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

ランダム占い機能、作ってみました

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

CSSをいじってみました

先日から何度か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 以前私がブログでのプログラミングに挑戦したのは昨年のゴールデンウィークです…

記事をランダム表示:ブログでプログラミング5

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…

JavaScriptの型は6種類だけ:ブログでプログラミング4

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

足し算をする:ブログでプログラミング3

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

innerHTML:ブログでプログラミング2

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

hello world:ブログでプログラミング1

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

ブログでプログラミング練習したい

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

【アーシの原点】

【頭を鍛える迷路集】


スポンサードリンク