プログラミング学習

プログラミング学習。3か月目前半の記録②【ウェブカツで学習中】~オブジェクト指向アウトプットで自作ゲームを作ったよ~

更新日:

こんにちは、プログラミング学習に、平日1日平均8時間没頭しているぷちまま(@8JCPS844tsX5wLI)です。

 

↓学習の動機などはこちら。

プログラミング初心者のぷちままが当ブログを始めた理由と、勉強して実現させたいこと(ウェブカツにて勉強中)

初めて利害関係なく、日記ブログというのを作ります。 (広告は基本載せませんが、いいと思ったものは紹介するかも。)   ここでは、私がこのブログの開設に至った経緯と、プログラミングを勉強して実 ...

続きを見る

↓前回分はこちら

プログラミング学習。3か月目前半の記録②【ウェブカツで学習中】~オブジェクト指向アウトプットで自作ゲームを作ったよ~

こんにちは、プログラミング学習に、平日1日平均8時間没頭しているぷちまま(@8JCPS844tsX5wLI)です。   ↓学習の動機などはこちら。 ↓前回分はこちら   現在学習中 ...

続きを見る

 

現在学習中のプログラミング学習サイトはこちら⇒ウェブカツ(女性割引で学習中。現在オブジェクト指向部終了したところです。)

 

プログラミング学習3か月目前半で、できるようになったこと

この1か月、プログラミング周りで、できるようになったことは、本当大きいです。(ウェブカツ様様)

 

今までは「分かる」だったのが、アウトプットを重ねることによって、「できる」に変わりつつあることを実感しています。

私は、ウェブカツという学習サイトを利用しています。

そこの「ウェブサービス部」というところで、「フリマサイト」を作って、HTML、CSS、PHP、セキュリティ周りの勉強をしていくのですが、それを勉強したことによって、以下のことができるようになりました。

  • HTML、CSSである程度やりたいように配置ができるようになった。
  • PHPのデータベース登録や、セッション、ポスト周りが、ある程度何も見なくてもいじれるようになった。

3か月前には、まさか自分がここまでできるようになっているとは思ってもみませんでした。

 

3か月前は、ワードプレスの、テーマのカスタマイズとか、全くわかっていなかった、ド素人がです。

見よう見まねでわけわからない言語をコピペして、「あれ?動かない…」となっていましたが、今ならある程度触れるようになってしまいました♡

 

プログラミング学習2か月半~3ヶ月のアウトプット!簡単なゲームが作れるようになった!(モンスター倒しゲーム)

ちなみに、ここまでの学習のアウトプットの一つとして、ドラクエ風ゲームを作りました。

(動画のアップの仕方が分からず…追加でまたアップしますね。)

 

というのも、学習サイト(ウェブカツ)の「オブジェクト指向部」という章で、簡単なドラクエ風ゲームで学ぶのですが、

それが分かっているか、本当に自分で1から作れるどうかのアウトプットです。

メモ

本当は、ポケモンとか、育成ゲームとか考えていましたが、旦那がドラクエが良い!というので、ドラクエを拡張し、「モンスター倒しゲーム(笑)」を作りました。

人に遊んでもらって、感想をもらうのが、「勉強のモチベーション」にもつながるかな、と思ったので。

 

使った言語や仕組みなど

  • HTML、CSS、JQuery(JS)、PHP
  • Classなどオブジェクト周り

 

製作日数

2日

(ウェブカツのオブジェクト指向を、参考にはさせてもらいました。

ただ、実装は1からしました。)

 

機能やこだわった点

  • 勇者を選べるようにした
  • 4回倒したら勝ち
  • ドラクエ風タイプテキスト(JQueryのt.jsというプラグインが良かったです♡)
  • MP(マジックポイント)を作り、確率で「攻撃(30%)」「呪文(65%)」「混乱して自分を攻撃(5%)」するようにした
  • 見た目やアニメーション(ふわふわ浮かんだり…勇者をマウスオーバーすると絵が変わったり、MP0になると赤色になって点滅したり。)

 

とにかく、本物のドラクエっぽくなるために、「見た目」や「揺れる」なんてことを重視しました。

裏の機能が、めちゃくちゃ充実しているのももちろん大事だと思うのですが、

素人の旦那(笑)に「おっ!なんか様になっているやん!」って、1回でも思って遊んでもらえるようにしました。

見た目が良かったら、自分でもモチベーションが上がります♡

(背景がリピートしていますが、今回は、横幅を持たせたかったため、あえてリピートさせています)

 

苦労した点

Humanオブジェクト(勇者)の選択画面

Humanオブジェクトは、image画面をクリックして遷移させるようにしたのですが、

<input type="image">って、ポストしても、座標が入るようです…(私は何度POSTしても、空になりました…。)

試行錯誤した末、

<input type="submit">で指定して、背景画像を画像にしたりして何とか見た目を整えました。

(valueを表示させないようにするのも、地味に大変だった…。)

text-indent: -9999px;

はSEO的にあまりよくなさそうなので、

/* value表示させない処理 */
text-indent: 150%;
white-space: nowrap;
overflow: hidden;

で何とか解決しました。

 

防御方法

「勇者が防御」する=「相手の攻撃力を減らす」ということなので、

相手の攻撃メソッドの中にある「攻撃力」ってどうすれば減らせるんだろう…?と考えていましたが、

防御メソッド(public function protect($targetObj))の中に、相手の攻撃(attack)メソッドを入れて、そこから防御ポイントをマイナスすることで、相手の攻撃力を下げることができました。

 

 

もっとやりたかったこと

  • 体力メーター
  • 名前の登録→DBなどに保管
  • 人間とモンスター攻撃に間に間を持たせて、攻撃したら「ゆれる」アニメーション
  • 攻撃したら、モンスターが切られるアニメーション
  • ゲームオーバー時に何匹倒したかなどが表示される←やろうとしたけど、時間切れ

まだまだ、本ゲームアウトプットで、やりたいことはたくさんあったので、少し残念ですが…。

あまりにこだわって時間を取られてはしょうがないので、とりあえずここらで終了としておきます。

(上の部分は、気が向いたらまた実装していきたいと思います(*^^*))

 

これからの課題やアウトプットすべき&したいこと

10月末までの練習制限解除(ウェブカツには練習制限があります)まで、あと半月あるので、これを機に、

  • ウェブサービスを1つ作る
  • (できれば)1ページもののLPをいくつか作りたい
  • 作ったものをサーバーにアップロードして一般公開できるようにしたい

と思っています。

この時間を大切に、精進します(#^.^#)

-プログラミング学習

Copyright© ぷちままのブログ , 2020 All Rights Reserved Powered by AFFINGER5.