6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

#はじめに

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

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

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

#今回使う物

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

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

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

湯婆婆の流れは、

「名前を聞かれる」

「名前を褒める」

「名前から1文字ランダムに取得」

「発表」

「バグる時はバグる」(※今回は割愛)
という流れになります。

簡単だね。

#ソースコード

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

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>

#実行結果
Screenshot_2020-11-05-23-55-10-504_mobi.monaca.debugger.jpg

Screenshot_2020-11-05-23-55-20-760_mobi.monaca.debugger.jpg

バッチリ動きましたね。
#参考記事
Markdown記法 チートシート

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?