Skip to content

Latest commit

 

History

History
16 lines (15 loc) · 1.72 KB

README.md

File metadata and controls

16 lines (15 loc) · 1.72 KB

概要

プログラミング学習開始2ヶ月の頃に作ったアプリです。 プログラミング学習を始めて、日本語であればブラインドタッチができるのにも関わらず英語になった途端まったくできないことに気づき、自分用に作りました。

言語・デプロイ環境

HTML CSS JQuery S3

仕様

オープニング画面でエンターを押すと、パソコンのキーが飛んで集まってきてゲーム開始です。 次々にCSSのプロパティの名前が出てきて、それに基づいてタイピングしてゆき、間違えるとイナズマが走ります。 100秒で終わるようにしており、終わったらキー一回単位で正解した数がポイントとして表示されます(間違えた数は今回は計算に入れてません)。

工夫点・作成記

ハートもイナズマもCSSで書いており、画像は一切使っていません。 オープニングでちょっと怖い感じを演出したく、フォントを入れ替えたりなど細かいことをしています。 学習初期に夢中で作ったものでリファクタリングを完全に無視して作成してしまい、中身をみていただければわかりますが、なかなかにごちゃごちゃで、コピペで済ませているところが多くて長く、作った本人でもどこをどう触れていいのかわからない、アンタッチャブルなものになってしまいました。この学びから、このサイトのJQueryはかなり丁寧にリファクタリングしています。 それでも、デザイン上女の子に人気な、初めて作った思い出深い大事なアプリです。

http://css-typing.com/