javascriptで作る野球拳｜あにまん掲示板

1二次元好きの匿名さん22/03/19(土) 20:29:38

差分スレの主があげた画像使って野球拳を作っていいよと言ってくれたので

野球拳をjavascriptで作るスレです

女の子の画像は↓の差分スレからいただきました

上の口からは感謝しかありませんね

下の口からは違うもんが出てくるんですけどねふひひ

ついこの前差分スレで絵を描いていました｜あにまん掲示板忙しさで絵を描けなくなりましたが土日くらい絵は描けるので時間かけて差分描いていこうと思います全身だと時間がかかるのでこの範囲だけでいろいろやっていきます以前のスレより反応は遅めになりますbbs.animanch.com

他にはじゃんけんの手の画像を使ってますがそれはいらすとやのものです

かわいいフリー素材集いらすとやは季節のイベント・動物・子供などのかわいいイラストが沢山見つかるフリー素材サイトです。www.irasutoya.com

>>5

2二次元好きの匿名さん22/03/19(土) 20:31:38

公開はするつもりなの？

>>3

3二次元好きの匿名さん22/03/19(土) 20:33:25

>>2

キャプチャは乗っけるけど野球拳scriptを置く場所がないという事実

少なくとも現時点ではここで作ったものを他所で公開は考えてないです

4二次元好きの匿名さん22/03/19(土) 20:33:54

まず大雑把な仕様ですが

1.プレイヤーがじゃんけんの手を選べる(どの手を出すかボタンを押して選択)
2.選んだ手に応じて画面上のプレイヤーの手の画像が変化する
3.プレイヤーが手を選択すると女の子の手をランダムで決定する
4.プレイヤーの手選択時と同様に女の子の手の画像も変化する
5.プレイヤーの選択した手と女の子の手でじゃんけんの勝敗を判定する
6.勝敗の判定結果に応じて女の子の画像を以下の通り更新する
　6-1.あいこ→更新なし
　6-2.プレイヤー勝利→女の子が脱ぐ
　6-3.プレイヤー敗北→女の子が着る
7.女の子が脱げなくなったら野球拳終了(プレイヤーが手を選択できないようにする)

上記が実現できるように作っていきます

>>10 >>12

5二次元好きの匿名さん22/03/19(土) 20:38:28

どういうのかイメージがつかねえよカスって言われそうなので先に画面から

画像右側にあるテキストがページのソース(htmlファイル)

このソースが画像左側のように表示されます

画像サイズやボタンの表示など見た目に関わる部分は画像右側7行目記載の「style.css」ってファイルで定義してます

cssファイルはページの見た目いじる時に使うものです

ただ、今回は野球拳scriptの話なのでcssの話は詳しくしません

この状態では画像左側に表示されているボタンを押しても特に何も起きません

あくまでも見た目それっぽく整えただけです

見た目が整ってるだけでも>>1よりだいぶマシですね

何か腹立たしいなついでに違うもんまで勃ってきたわ

6二次元好きの匿名さん22/03/19(土) 20:43:45

画面だけのソースを修正してボタンを押すとプレイヤーの手の画像が変化するようになりました
先に挙げたソースとの違いは以下の通りです

・7行目に「script.js」を読み込む行に追加
・20-22行目の各ボタンを押したときにselectUserHand()関数を実行するように修正
　※onclick="selectUserHand()"を追加
　※onclick="selectUserHand()"はクリックされたらselectUserHand()を実行するという意味
　※selectUserHand()の処理内容や引数の「ROCK」等はscript.jsにて定義

次でscript.jsの中身を見ていきます

>>7

7二次元好きの匿名さん22/03/19(土) 20:49:34

script.jsの中身です

1-9行目は処理で使う定数の定義です

ちなみに、1行目とかの「//」で始まる行はコメントと言って処理自体には影響しませんが

後から見直したり他人が見た時に「これなんだっけ？」となった場合にわかりやすいため

非常に助かります

この画像にある分だとコメントなくても見ればわかるわカスとか言われそうですが

まあそれはさておき

11行目のfunction selectUserHand()が画面のボタン押下時に呼び出される処理です

15行目で画面上の「userHandImage」というidの要素を取得しています

※>>6のソースでいうと24行目にある要素

※>>6の画面でいうと右下のぐーが表示されている要素

selectUserHand()は画面から押されたボタンがぐー/ちょき/ぱーのどれかを受け取り、

15行目で画面上の「userHandImage」要素を取得した後に

16行目の「updateHandImage()」で手の画像を更新しています

updateHandImage()は20-23行目の処理です

21行目で第二引数handに応じた画像を決定し、

22行目で第一引数elementのsrcを書き換えています

8二次元好きの匿名さん22/03/19(土) 20:52:24

差分スレ作者です
頑張ってください

>>9

9二次元好きの匿名さん22/03/19(土) 20:54:07

>>8

うおーっ

おれだーっ

結婚してくれーっ

10二次元好きの匿名さん22/03/19(土) 20:56:00

画面からselectUserHand()を実行するとこの通り

userHandImageで表示されている画像が変化します

例ではちょきボタンをクリックすることで

