２年後には実際にプログラミングを授業の中で実施しなくてはなりません。
どんな授業を行うか、検証を兼ねて検討しています。
今回は、見えないモンスターを倒すゲームの制作です。
今回の学習成果
見えないモンスターと対決
<div id="result">見えないモンスターと対決</div>
これまでalert()で扱ってきましたが、今読んでいる書籍でwindow.alert()で勉強しているので、突然そんなことになっています。
が、window.は省略できるんですよね。
【確かな力が身につく】プログラミング学習進捗状況⑩
2020年10月にProgateでプログラミング学習をスタートしました。その後、11月にはドットインストールに乗り換えて学習を続けました。手を動かして頭を使わないと忘れてしまいそうです。そこで、書籍を購入しました。
muraumusic.com
CSSの記述
とうとう今回は無しです。
まぁ、それでもプログラムを書く上では問題ないわけです。
あくまでCSSはデザインだということですね。
ただし、この後で説明しているimgファイルが登場するような仕掛けを追加するのであれば、次のようなCSSぐらいは設定しておきたいものです。
img {
width: 150px;
height: 200px;
}
JavaScriptの記述
モンスターのHPは初期値で100の設定になっています。
勇者の攻撃力は、最大30ということですね。
ランダムで攻撃力が変わっていきます。
残念ながら攻撃力「１」というまさかのパターンもあります。
あと、何回の攻撃でモンスターを倒したのかが最後に表示されます。
Blogで表示すると少し厄介なのですが、単体でこのアプリを作るのであれば、勇者が経験値を得たのと同時に、勇者の画像がdocument.write()で出てくるようにするのもありです。
しれーっと「”」と「’」を使い分けていますが、そんなもんです。
document.write('<img src="yuusya_game.png">');
検討事項
いきなり攻撃して圧勝して勝ってしまいます。
モンスターは雑魚キャラだったのでしょうか。
ブラウザの種類によっては、window.alert()の出現時に、微妙に上下にアニメーションしてくれます。
ちょっと懐かしのDクエストっぽくて楽しいわけです。
スタートをクリックイベントか何かにしてみると、よりゲームらしくなりますね。
コメント