monaca(JS)でAndroid版湯婆婆を実装してみる

5475 ワード
JavaScript ネタ monaca JavaScript テキストリンク

はじめに

この記事はNemesisさんのJavaで湯婆婆を実装してみるをリスペクト(?)して書いた記事になります。

僕も湯婆婆に名前を奪われようと思います。

※私はこれまで湯婆婆を知りませんでした。ラーメンババアは知ってるけど。

今回使う物

今回は「monaca」というクラウド上でスマホアプリの開発ができるサービスを使用します。

使う言語はみんな大好きJavaScriptです。

湯婆婆のレギュレーション

湯婆婆の流れは、

「名前を聞かれる」
↓
「名前を褒める」
↓
「名前から１文字ランダムに取得」
↓
「発表」
↓
「バグる時はバグる」（※今回は割愛）
という流れになります。

簡単だね。

ソースコード

今回は即席で書いたので、汚いです。

main.js
let playername
let newNames
let newName
function yubaba_send(){
  playername=document.getElementById("name").value
  document.getElementById("yubaba").innerHTML="<h2>フン。"+playername+"というのかい。贅沢な名だねぇ。</h2><br>"
  newNames=playername.split('');
  newName=newNames[Math.floor( Math.random() * newNames.length )]
  document.getElementById("yubaba").innerHTML+="<h1>今からお前の名前は"+newName+"だ。いいかい、"+newName+"だよ。分かったら返事をするんだ、"+newName+"!!</h1>"
}
index.html
<!--body以外は割愛-->
<body>
  <div id="yubaba">
    <h2>契約書だよ。そこに名前を書きな。</h2>
    <input type="text" id="name" value="名無し"><br>
    <input type="button" value="湯婆婆に送信"onclick="yubaba_send()"><br>
  </div>

  <script src="script/main.js"></script>
</body>

実行結果

バッチリ動きましたね。

参考記事

Markdown記法 チートシート