・selectUserHand(SCISSORS)実行

・selectUserHand(SCISSORS)からupdateHandImage(userHandImage, SCISSORS)実行

・updateHandImage(userHandImage, SCISSORS)実行時、21行目でimgSrcが下記の値になる

　「./img/janken_2.png」

　※21行目のIMAGE_SRC_PATHはscript.jsの9行目「./src/」に置き換えられる

　※21行目のhandはselectUserHand()から呼び出されるときの第二引数SCISSORSに置き換えられる

　※SCISSORSはscript.jsの4行目により「2」に置き換えられる

という処理が実行されています

これで>>4の仕様1、2が実現されました

11二次元好きの匿名さん22/03/19(土) 21:00:53

言い忘れていましたが使う画像は当然ちゃんと置かないといけません
先にあげたものでは画面htmlファイルを置いているフォルダの子フォルダとしてimgフォルダを作り、
そこに女の子の画像やじゃんけんの手の画像を置いています
※この時点では女の子の画像は初期表示の状態のみ

12二次元好きの匿名さん22/03/19(土) 21:01:57

>>4

6-3.プレイヤー敗北→女の子が着る

ここがシビア

だから差分個数が必要最小限だったんですね

>>13

13二次元好きの匿名さん22/03/19(土) 21:04:41

>>12

そうです

テストしている間に女の子と一進一退の攻防を繰り広げていましたor2

>>40

14二次元好きの匿名さん22/03/19(土) 21:06:07

次に仕様の3、4、5を実現します
画面の変更は特になし、jsのみ修正となります

修正内容は

[定数系]
・8-13行目にじゃんけん結果の定数を追加

[selectUserHand()]
・25行目に女の子の手をランダムで決定する処理を追加(仕様3)
・29-30行目に女の子の手の画像を更新する処理を追加(仕様4)
・32-33行目に勝敗判定の処理を追加(仕様5)
・35-43行目に勝敗判定結果を画面に表示する処理を追加
　※仕様6だと女の子の画像を更新することになってるけどここではまだ画面にメッセージ表示するだけ

[judge()]
・仕様5のために新規追加(この画像には映っていない)

仕様5のために追加したjudge()は次で見ていきます

>>16

15二次元好きの匿名さん22/03/19(土) 21:12:12

画像の54-78行目がじゃんけんの勝敗を判定するjudge()の内容です

まず57行目でuserHandとgirlHandの値を比較し、
等しければ同じ手であるとして判定結果「あいこ」をreturnしています
returnされればjudge()の処理が終了するため62行目以降の処理は実行されません
※呼出元のselectUserHand()に処理が戻る

あいこじゃなければ62行目以降の処理が実行されます

65行目で勝敗判定のためにuserHand % 3 を計算しています
userHandの値は定数ROCK(1)、SCISSORS(2)、PAPER(3)のどれかになるため、
3で割った余りは63-64行目記載の通りになります

このmod3userHandとgirlHandを68行目で比較してどっちが勝ったか判定します
68行目の比較が真なら72行目の「かち」return、偽なら77行目の「まけ」returnが実行されます

16二次元好きの匿名さん22/03/19(土) 21:19:59

judge()処理が終わると呼出元のselectUserHand()に処理が戻ります

>>14画像の35-43行目の処理で、judge()の処理結果resultをもとに

画面に表示するメッセージを決定しています

画面上での動作はこの通りになります

※例ではちょきボタンをクリック→女の子の手はランダムでぱーに決定→かち　判定

17二次元好きの匿名さん22/03/19(土) 21:26:03

次に仕様6、7を実現します

ただ、それだけなら画面のソースは変更しなくていいんですが
仕様7を実現すると野球拳終了後に何もできないため、27行目のリセットボタンに
onclick="reset()"を追加しています
リセットボタン押してどうなるかは後で説明します

18二次元好きの匿名さん22/03/19(土) 21:32:09

仕様6、7実現のためのscript.js修正です
修正内容は以下の通りです

[定数系]
・19行目に女の子の全裸画像が何番目の画像かを表す定数を追加
・22行目の現在表示中の女の子が何番目の画像かを表す変数を追加
　※全部着てる状態(初期値)が1、あとは脱いだりする毎に更新される

[selectUserHand()]
・42行目で画面にメッセージを表示する処理を女の子の画像を更新する処理に変更

[updateGirlImage()]
・仕様6、7のために新規追加(この画像には映っていない)

[reset()]
・野球拳終了後に画面の状態をリセットするために追加(この画像には映っていない)

追加したupdateGirlImage()、reset()は次で見ていきます

19二次元好きの匿名さん22/03/19(土) 21:38:08

updateGirlImage()とreset()です

updateGirlImage()は引数resultをもとに女の子の画像を更新します
84-101行目にある通り、

・あいこ→更新なし
・プレイヤー勝利→女の子が脱ぐ
・プレイヤー敗北→女の子が着る

という仕様6-1、6-2、6-3を実現するようになっています。

女の子が全部着てる状態でプレイヤーが負けると(これ以上着るものがないので)
95行目で何もせず処理を終了しています。

