37
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

JavaScript学習者が2週間目までに作ったアプリ

はじめに

私はJavaScriptを学習し始めて、2週間目の初学者です。
2週間目という節目を迎えて、JavaScriptで5つアプリを作成したので公開しようと思います。
サーバーにアプリをアップロードしたので、もしコードに興味がある方は各項目のリンクから飛んでソースを見ていただけたら、と思います。
基本的にコードはタイミングゲームアプリ以外汚いです。
※FizzBuzzアプリは、サーバーへアップロードしていません。

作成したアプリの目次

1.FizzBuzzアプリ
2.ビンゴアプリ
3.カードゲームアプリ
4.すごろくアプリ
5.タイミングゲームアプリ

1.FizzBuzzアプリについて

FizzBuzzアプリは、プログラミング界隈ではお馴染みだと思いますが3の倍数の時に”Fizz!”、5の倍数の時に”Buzz!”、そして3の倍数かつ5の倍数である数の時に"FizzBuzz!"と表示するアプリとなります。

2.ビンゴアプリ

このアプリは、5×5のマス目をHTMLで作成して、ボタンを押したらマス目がランダムに1つずつ色が変わっていき一列そろったら”BINGO!!!”と表示されるアプリとなります。
スクリーンショット 2019-05-31 17.03.26.png

リンクはこちら

3.カードゲームアプリ

このアプリは、まず4枚のカードを表示してその数を記憶してカードを裏返し、記憶した4つの数をフォームに入力して正解かどうか判定するアプリとなります。
スクリーンショット 2019-05-31 17.03.47.png

リンクはこちら

4.すごろくアプリ

このアプリは、16マスを画面に表示してサイコロを振り、出た目のマスを進みゴールを過ぎてしまった場合は”BURST!!!”と表示して、丁度ゴールへ到着した場合(サイコロの出目の合計値が17になった場合)は”CLEAR!!!”と表示するアプリとなります。
スクリーンショット 2019-05-31 17.04.12.png

リンクはこちら

5.タイミングゲームアプリ

このアプリは、音符が2つ画面に表示されていて片方は位置を固定してあり、もう一方の音符は固定された音符に向かって移動しており、その2つの音符がちょうど重なった時にタイミングよくボタンを押すと、”CLEAR!!!"と表示してタイミングが合わなかった場合は、”MISS!!!”と表示されるアプリとなります。このアプリのコードは自分でもかなり綺麗に書けたと思います。ここら辺から、少し上達したかなと思いました。
スクリーンショット 2019-05-31 17.04.30.png

リンクはこちら

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
37
Help us understand the problem. What are the problem?