落ちゲーアプリ作成19（ゲーム開始前の襖移動２）
お疲れ様です。
なかなかオリアプに手がつけれていませんが、少し進捗がありました。
JavaScript を使って、違う要素をクリックすることで襖を開くことに成功しました。
参考記事は以下
【JavaScript】animate()でアニメーションの再生/停止 - ガジェット・テクノロジー・暮らしの情報サイト/ライフハック『MONO365 -Color your days-』
ゲームスタート前は襖が塞がっていて、ボタンを押すと襖が開くようにします。
一旦開くとスタート位置に戻ってきてしまって、また襖が閉まった状態になってしまうので、ゲーム実行時（10秒間）はずっと開く方向に動きっぱなしという設定にしたいと思います。
最初に animate で動きをつけましたが、クリックしなくても１回目の動作をしてしまうので動きを定義したすぐ後に openLeft.pause(); を記述することで解消しました。
その後クリックをイベント発火にした openLeft.play(); を記述することで動きをつけました。これによりBGMを鳴らすことができるはず。
js のコード内容はこんな感じです。
function gamestart() {
const openLeft = document.querySelector('.fusuma_left').animate(
[
{ transform: 'translateX(0)' },
{ transform: 'translateX(-2000%)'}
],
{ duration: 11000 }
);
openLeft.pause();
const openRight = document.querySelector('.fusuma_right').animate(
[
{ transform: 'translateX(0)' },
{ transform: 'translateX(2000%)'}
],
{ duration: 11000 }
);
openRight.pause();
document.querySelector(`.sound_start`).addEventListener('click', () => {
openLeft.play();
openRight.play();
});
};
if(document.URL.match(/new/)){window.addEventListener('load', gamestart)};
その前に、タイマー表示と時間で自動的に終了画面に遷移するのも止めなければいけません。
その他の勉強と並行で進めていきたいと思います。
落ちゲーアプリ作成18（ゲームスタート前の襖移動）
前回に引き続き、今回もゲームスタート前に襖を設定し、ボタンにより襖が開く動作を入れていきたいと奮闘中。
j-query を導入する方法もあるらしいのですが、よくわからないので、css でやっていきたいと思っています。
CSS3のtransitionで使えるイベント〜transitionのトリガー | IT工房｜AI入門とWeb開発
以前 css で動きをつけた時は、@keyframes アニメーション名 {アニメーション内容} で行いましたが、今回はボタンクリックをトリガーに襖を開くだけなので、いけるのではないかと思っていましたが、難航。
サンプルのコードをVSコードに写していじっていると、子要素か兄弟要素にのみ反応するようで、兄弟の子要素同士では反応しませんでした。
これを参考に、
html.erb を以下にし、
<%= image_tag "襖１左.jpg", class:'fusuma_left' %>
<%= image_tag "襖１右.jpg", class:'fusuma_right' %>
<a class="sound_start">音ありでプレイ</a>
<a class="no_sound_start">無音でプレイ</a>
css を以下にして、
.sound_start {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
padding: 8px;
background-color: blue;
border: 1px solid black;
transition-property :all 1s;
}
.no_sound_start:hover ~ .sound_start {
left: -50%;
}
やってみたが、動かず！
原因不明で、また時間のある時に進めていきます。
ITパスポートや、カリキュラムの復習、カリキュラムの付属カリキュラムである java の勉強（IntelliJ がうまく動かずなかなか進まない）、就職活動を同時進行で行なっており、なかなか一つずつを大きく進めることができていませんが、引き続き頑張っていきます。
Java勉強
就職活動続いています。どうも僕です。
就職活動をしていると Java をメインの言語で利用している企業が多いようです。
スタートアップではそれぞれなのかもしれませんが、大きい企業になるほど Java を利用しているようです。記事でもそういうものを見ました。
実際僕が選考進んでいる会社でも Java を使用しているらしく、
「入社前に勉強しておいた方がいいことはなんですか？」
と質問したら AWS の資格と Java ということでした。
なので数日前より Java （スクールのカリキュラム内にあるもの）を学習しております。（前置き長くなりました。）
class Main { public static void main(String[] args) { //ここに処理を記述する } }
まず Java はこの言葉をテンプレートで記述する必要があるらしく、正直意味が分かりません。
static は「静的」という意味、 void は「何もない」みたいな意味、 string は「紐、人繋がり」的な意味、 args は「引数」です。
ここは何もカリキュラム内に説明がないのでおいおい慣れていこうと思います。
class Main { public static void main(String[] args) { System.out.println(1000 + 2000); System.out.println(3000 - 1500); System.out.println(50 * 40); System.out.println(600 / 15); System.out.println(5 % 2); } }
System.out.printlnは、（）で囲んだ中身を出力するメソッドで、Rubyのputsに相当するものだそうです。
つまり{}内の計算式が出力されます。
次に Java で配列を使用する際は、以下の手順が必要です。
① 配列の宣言を行う
② 配列の要素を作成し、配列に代入する
③ 配列の要素に値を代入する
class Main { public static void main(String[] args) { int[] scores; scores = new int[3]; scores[0] = 1; scores[1] = 5; scores[2] = 10; System.out.println(scores[0]); System.out.println(scores[1]); System.out.println(scores[2]); } }
int scores;
sores = new int[3]; は
int scores = new int[3] にもできます。
また、
int[] scores = {1,5,10} にもできます。
配列の長さは一度決めたら変えられないようですが、ArraList を利用すると変えられるようです。ArraListは「可変長配列」を使用するための仕組みです。可変長配列とは、文字通り長さ（要素数）を変更できる配列のことです。
import java.util.ArrayList; class Main { public static void main(String[] args) { ArrayList<Integer> scores = new ArrayList<Integer>(); scores.add(1); scores.add(5);
System.out.println(scores.get(0));
System.out.println(scores.get(1)); }
}
こんな感じで配列を追加？することができるようです。
ちなみに ArraList はライブラリみたいなもので、それを呼び出して使用しているということです。
わからないことばかりなのでブログで発信して慣れていこうと思います。
落ちゲーアプリ作成17（BGM鳴らすためにゲーム画面にスタート前の襖の画面追加）
ゲーム中にBGMを鳴らしたいので、画面移動とともに自動スタートでなく、画面移動すると襖の画面になって、音声ありプレイと、音声なしプレイを選べるようにしたいと思いました。
画面移動で自動で音声再生の仕方があるっぽいけど、よくわからないのと、いきなり音が鳴るとびっくりするのと、音を鳴らしたくない人もいると思うので、対応したいと思います。
以前の自分の記事
落ちゲーアプリ作成７ - hibikousinnkibouのブログ
昔はオートプレイで音楽を鳴らすことができたようですが、人のクリック等の操作がないと音が鳴らせないみたいなので、ゲーム開始前に音声ありプレイを押してスタートするとBGMが鳴る仕組みにしたいと思っています。
ちなみに、この襖をスタートボタンを押すと左右に開くように設定しようと思います。
方法は左右の襖を gimp を利用して二つに分けて、 position:absolute; でそれぞれ位置を設定。
ボタンを押すと、以前の記事で紹介した
落ちゲーアプリ作成９ - hibikousinnkibouのブログ
の方法で襖が動くようにするという方法を取ります。
css で動きはつけましたが、:active を原因として動いてほしいので、また時間をかけて取り組んでいきます。
ITパスポート勉強（知的財産権）
ITパスポートの勉強を初めています。
プログラマーとして最低限の知識があるということを証明したいと思っています笑
とはいえ最初はストラテジ系の分野のなので一般教養に近いかもしれません。
元銀行員なので、決算書の内容までは分かりましたが、今日は知的財産権等の箇所に取り組みました。
知的財産権とは、①著作権、②産業財産権、③その他の権利に分かれています。
著作権は創作物に対する権利であり、申請しなくても権利が発生する無方式主義です。
説明書やプログラムや写真などです。（文化庁が管理）
プログラム言語やアルゴリズムやプロトコル（プログラム言語を使うときの約束）は著作権法で保護されない。
産業財産権の種類は、①特許権、②実用新案権、③意匠権（物品のデザイン保護の権利）、④商標権（トレードマークやサービスマーク保護の権利）の４種類。申請が必要で特許庁が管理しています。
その他の権利について、営業秘密と不正競争防止法が気になりました。
はま寿司のニュースが頭に浮かびました。
営業秘密に必要な３つの条件がありまして、①秘密管理性（マル秘文書や秘密保持契約の事項）、②有用性（実験結果や顧客情報）、③非公開性（一般に知られていない情報）です。
営業秘密を守るための法律が不正競争防止法です。
この法律に触れる行為は、営業秘密の不正取得、コピープロテクトを外す装置の提供、他社の商品名に似たドメインの不正取得などです。
その他、セキュリティ関連法規や労働関連法規についても学びましたが、プログラマーとしては、著作権法に引っかからないようにしないといけないので興味が湧きました。
出来るだけサクッと勉強して資格取得を目指します！
落ちゲーアプリ作成16（ランダム落下について）
落ちてくる忍者のランダム化に取り組んだのですが、
落ちてくるスピードをランダムにするのはとても簡単でした。
下記の記事を参考にしました。
【JavaScript入門】乱数の作り方(範囲指定/重複なし/ランダム文字列) | 侍エンジニアブログ
コードがめちゃくちゃブサイクですが、
// スピードA団
const random1 = Math.floor( Math.random() * 2000 ) + 17000;
document.querySelector(`#ninjas_a`).animate(
[
{ transform: 'translateY(0)' },
{ transform: 'translateY(3000px)' }
],
{duration: random1}
);
これをA、B、Cと作成することによってそれぞれのスピードを指定の範囲内でランダムにしました。
Mathに関しては以下の記事参照
一応小数点以下を切り捨てる floor を利用し、3000px を17秒〜19秒？で落ちるようにすることにしました。
その後、 css で左右とスタート位置を設定している忍者の位置もランダムにしようとしたのですが、 css で乱数を使用することは難しいらしく、 JavaScript を利用した以下の記事しか見つかりませんでした。
内容も理解するのに時間がかかりそうなので、またの課題にしたいと思います。
引き続き就活頑張りながら進めていきたいと思います。
落ちゲーアプリ作成15（ポップアップの表示）
ゲームの途中離脱ボタンが右上に設定してあるのですが、万が一誤って押してしまった場合にゲームに戻れるようにポップアップボタンがあると良いなと思ってました。
confirm メソッドを利用して、下記の記事と下記の本のp308を参照にして作成しました。
【JavaScript入門】confirmで「はい」「いいえ」のダイアログを出す | 侍エンジニアブログ
結果としては、
const gameRetire = document.getElementById("game_retire")
gameRetire.addEventListener('click',(e) =>{
const response = window.confirm('本当に戻りますか？');
if(response) {
}
else {
e.preventDefault();
};
})
と表示して、 html で記述した
<%= link_to "トップへ戻る" ,root_path, id:"game_retire" %> を else の場合に実行されないようにすることに成功したが、忍者が落ちることと、時間表示が止まりませんでした。
JavaScript は一時停止は基本しないということなので、どうやら難しいようです。
また時間のある時にやってみようと思います。