逆に女の子の脱ぐものがなくなると104-108行目の処理でじゃんけんのボタンを
disabled=true(押しても反応しなくなる)にして仕様7の野球拳終了を実現しています。

reset()は画面のリセットボタンをクリックすると実行されます
じゃんけんのボタンがdisabled=false(押したら反応する)になり
手の画像を初期値と同じぐーにして
女の子に服を全部着せます

>>22 >>25

20二次元好きの匿名さん22/03/19(土) 21:44:39

これで、この画像のように勝てば女の子が脱いでくれます

21二次元好きの匿名さん22/03/19(土) 21:49:07

逆に負けたら着てしまいます

22二次元好きの匿名さん22/03/19(土) 21:57:26

これは全部脱いでもらった状態です

女の子の脱ぐものがないので>>19の通りupdateGirlImage()の104-108行目の処理で

じゃんけんのボタン3種がdisabled=trueにされています

>>25

23二次元好きの匿名さん22/03/19(土) 22:00:00

ちょくちょく使われてるこの辺に投げて、消えるまでってとこかな

https://d.kuku.lu/index.php

応援しているぞ

>>24 >>43

24二次元好きの匿名さん22/03/19(土) 22:02:31

>>23

ありがとう

スレがひと段落ついたら詳しく見てみます

25二次元好きの匿名さん22/03/19(土) 22:04:25

>>22の画面でリセットボタンを押して女の子に服を着せてあげました

>>19の通り画面が野球拳で脱がせ始める前の状態にリセットされています

服を着たということはまた脱げるということです

26二次元好きの匿名さん22/03/19(土) 22:06:39

何言ってんのか分かんねーけどスゲーや

>>29

27二次元好きの匿名さん22/03/19(土) 22:06:41

以上、javascriptで作る野球拳でした
まあ処理に改良の余地はありますがちゃんと動いてくれるので完成です
ベースはできてるので画像を別の娘に変えたりも簡単です

しかし女の子の差分画像はいいですね
服を着てる姿と脱いでる姿がわかりやすく比べられてたいへんエロ素晴らしい
心のムスコが何度でも元気になるというものです

>>28

28二次元好きの匿名さん22/03/19(土) 22:08:59

>>27

こちらこそ喜んでもらえて何よりです

極力服装も増やしていくつもりです

>>29

29二次元好きの匿名さん22/03/19(土) 22:12:29

>>26

差分エロっていいよねという話です

差分スレであがってる画像がエロいという重要さに比べれば俺のscript解説は些事です

>>28

ムスコがお世話になっております

いやほんとありがとうございます

30二次元好きの匿名さん22/03/19(土) 22:12:55

ひと段落ついたけど教えてもらったファイルなうとやら確認する前にちょっと離席

質問とかあったらどうぞ投げたってください
戻ってきたら確認・回答できるだけします

31二次元好きの匿名さん22/03/19(土) 22:20:13

ゲーム的な完成度を高めるなら画面レイアウトの見直しやボタンの画像化とかかな
あるいは単純な画像の表示ではなくキャンパスを用いることで、パーツごとに分けた画像を重ねて表示し、透過率を弄ることで脱ぐ表現をするとか
まぁ後者までいくとhtml5の領域だけど

>>34

32二次元好きの匿名さん22/03/19(土) 22:22:44

じゃあせっかくだから質問じゃないけど思い切って、スレ主にも差分主にも無茶言ってみようかな
アニメーションループで格ゲーみたいに状態を呼吸してる風に小刻みに上下左右に揺らさせてみるのはどうだろう
だいぶ生命感を感じられる様になると思うんだ
いちいち全服装で差分は作ってられないから、服装レイヤーだけ切り出したのをスクリプトで素体の上に重ねる格好で上体の揺れに合わさせて……
……うん

>>33 >>34

33二次元好きの匿名さん22/03/19(土) 22:28:57

>>32

こちらのスレで回答していいかわかりませんが

顔だけを上下に動かすことはレイヤー的にできそうですが呼吸だと肩などいろいろ絡むので難しいです

34二次元好きの匿名さん22/03/19(土) 23:26:33

>>31

>画面レイアウトの見直し

美術の成績くっそ低かった俺に悲しき現在……

canvasは普通に勉強不足なんですぐにはできませんが

ちょっと見てみます

>>32

キャラが微妙に↑→↓←↑……って揺れる感じですかね

無茶っすすみません

35二次元好きの匿名さん22/03/19(土) 23:30:34

ファイルなうに置いてみたけどダウンロードしようとしたら安全上の理由とやらで

ブラウザの機能によって警告・拒否されますね……まあ持ち主を守ろうとしてくれる良い子だ

一応、警告を無視してあえてダウンロードすることも可能なようなのでurl貼りますが

ダウンロードするかどうかは自己責任でお願いします

ファイルなう - アップロードされたファイル野球拳.zip (933 KB)d.kuku.lu

>>36 >>40

36二次元好きの匿名さん22/03/19(土) 23:50:23

>>35

乙ー動作確認したよー！

>>37

37二次元好きの匿名さん22/03/19(土) 23:57:22

>>36

ありがとうございます

