テクノロジー

進捗だめです

つむりん🍚UGOK's icon'
  • つむりん🍚UGOK
  • 2019/11/19 14:53

こんばんは、つむりん🍚です。

以前提案したアプリ「行きたいところマップ」の進捗がダメダメすぎるので、最近作った別の作品を紹介したいと思います。

 

その名も、、、

 

 

 

 

 

 

 

ドキドキ!告白ゲーム♡

です。

 

 

 

なんとも痛々しい名前のゲームを紹介していきましょう↓

Content image

その名の通り、男の子が女の子に告白するゲームです。真ん中にいるブルブルしているのが告白チャレンジする男の子(あなた)👦

右にいる目が笑っていない女の子に告白します。スッ…ヽ(・∀・ )

 

 

Content image

スタイルを変更すると、男の子の告白スタイル(画像)が変わります。ちょっとうざいですね。

他にも、「正統派!愛を全面に押し出しスタイル」と「俺について来い!頼もしい漢スタイル」があります。

 

 

Content image

プレゼントと告白メッセージを入力して、いざ、告白!!!

 

どうなるかな…

 

 

 

Content image

残念!!振られてしまいました😭

 

 

 

 

🌼技術面の解説

 このゲームは、Vue.jsを用いて制作しました。Vue.jsとは、JavaScriptのフレームワークのことです。予め、型を用意してくれているので、JavaScriptで記述するよりも少ないコード数で書いていくことができます。

 

1.スタイルを選ぼう

こちらは、プルダウンメニューをクリックすることで、画像が変更されるようになっています。

Vueのdata内にあらかじめ挿入したい画像を配列として入れておきます。そして、プルダウンメニューには、value属性を指定しておき、画像の切り替わりを連動させます。v-modelにはnow-styleをつけます。

 

2.プレゼントを選ぼう

こちらにもそれぞれの画像にvalue属性を指定しておきます。v-modelにはpresentをつけます。

 

3.愛の告白メッセージは?

ここには、v-modelにmessageをつけます。テキストボックスに入力した文字は、連動して男の子のセリフ部分に付け加わります(双方向データバインディング)。

 

4.これでいく!ボタン

これでいく!ボタンがクリックされたら、結果を表示します。このとき、先程つけた、v-model(now_style,present,message)が指定した画像(どのスタイル?)や文字(どんな告白メッセージ?)になっているかの確認を行います。

結果の表示は、告白成功パターンと失敗パターンの2種類をモーダルウィンドウで表示しています。先述の確認を行った結果、指定した画像・文字入力した画像・文字が一致していれば、告白成功のモーダルを出します。モーダルウィンドウは、v-showをtrueにすることで表示させています。

 

 

 このゲーム、告白スタイル(プルダウンメニュー)と渡すプレゼント(ラジオボタン)は合っていても、告白メッセージ(テキストボックス)が合っていないと成功になりません。つまりは一文字も間違えてはいけないんですよね。超絶難易度高めですね。

これは果たしてゲームと言えるのだろうか…。

 

 

 

Supporter profile icon
Article tip 1人がサポートしています
獲得ALIS: Article like 41.46 ALIS Article tip 0.10 ALIS
つむりん🍚UGOK's icon'
  • つむりん🍚UGOK
  • @tsumri
UGOKのメンバー。ごはんよりパン派。Twitter(@ugok_rc22)🐦

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

Like token Tip token
159.32 ALIS
Eye catch
テクノロジー

彼女でも分かるように解説:ディープフェイク

Like token Tip token
32.10 ALIS
Eye catch
テクノロジー

なぜ、素人エンジニアの私が60日間でブロックチェーンゲームを制作できたのか、について語ってみた

Like token Tip token
270.93 ALIS
Eye catch
クリプト

ジョークコインとして出発したDogecoin(ドージコイン)の誕生から現在まで。注目される非証券性🐶

Like token Tip token
38.31 ALIS
Eye catch
クリプト

Uniswap v3を完全に理解した

Like token Tip token
18.92 ALIS
Eye catch
クリプト

17万円のPCでTwitterやってるのはもったいないのでETHマイニングを始めた話

Like token Tip token
46.60 ALIS
Eye catch
ゲーム

ドラクエで学ぶオーバフロー

Like token Tip token
30.10 ALIS
Eye catch
テクノロジー

オープンソースプロジェクトに参加して自己肯定感を高める

Like token Tip token
85.05 ALIS
Eye catch
テクノロジー

iOS15 配信開始!!

Like token Tip token
7.20 ALIS
Eye catch
クリプト

約2年間ブロックチェ-ンゲームをして

Like token Tip token
61.20 ALIS
Eye catch
クリプト

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

Like token Tip token
121.79 ALIS
Eye catch
他カテゴリ

ALISのシステム概観

Like token Tip token
5.00 ALIS