プログラミング勉強の物置き。振り返り＆モチベーション維持が目的。
ウェブカツ物置き
2019年3月 ～ プログラミング学習動画サービス「ウェブカツ!!」で学びながら作った、小ネタやデザイン練習置き場。
以下はjavascript独学時代の物置きです。
(2017年6月 ～ 2019年2月までの、製作過程の物や小ネタ)
(それぞれ一番下が最新バージョン)
「PC用」は、マウスを当てるだけでうさぎが動きます。
「スマホ用」は、うさぎをタップまたはクリックで動きます。
※つかまえた後も操作を続けると、うさぎが枠の外に飛んで行ってしまいますが、心配ありません。
（リセットすれば戻ります）
その２(角でなくても捕まります)(関数変更Ver) PC用 スマホ用
その４(画像が切り替わるVer)(コード色々手入れ) PC用 スマホ用
公開版(別窓) その５(フィールドを大きくした) PC用 スマホ用
公開版var1.1(別窓) その６(終了したら動かないように改造) PC用 スマホ用
2017.06-09JPEG画像を使ったコマ落としアニメーションです。
GIF形式にすると重くなってしまうような画像ファイルを、軽くアニメーション表示できます。
試作 (とりあえず動け)
試作2 (画像をプリロードしてみた)
試作3 (コードを大改造：画像の切り替わり時にチカチカしなくなった)
試作4 (写真の枚数が増えても動くかどうか)
試作5 (写真の下に字幕つけてみた)
公開版 (一部写真の手直し) Ａ(写真4枚) Ｂ(写真3枚＋字幕) Ｃ(一周再生したら止まる)
※ブログへiframeで表示する都合上、戻るボタンを設置していません。
※ブラウザバックでお願いします。
親指シフト入力の体験ができます。
英数入力モードのままで動きます。専用ソフトは不要です。
(JavaScriptによって、英字キーとかなを結び付けています)
公開版 サイト公開しました：親指タイピング
試作 (問題をセットするだけ)
試作2 (問題文のキーコードだけセット)
試作3 (上記二つを合体)
試作4 (キー入力のテスト：シフトなしホームポジション)
試作5 (問題をランダムに5問セットする)
試作6 (問題をランダムに5問セットする→回答する)
試作7(親指を使った入力の構築)以降
専用ページへ
「た」抜き暗号が作れます。
(適当な置き場所がないのでここにアップしてみた)
公開版 たぬき暗号生成つーる
2018.01もぐらたたき的なゲームです。
公開版 ひよこつつき
2018.07キーボードで操作するテトリスです。(その3はタッチパッドも使えます)
下記の元ネタを写経しつつ、一部変更を加えました。
canvasの使い方(アニメーションのやり方)を掴む、音を出してみる、ゲームの組み方を学ぶ、が目的。
その１ (中断機能追加、ゲームオーバー時の動作変更、画面上部にメッセージ追加)
制作所要時間：メインループ処理・レンダリングの写経(一部改変)2時間。
ブロック操作部分写経・上記の機能を追加に1時間。
その２ (ブロックをウサギに変更、4行消しの音を変更、ゲームオーバー音導入、キーイベントキャンセル(上下キーでスクロールするのを防ぐ)、メッセージ欄の手直し)
所要約1時間。
公開版 その３ (スマホ用操作ボタン設置、音のON/OFFボタン設置、CSS手入れ)
所要約1時間半。
元ネタ：【JavaScript】200行で作るテトリスのレシピ【HTML5】 by おっ立ち野郎
効果音拝借：効果音ラボ
うさぎ(に見立てた矢印)が、自動生成のマップ上を動きます。
親指シフトでのタイピングゲームに応用したい。
その１：迷路の自動生成 (まずは迷路のみ。エンターキーを押すと新規生成)(壁のばし法を参考に)
その２：迷路上で矢印を動かす (Enterで迷路生成、Spaceで矢印が動く)(左上がゴールの予定だが、たどりつけない迷路も多い)
その３：ゴールに行ける迷路だけ表示する (左上がゴール)(Enterで迷路生成、Spaceで矢印が動く)
その４：迷路に障害物を置く (障害物はまだ消せない)(Enterで迷路生成、Spaceで矢印が動く)
その５：障害物を消せる (Spaceでスタート→文字を押すと消える)(Enterで迷路生成、Spaceでスタート)
その６：障害物に文字を表示 (何を押したら消えるか見える化)(Enterで迷路生成、Spaceでスタート)
その７ (全てのアルファベットに対応、スコア機能追加)(Enterで迷路生成、Spaceでスタート)
参考：迷路自動生成アルゴリズム
５分でできる迷路・自動生成アルゴリズム【javascriptプログラミング】
webプログラミングに登場するタグやプロパティ、予約語などが打てます。
プログラミング勉強サービス「ウェブカツ！！」本登録前に、独学時代の振り返りとして制作 → 勉強内容を元に改造予定。
その１：HTML・CSSの単語 (入門編・鬼練に出てくるタグやプロパティ)(CSS適当)(記録の記憶はまだできない)
ウェブカツ！！のサイトは こちら
2019.03管理者：文月かずな（何かあればこちらへ）
テキストエディタ：Mery
参考サイト：JavaScript入門 - パズルネット 智慧（ソフィア）