自分の環境で動かした感じ大丈夫そうでしたが、そちらでは問題なかったでしょうか？

>>38

38二次元好きの匿名さん22/03/20(日) 00:21:17

>>37

バッチシよー！

>>39

39二次元好きの匿名さん22/03/20(日) 00:58:49

>>38

や　っ　た　ぜ

40二次元好きの匿名さん22/03/20(日) 01:10:30

>>35でアップした版の画面はこちら

画像上部のメッセージは何となく追加しただけです

>>13で反省というか後悔したので

「女の子をぐーしか出せない身体にする」チェックボックスを追加しました

このチェックボックスがONの間は女の子の出す手はぐー固定になります

OFFにするとまたランダムになります

※画像の枚数増やした場合の動作確認用にローカルで追加した機能ですが

　せっかく追加したのでファイルなう版にも残しておきました

41二次元好きの匿名さん22/03/20(日) 04:30:38

保守

42二次元好きの匿名さん22/03/20(日) 08:09:13

本当にいろんな人の才能が集まっているな

43二次元好きの匿名さん22/03/20(日) 09:57:36

>>23

ふと思いましたがここにあにまんでは修正してる絵の無修正版を出せば野球拳も反映できますか？

>>44

44二次元好きの匿名さん22/03/20(日) 13:12:45

>>43

横レスですまんけど規約によると「性器や性行為を連想またはそれと認識できる投稿」はNGらしいから完全無修正は流石にダメかも

乳首とかまでならセーフそうだけど

45二次元好きの匿名さん22/03/20(日) 13:52:40

TKBの差分です

野球拳のアップデートにご使用ください

ファイルなう - アップロードされた複数のファイル野球拳風すっぽんぽん両手上げ.jpeg, 野球拳風すっぽんぽん.jpeg, 野球拳風すっぽんぽん隠し.jpeg, 野球拳風パンツ一枚.jpeg (409 KB)d.kuku.lu

>>46 >>56 >>57

46二次元好きの匿名さん22/03/20(日) 15:47:24

>>45

ありがとうございます

script弄ってこちらも再度アップします

>>47

47二次元好きの匿名さん22/03/20(日) 21:13:14

>>46

ありがとうございます

ダウンロードさせていただきましたが絵の小ささが若干気になりました

あと全裸差分は内股のほうがよろしければ再アップロードします

>>48

48二次元好きの匿名さん22/03/20(日) 21:45:49

>>47

ふひひ

せっかく描いていただいたものなので大きめに表示できるようにちょっと修正してみました

※次以降のレスで解説

ファイルなう - アップロードされたファイル野球拳.zip (1.07 MB)d.kuku.lu

>>68

49二次元好きの匿名さん22/03/20(日) 21:52:49

昨日あげたやつとの修正点(画面)

画像右側のソース15行目、女の子の画像を表示している要素の親に
id="girlImageParent"とonclick="expand()"を追加

これにより、女の子の画像をクリックすると女の子が大きく表示されるようになります
※処理については後で解説

>>52 >>55

50二次元好きの匿名さん22/03/20(日) 21:52:54

くくく…ゲーム作り楽しいですよね…

>>51

51二次元好きの匿名さん22/03/20(日) 21:54:55

>>50

描いてもらった女の子を脱がせていく悦び……！(すけべ)

52二次元好きの匿名さん22/03/20(日) 21:56:48

>>49の画面で女の子をクリックするとこのように画面中央に大きめに表示されます

この状態で画面(女の子か背後の黒い部分)をクリックすると>>49のサイズに戻ります

53二次元好きの匿名さん22/03/20(日) 21:57:10

こういうの見てると脱衣ブロック崩しとかjavaの脱衣麻雀も思い出す

>>54

54二次元好きの匿名さん22/03/20(日) 22:07:57

>>53

ここでたっぷり思い出してください

そして差分エロの良さにも目覚めてください

55二次元好きの匿名さん22/03/20(日) 22:08:41

昨日あげたやつとの修正点(script)

script.jsに以下の処理を追加しています。

[expand()]

画像を通常表示している際に画像の親要素(>>49でid="girlImageParent"になってる要素)を

クリックすることで実行されます

ソース中のコメントにもありますが、画像とその親の要素を拡大表示用のstyleを定義したidに変更しています

また、拡大表示からもとに戻すためにonclickイベント時の処理をexpand()からreduce()に変更しています

[reduce()]

画像を拡大表示中に画像の親要素(>>49でid="girlImageParent"になってる要素)を

クリックすることで実行されます

ソース中のコメントにもありますが、画像とその親の要素を通常表示用のstyleを定義したidに変更しています

また、通常表示から拡大表示にするためにonclickイベント時の処理をreduce()からexpand()に変更しています

56二次元好きの匿名さん22/03/20(日) 22:15:57

昨日あげたやつとの修正点(script)(2)

>>45でいただいた画像を取り込んだら差分枚数増えたため

19行目の定数の値を修正しました

野球拳の差分画像の枚数増やす場合は増やした画像の枚数にあわせて

この定数を修正するだけで対応可能です

※用意する画像は初期表示のファイルを1.jpgとして、それ以降を2.jpg、3.jpg...n.jpgにして

