なんにせよ気分次第

アラフォーおっさんの自由なブログ。内容も更新も気分次第

脳トレ計算アプリを作ったよ!

f:id:inwan:20170518190712p:plain

 

 スマホアプリの勉強を始めて間もなく2か月。そろそろなんとなくではあるがアプリ開発にも慣れてきた気がしないでもない(そうでもないか。。)

 

 あれこれと思考錯誤しながら、ようやく3作目のアプリが出来上がりました('ω')ノ

今回は過去2作のような単一ページのみのシンプルなアプリではなく、ゲームっぽくスタート画面、ゲーム、結果と3ページ画面が切り替わるように頑張りました。

 

そのアプリがこちらでござる('ω')ノ↓

play.google.com

アプリの遊び方

 このアプリは脳トレを目的とした計算ゲームアプリです。制限時間内にたくさん問題を解いて脳を活性化させましょう。

 使い方は、

1、最初の画面でレベルと制限時間を選んでスタートを押します

2、カウントダウンが終わったらスタートです。正解を入力します。入力したら「OK]ボタンを押すと正否が判定されて次の問題に移ります。入力を間違えたときは「C」ボタンで入力内容をクリアできます

3、制限時間になると終了です。結果画面に移り成績が表示されます。

 

作った感想

 とりあえず、ゲームっぽくはなったかな、という感じです(^^;)脳トレという教育的なゲームジャンルだと思えば地味な画面も「まぁありかな」って気がします(^^;)

 

 プログラム的なことでは、最初monacaのonsenuiの画面が切り替わるやつでやるつもりだったんですが、自分のスマホのバージョンが古くて確認ができないという悲しい事態が発覚し途方に暮れました( ;∀;)

 「なら、動的にページごとに作ればいいんやないの?」と、ページが変わるごとに(実際は変わってない)removenodeで消し、createElementで構築という力技で作ってやりました( ゚Д゚)

 しかし、まもなく完成という頃に、ある要素のz-indexの値を変えていて「全ページz-indexでコントロールしたらもっと楽だったんじゃないの?」と気づいたがまぁ今回はもういいだろうとなったのは言うまでもない( ´艸`)

monaca & nendだと広告の大きさ切り替えられないの?

 今回、せっかくゲームっぽくできたので、他のアプリでよく見かけるような「画面が変わるときに大きい広告が出る」やつをやりたかったんです。

 「divで全画面埋めてそこに広告張ってz-indexで前に出せばできんでしょ?」と考えてやってみたんです。これはできたんですが、

nendの広告が切り替わらない

普段は画面下にバナーを表示していて、ゲーム終了後に大きいのを出したいと思っても

大きいのが表示されません。小さいのそのまま出ます。

 いろいろ調べたものの結局わからず( ;∀;)どなたかご存知でしたらご教授願います。

その他もろもろ

 あと、今回は英語にも対応させて世界に発信し、俺もグローバルな男になってやろうと思ったのですが、調べると結構面倒臭そう(てか、monacaでできるのか?)だったのでまた今度やる気が出たときにやります(^^;)

 あと、今回のアプリも普通のブラウザで遊ぶことができます。アプリをインストールしたくない人、iPhoneの方はこちらでお試しください↓

inwans.com

まとめ

 javascriptを2か月勉強して思ったのは「DOMってようわからん。CSSって思った通りになってくれん!」ってことです。

 基本的にCSSがよくわかっていないので表示させたいようにうまく表示させることができないです(-_-;)それで毎回イライラしてます。

 あとhtmlのツリー構造もonclilckがわけわからんことになったりして、毎回死にそうになります(-_-;)

 でも、スマホアプリでも普通のブラウザでも動くのは便利だな、とは思う。その点だけはjavascriptってすごいと思おう。

 

 最後、グダグダになりましたが次回作もがんばるぜ!('ω')ノ 

Copyright© なんにせよ気分次第 , 2016 All Rights Reserved.