　imgフォルダに予め置いておく

57二次元好きの匿名さん22/03/20(日) 22:22:43

>>45でいただいた画像を取り込んでるから脱がせてくとtkb見られるし

画面上で画像クリックすると大きいサイズで表示できます

ここの掲示板の規約的に画面キャプチャ載せられないので載せませんが

なお、拡大表示時の画像の大きさは画面サイズというかブラウザのサイズに依存するので

ウィンドウ最大化するのがオススメです

58二次元好きの匿名さん22/03/21(月) 02:12:31

何かするかもしんねえから保守

59二次元好きの匿名さん22/03/21(月) 13:03:26

保守

60二次元好きの匿名さん22/03/21(月) 16:41:21

画面下部に女の子を選択できる仕組みを追加しました(ファイルなうにはまだ挙げてない)

これに関連して定数の設定まわり変更しようとしたら動かなくなって
一番戸惑っているのは俺なんだよね

まあタイポ系の話だったんだけど

>>61

61二次元好きの匿名さん22/03/21(月) 18:54:16

>>60

各キャラで必要な衣装・表情・TKBありましたら言っていただければまとめます

せっかく選べるなら

>>62

62二次元好きの匿名さん22/03/21(月) 21:04:15

>>61

い　い　の　!?

調子乗って差分スレに10以上お願いしてしまいました

他に何かあるかもしれませんがひとまずこれでお願いします(厚顔)

>>63

63二次元好きの匿名さん22/03/21(月) 22:58:59

>>62

ファイルなう - アップロードされたファイル茶髪娘野球拳.zip (1.37 MB)d.kuku.lu

できました

ご使用ください

他の衣服の希望もあればやります

>>64

64二次元好きの匿名さん22/03/21(月) 23:36:13

>>63

ありがとうございます

我が息子もたいへん喜んでおります

今日のところはscript修正して抜きますので、

次のリクエストよろしければ明日以降またお願いします

65二次元好きの匿名さん22/03/22(火) 09:01:25

保守

66二次元好きの匿名さん22/03/22(火) 19:29:54

差分スレでおねだりしてるのを待つ間に修正(予定)案の話でもするか……

67二次元好きの匿名さん22/03/22(火) 19:51:40

差分スレで要望ありましたセーラー服です

ファイルなう - アップロードされたファイル金髪娘野球拳.zip (734 KB)d.kuku.lu

>>69

68二次元好きの匿名さん22/03/22(火) 19:54:31

前回(>>48)からの変更(1)　画面

7-8行目

jsファイルを定数系(const.js)と処理系(script.js)に分割して読み込むよう修正

11行目

bodyのonload時にinit()実行するように修正

※init()は新規追加(後に説明)

16行目

imgのsrcをなし(空文字)に修正

※init()で設定する

32-38行目

女の子を選択できるようにselect追加

>>70 >>72 >>73 >>75 >>89 >>90

69二次元好きの匿名さん22/03/22(火) 20:00:23

>>67

ありがとうございますっ

画面更新しないではじめちゃった解説とりあえず進めます

ファイルなうに出すときは>>67も取り込ませていただきます

70二次元好きの匿名さん22/03/22(火) 20:11:53

前回からの変更(2)　script

※script.js

[定数系]

const.js作ったのでそっちにお引越し

[init()]

初期化処理(新規追加)

画面の読込完了時に実行されます

6行目で画面読込時にどの女の子が選択(初期設定)されているか取得し、

7行目でどの画像を使うか(0=全部着てる状態)を設定、

9行目で設定した画像を画面に表示させています

最初に選択される女の子は画面のselect内の一番目のoptionタグに設定されている子です

※>>68でいうと35行目のvalue="PANTS_SUITS"が設定されます

[selectUserHand()]

定数の定義が変わったので微修正

17行目で呼び出してるupdateHandImage()の第二引数がuserHandから

userHand.imageに変わってたりします

やってること自体は特に変わりありません

>>74

71二次元好きの匿名さん22/03/22(火) 20:26:16

前回からの変更(3)　script
※script.js

[updateGirlImage()]
定数の定義変わった影響でじゃんけん結果で女の子の画像変更する処理も修正あります

修正前はIMAGE_SRC_PATH + girlImageSrc + ".jpg"　って形で画像を決めていましたが、
修正後はGIRL[girl].IMAGE_SRC_PATH + GIRL[girl].IMAGE[girlImgNum]　って形で
定数GIRLを利用して画像を決めるようにしました
この修正で使用する画像を女の子毎にフォルダ分けできるようになり、またファイル名を連番にしなくてもいいようになりました
※詳しくは定数ファイルconst.jsの話をする時に説明(予定)

72二次元好きの匿名さん22/03/22(火) 20:41:57

前回からの変更(4)　script

※script.js

[reset()]

定数の定義変わった影響でリセット時の画像の決め方も修正しています

※updateGirlImage()同様、定数GIRLを利用するように修正

[changeGirl()]

画面で女の子を変更した際(>>68の画像34行目のonchange発生時)に実行されます

変数girlを画面で選択されたoptionタグに設定されている値に変更し、

reset()を呼び出します

73二次元好きの匿名さん22/03/22(火) 20:44:43

>>68の画面で「婦警」を選択するとこんな感じで女の子の画像が変わります

74二次元好きの匿名さん22/03/22(火) 21:09:39

前回からの変更(5)　script

※const.js

[ROCK、SCISSORS、PAPER]

前回まではROCK=1,SCISSORS=2,PAPER=3という定義で各定数は数値の情報しか持っていませんでしたが、

数値と画像の情報を持つように修正しました

これにより、画面でぐー(ROCK)ボタンをクリックした際に

勝敗判定のための数値だけでなく手の画像を変更するための情報も

まとめて取得できるようになりました

[HAND]

女の子の手をランダムで決定するために新規追加しました

修正前は手の情報=数値だったためMath.random()でそのまま決定できましたが、

手の情報=数値と画像に修正されたためMath.random()がそのまま使えないことによる修正です

script.jsでこの定数を使用するように修正しましたが、>>70の画像19行目の計算結果が

1→ぐー、2→ちょき、3→ぱー　となることは変わりありません。

定数GIRLはちょっと長くなりそうなので分けます

>>75 >>76

75二次元好きの匿名さん22/03/22(火) 21:41:45

前回からの変更(6)　script

※const.js

[GIRL]

女の子の画像に関する情報を定義した定数です

以下の情報を持っています

1.どの女の子か

>>74の画像の19行目、34行目の「PANTS_SUITS」や「POLICE」が該当します

これはscript.jsの処理のために、>>68の画像の35行目や36行目のoptionの値と一致している必要があります

2.女の子の画像はどこに置かれているか

各女の子の情報の中にある「IMAGE_SRC_PATH」で定義しています

>>74の画像でいうと20行目、35行目に該当します

IMAGE_SRC_PATHの値はgamen.htmlから見た画像の置き場所のパスを指定します

※画像は新しく追加した婦警ちゃん(POLICEの画像の置き場所)

※gamen.htmlから見ると「./(gamen.html自体の場所)」の子フォルダ「img」の更に子フォルダ「police」にあるため、

　POLICEのIMAGE_SRC_PATH(>>74の画像の35行目)は「./img/police/」にしています

3.どういった画像があるか

各女の子の情報の中にある「IMAGE」で定義しています

>>74の画像でいうと22-30行目(PANTS_SUITS)、37-50行目(POLICE)に該当します

女の子毎に画像の枚数は異なりますが、「,」区切りで好きなだけ定義できます

これはscript.jsの処理のために、実在の画像ファイル名と一致している必要があります

script.jsの処理により、ここで定義した順番が女の子の脱いでいく順番となります

※POLICEの場合、服全部着衣.jpegから始まって帽子脱ぎ→手袋脱ぎ……となります

>>76

76二次元好きの匿名さん22/03/22(火) 21:44:13

前回からの変更(7)　script

※const.js

※>>75の続きで定数GIRLの持ってる情報

4.どの画像が出たら野球拳終了か

各女の子の情報の中にある「NAKED_IMAGE_NUM」で定義しています

>>74の画像でいうと32行目(PANTS_SUITS)、52行目(POLICE)に該当します

script.jsの処理のために、これは画像の枚数ではなく(画像の枚数-1)と一致する必要があります

……あとついさっき気付いたんですがこの「NAKED_IMAGE_NUM」不要そうです(馬鹿)

77二次元好きの匿名さん22/03/22(火) 21:58:41

そして作っていただいた金髪ちゃんを取り込んだものがこちらになります

ファイルなう - アップロードされたファイル野球拳.zip (3.16 MB)d.kuku.lu

78二次元好きの匿名さん22/03/23(水) 07:14:35

保守

79二次元好きの匿名さん22/03/23(水) 16:33:17

なんかする(予定)保守

80二次元好きの匿名さん22/03/23(水) 22:20:38

地球上の誰かがふと思った

「女の子の画像を追加・修正するときにgamen.htmlには手をつけずconst.jsだけ修正で済めばどれだけ楽だろうか」

というわけで修正版です

ファイルなう - アップロードされたファイル野球拳.zip (3.16 MB)d.kuku.lu

>>88 >>89 >>90 >>111

81二次元好きの匿名さん22/03/24(木) 07:46:17

保守

82二次元好きの匿名さん22/03/24(木) 12:17:17

また夜にでも(需要なさそうな)script解説するか……

>>83

83二次元好きの匿名さん22/03/24(木) 12:18:15

>>82

需要あります

お願いします

>>85

84二次元好きの匿名さん22/03/24(木) 19:20:43

差分スレの作者です
少し贅沢ですが、2人で野球拳勝負のようなものはできますでしょうか？

>>85 >>95

85二次元好きの匿名さん22/03/24(木) 19:29:41

>>83

やります

>>84

2人用に処理を修正する必要がありますが、修正する時間と差分画像をいただければ可能です

>>86

86二次元好きの匿名さん22/03/24(木) 19:33:33

>>85

ありがとうございます

ショタでも女の子でも希望あれば差分も作成していきます

ただショタの全裸は流石に隠しますが

>>87

87二次元好きの匿名さん22/03/24(木) 19:42:49

>>86

script解説しながら裏でムスコと相談します

相談して結論出たらよろしくお願いします

>>91

88二次元好きの匿名さん22/03/24(木) 19:56:32

>>80で入れた修正(1)

gamen.htmlのselect内のoptionを削除しました(画像の34行目)

何で消したかというと>>80にもある通り女の子の画像追加・修正する時に

gamen.htmlもあわせて修正しないほうが楽なので、いっそここではoptionを

定義しないことにしたというわけですね

じゃあどこでやるんだっていうと

optionの内容の定義→const.js

定義されたoptionの内容を画面に反映→script.js

という風にしています

その辺は次以降のレスで説明していきます

>>90 >>91

89二次元好きの匿名さん22/03/24(木) 20:02:55

>>80で入れた修正(2)

const.jsの各女の子の情報にDISPLAY_NAMEを追加しました

このDISPLAY_NAMEが画面上の女の子の表示名にあたります。

この画像に映っている分でいうと20行目のDISPLAY_NAME:"パンツスーツ"は

>>68の画像左側の「パンツスーツ」にあたります

>>90 >>91

90二次元好きの匿名さん22/03/24(木) 20:16:20

>>80で入れた修正(3)

script.jsのinit()に、画面のselect要素の子要素として

optionを設定する処理を追加しました

※画像の9-14行目

こいつはconst.jsに定義されている定数GIRLを見にいって、

optionのvalueに定数GIRLのキー(>>89の画像の19行目"PANTS_SUITS"とか

35行目"POLICE")を設定し、innerHTML(画面上で直接見える文字列)に

DISPLAY_NAMEを設定して画面のselect(>>88の34行目)の子要素として

optionを追加していってます

この処理をやると結果的に>>68の画像右側34-37行目のように

selectの中にoptionがセットされます

91二次元好きの匿名さん22/03/24(木) 20:29:27

>>87 >>88 >>89でscript(の修正内容)の解説は終了です

次に、画面の「女の子を選択」で選べる女の子を増やす手順をかいていきます

……が、1時間くらい(？)席離れる用ができたのでその後にします

92二次元好きの匿名さん22/03/24(木) 21:45:14

女の子を増やすための手順(1)
gamen.htmlを置いているフォルダ→子フォルダimgの中に
更に子フォルダ(例ではcheer_girl)を作成し、そのフォルダに
女の子の画像を置きます

ちなみに例で出している画像は差分スレに挙げられていたものです

>>93 >>94 >>112

93二次元好きの匿名さん22/03/24(木) 22:09:40

女の子を増やすための手順(2)

const.jsに>>92で追加した画像の女の子の情報を追加します

※画像の69-78行目

例では69行目を"CHEER_GIRL"にしていますが、これは他の女の子(例えば20行目の"PANTS_SUITS"等)と

被らなければ(javascriptがエラーを起こさない範囲で)自由な値が使用できます

また、70行目の"チアガール"は単に画面上での表示名なのでこれも(javascriptがエラーを起こさない範囲で)自由な値が使用できます

>>94 >>112

94二次元好きの匿名さん22/03/24(木) 22:19:39

女の子を増やすための手順(3)

手順というか>>92,>>93やった結果です

>>92,>>93を実施した後にgamen.htmlを開くと画像(左)のようになります

そこで「女の子を選択」の内容を見てみると画像(中)のように

>>93でconst.jsに追加したCHEER_GIRL(画面上の表示はチアガール)が確認できます

このチアガールを選択すると画像(右)のように>>92で置いた画像が表示されます

以上で女の子を増やす手順は終了です

95二次元好きの匿名さん22/03/25(金) 01:28:03

明日(というか今日)>>84やりたいけど用事あるからできるか怪しいな

作業始められるの日曜日あたりかも

96二次元好きの匿名さん22/03/25(金) 08:21:55

ほしゅ

97二次元好きの匿名さん22/03/25(金) 19:26:18

保守

98二次元好きの匿名さん22/03/25(金) 21:52:07

差分スレの作者です
いろいろ見返すと衣装がたくさんあるので、差分用の希望あれば少し修正したりします

>>99

99二次元好きの匿名さん22/03/26(土) 00:16:14

>>98

ありがとうございます

すみませんろくに何かできる状態じゃないため明日お願いします

100二次元好きの匿名さん22/03/26(土) 00:17:09

明日じゃねえや日付変わっとるからもう今日じゃ

101二次元好きの匿名さん22/03/26(土) 11:38:22

保守

画面作りつつリクエストしたいものとか整理する

102二次元好きの匿名さん22/03/26(土) 17:49:00

とりあえずこんな感じで画面左右にそれぞれキャラが表示されます
左右はそれぞれ別の画像ですが背景を良い感じに調整してもらったので
画面で見る分には1枚絵っぽくなります

>>105 >>111

103二次元好きの匿名さん22/03/26(土) 17:53:27

左側(プレイヤーキャラ？)が勝つと右側が脱ぎます
逆に左側が負けると左側が脱ぎます

勝ったほうが着るというルールは撤回されました

>>114

104二次元好きの匿名さん22/03/26(土) 17:55:00

画像をクリックすると拡大表示されます
この状態で画像(or背景の黒部分)をクリックすると表示がもとに戻ります

105二次元好きの匿名さん22/03/26(土) 18:01:14

>>102の画面下部のセレクタでキャラを変更可能です

106二次元好きの匿名さん22/03/26(土) 18:10:51

ある程度かたちにはなったので動作確認したら
またファイルなうあたりにどぴゅっと出します

まあ今から他にやることあるから何時になるかわかんないけど
きっと日付変わる前には

107二次元好きの匿名さん22/03/26(土) 20:04:28

俺の心の中のマスロゴが「(動いてるから)まあいいでしょう」したので

ファイルなう - アップロードされたファイル野球拳2.zip (2.33 MB)d.kuku.lu

>>108

108二次元好きの匿名さん22/03/26(土) 20:56:38

>>107

ありがとうございます！

109二次元好きの匿名さん22/03/27(日) 00:55:22

夜間保守

110二次元好きの匿名さん22/03/27(日) 06:16:42

保守

111二次元好きの匿名さん22/03/27(日) 16:09:48

前回(>>80)からの変更点(1)　gamen.html

>>102でもいいましたが画面左右にキャラ画像を表示して一枚絵っぽくしています

また、それにあわせて手の画像をキャラの横でなく下に表示するようにしています

>>112

112二次元好きの匿名さん22/03/27(日) 16:10:20

前回からの変更点(2)　const.js

キャラが左右二人になったため、キャラを表す定数を左用/右用でわけました

※画像に映ってるのは右(女の子)用ですが、見切れてる下のほうに左(男の子)用も定義しています

定数が持ってる情報(画像のパスとか)は変更ないため、>>92、>>93の手順でキャラを増やすことができます

※>>111画面下部のセレクタに選択可能なキャラが追加され、画面上で表示されるキャラを変更できます

113二次元好きの匿名さん22/03/27(日) 16:11:21

前回からの変更点(3)　script.js

[変数系]
キャラが増えたため、キャラの状態を表す変数を変更しました

(修正前)どのキャラか/脱衣がどの段階か表す変数(girl,girlImgNum)が別
(修正後)左右それぞれでどのキャラか/脱衣がどの段階か表す情報をひとつの変数(leftCharacter/rightCharacter)にひとまとめ

[init()]
キャラのセレクタ設定や画面上に画像の設定を行っていたものを
セレクタ設定のみにして、reset()を呼ぶ出すように修正しました
※画像設定の処理とか全部reset()でまとめられると気付いたため(馬鹿)

[reset()]
キャラやキャラの手画像の設定を左右それぞれ行うように修正しました

114二次元好きの匿名さん22/03/27(日) 16:13:24

前回からの変更点(4)　script.js(2)

[updateCharacterImage()]

>>103でもいいましたが、プレイヤーが負けたら対戦相手が着るというルールは撤回されました

その代わり、プレイヤーが負けたら左側のキャラ(プレイヤーキャラ)が脱いでくれます

※画像の128-131行目の処理

また、野球拳の終了条件を「対戦相手がこれ以上脱げなくなったら」ではなく

「プレイヤーキャラがこれ以上脱げなくなったらor対戦相手がこれ以上脱げなくなったら」に修正しました

[changeGirl()]

キャラ変更時の処理はreset()にまとめられたため、changeGirl()は削除されました

以上がキャラを増やしたことによる(主な)修正です

115二次元好きの匿名さん22/03/28(月) 00:28:04

自分でいうのも何だけど機能の観点ではもう発展性ない気がしてきたな

なんかこれやって欲しい(機能修正とか既存処理の説明とか)ってあります？
まあ俺も別に詳しくないんでできるかどうかわかんないですが

116二次元好きの匿名さん22/03/28(月) 12:00:55

保守

117二次元好きの匿名さん22/03/28(月) 22:52:34

ほしゅ
何か思いついたらいいが……

118二次元好きの匿名さん22/03/29(火) 09:16:43

余計なことひらめいた！(AA略)

119二次元好きの匿名さん22/03/29(火) 19:49:45

余計なこと閃いた修正 script.js

変数isProcessingを追加しました(画像3行目)
また、reset()に以下の処理を追加しました

1.処理の最初にisProcessingの真偽を判定(画像35行目)
　※isProcessing=trueなら処理中断(return)
2.↑でisProcessing=falseならisProcessing=trueに更新(画像39行目)
3.reset()本来の処理終了後、isProcessing=falseに更新(画像65行目)

これで何が起きるかというと、画面でリセットボタン連打した時なんかに
※1回目のreset()処理中に2回目のreset()処理要求が発生するケース

ボタンクリック1回目→isProcessingはデフォでfalseなので上記1の判定すり抜け
→上記2の処理でisProcessing=trueに更新
→ボタンクリック2回目→isProcessing=trueに更新されているため上記1の判定で処理中断
→ボタンクリック1回目の処理はそのまま継続される

という挙動になります

同様の処理を画面から直接呼ばれるselectPlayerHand()、expand()、reduce()にも追加しています