- -pv
スレッドの閲覧状況:
現在、- がスレを見ています。
これまでに合計 - 表示されました。
※PC・スマホの表示回数をカウントしてます。
※24時間表示がないスレのPVはリセットされます。

カードゲーム作ったを遊ぶためのサイト作成スレ2

1CGTT◆A1n7gQX4UY:2016/02/27(土)23:24:24 ID:xI8()
その2ですー
前スレ
http://toro.open2ch.net/test/read.cgi/hp/1455450071/l10
300名無しさん@おーぷん :2017/06/18(日)21:53:51 ID:NKh
①カード画像があって②選択して③表示する
301名無しさん@おーぷん :2017/06/18(日)22:47:58 ID:NKh
とりあえず作業場のURLを確保した
302名無しさん@おーぷん :2017/06/19(月)07:05:10 ID:9Qh
>>290
手札からフィールドに出すのだな?

http://milsol.gob.jp/
303名無しさん@おーぷん :2017/06/19(月)07:08:00 ID:9Qh
次の作成ステップとしては
・手札をクリックするとフィールドに出る

自分の手札がフィールドに出たあとに相手もフィールドに出す?
304CGTT◆A1n7gQX4UY :2017/06/19(月)09:38:46 ID:QHF
そうですね
まずはサイト自体をRubyで作成して、その後でアプリにするかどうかも考えてみましょうか
本スレの方であった提案も読んでくださると助かります
305CGTT◆A1n7gQX4UY :2017/06/19(月)09:45:04 ID:QHF
イメージとしましては
>>300
①小さいカード画像があり、②そこにマウスカーソルを合わせると③右側に詳細が大きく表示される
>>303
①カード画像にマウスカーソルを合わせた状態で②クリックすると出すかどうかの選択肢が出て、③出すを選ぶと場に出せる
といった感じです
自分と相手のカードを出す順番は、その時のアタッカー→ディフェンダーの順で行いたいと思ってます
(アタッカー、ディフェンダーはターンの終わりに入れ替わるので、毎ターン自分と相手の出す順番が変わるといった感じですね)
306CGTT◆A1n7gQX4UY :2017/06/19(月)09:48:19 ID:QHF
>>305は最終的なイメージなので、まずは簡単なものが作れればいいですね
307名無しさん@おーぷん :2017/06/19(月)12:05:48 ID:9Qh
本スレを読んだけど何が提案?
308CGTT◆A1n7gQX4UY :2017/06/19(月)12:15:43 ID:Jfp
自分の伝え方が悪かったですね
アプリにしたら良いのでは、という提案に一応直接目を通してほしかっただけなので
大丈夫です
309名無しさん@おーぷん :2017/06/19(月)19:31:20 ID:9Qh
アプリ作るという人がいたならやってもらったらええよ
310名無しさん@おーぷん :2017/06/19(月)19:39:19 ID:9Qh
こっちはこっちでやるからね
311CGTT◆A1n7gQX4UY :2017/06/19(月)20:33:07 ID:W9F
ただ、アプリを作るにしても対戦できる環境が必要だと思うので
さしあってはサイトの制作を進めていきたいですね
312CGTT◆A1n7gQX4UY :2017/06/19(月)20:53:42 ID:W9F
すみません、今後の方針の話ばかりになってしまいましたね
まずは手札(画像)をクリックすると場に出せるような
プログラムを作りたいです
313名無しさん@おーぷん :2017/06/20(火)00:43:36 ID:5oI
クリックで表示
http://milsol.gob.jp/tes02.rb
314CGTT◆A1n7gQX4UY :2017/06/20(火)17:13:24 ID:pCk
>>313
画像をボタンとして、
form内でtes02.rbに入力された情報を送り、
tes02.rb内で画像を大きく表示させる処理を行っている
といった感じでしょうか
間違っていたらすみません
315CGTT◆A1n7gQX4UY :2017/06/20(火)17:45:54 ID:pCk
書き込めるかな
316名無しさん@おーぷん :2017/06/21(水)20:45:24 ID:b5l
>>314
そう そのとおり
317名無しさん@おーぷん :2017/06/21(水)20:46:59 ID:b5l
次は手持ちカードの情報をどう表示するかだなぁ
318名無しさん@おーぷん :2017/06/21(水)20:48:38 ID:b5l
それとも
相手カードをどう処理するか
流れをちゃんと考えないとゲームにならないしね
319名無しさん@おーぷん :2017/06/21(水)20:50:47 ID:b5l
>>290のフィールドが
カードを出し合う場になるんだよね?

デッキとSPデッキってどういう役割?
320CGTT◆A1n7gQX4UY :2017/06/21(水)22:26:57 ID:BXn
>>319
デッキというのは文字通り山札ですね
SPデッキは、特定のマジックカードなどで呼び出せる特殊なモンスター(SPモンスター)を置いておくところです
システムを作る上での違いは、
カードを使って直接モンスターを呼び出すので、カードの順番はランダムにする必要がない、といったところでしょうか
321CGTT◆A1n7gQX4UY :2017/06/21(水)22:33:39 ID:BXn
先ずは手札のカード情報を作りましょうか、
情報は実際にゲームで扱うことを想定すると、
カード名、コスト、属性、タイプ、パワー値、ガード値、能力、特殊能力
に別けられますね
322CGTT◆A1n7gQX4UY :2017/06/21(水)22:39:47 ID:BXn
ただ、デッキからカードを引かなければならないので、
あらかじめ用意した20枚のカード情報から、3枚を手札として表示するようなものが作れればと思います
323CGTT◆A1n7gQX4UY :2017/06/21(水)22:42:24 ID:BXn
デッキからカードを引く際、
①決まった配列のカードからランダムに3枚引く
②ランダムに配列したカードの上から3枚を引く
の二通り考えられますが、実際のカードゲームの方式に近い②でやりたいと考えてます
324CGTT◆A1n7gQX4UY :2017/06/21(水)23:27:18 ID:BXn
>>321に加えてカードの画像もありましたね
とりあえず20枚の画像をランダムにシャッフルして、上から3枚を手札として表示するプログラムが作れるといいですね
325名無しさん@おーぷん :2017/06/22(木)06:09:19 ID:qZO
よくわからない
山札と手札は別物か?

大まかな流れがわかってから>>321のような詳細は後にする
326名無しさん@おーぷん :2017/06/22(木)06:14:08 ID:qZO
まず
対戦で使えるカードの枚数は自由なのか?

それと並べ方と並べる場の名称をはっきりさせよう
だれにでもわかるように
327名無しさん@おーぷん :2017/06/22(木)10:26:05 ID:iHp
そうですね
まずこのゲーム自体、トランプなどのように決まったカードだけで行う訳ではなく、様々な種類のカードから20枚選んで自分のデッキとして構成する
いわゆるトレーディングカードゲームの部類に入るかもしれないですね
一応wikiのルールの項に詳しく書いたつもりなので、目を通しておいてもらえると助かります
328名無しさん@おーぷん :2017/06/22(木)10:31:46 ID:iHp
ただ、多様性を出す為にルールを増やすと
どうしても複雑になってしまうんですよね

自分の説明の仕方にも問題があるでしょうし
分からないところがあれば直接説明しますので、ならばこういう書き方をした方がいいんじゃないか等、
ルールの書き方のアドバイスもいただければ嬉しいです
329名無しさん@おーぷん :2017/06/23(金)07:30:27 ID:3wk
サイト作成ではとりあえず簡単なルールで作ることにする
のちのち完成形を考えればいいだろう
簡単なものでも動かせるようになるには乗り越えるべき課題は多い
それもかなりむずかしい課題のように思う
330CGTT◆A1n7gQX4UY :2017/06/23(金)21:33:34 ID:6xF
一番難しそうなのはやっぱりネットワーク関係でしょうか
セキリュティをしっかりしないとハッキングされるらしいです
その辺りもしっかり作っていければいいですね

とりあえず制作は一つ一つの課題を作って、最終的にそれらを合わせて一つのゲームにするような感じはどうでしょうか?
331CXPPHwEwOI :2017/07/22(土)00:15:42 ID:FNR
こっちにも顔出し!
本スレでもカキコしましたが、主おかえりなさい~(´・ω・`)ノ

ここの話はチンプンカンプンなので、相変わらず眺めるだけw
332名無しさん@おーぷん :2017/07/25(火)08:34:09 ID:fX1
いつのときかできるハズ
333名無しさん@おーぷん :2017/07/30(日)22:31:03 ID:Hs9
>>330
一つ一つの課題から作っていくのはいいと思うよ
まずはデッキ作成の支援ツールを作るのはどうかな
カードを一覧で表示するページを作って、選択していくと、枚数やコストを計算して表示する感じで

とりあえず、カードを一覧表示するページの作成からかな
334CGTT◆A1n7gQX4UY :2017/08/01(火)23:28:27 ID:MSI
そうですね
カード一覧から選択したものを表示するプログラムに加えて、
選択したカード1枚ずつに対応するコストや枚数等の数値を
変数に入れて表示するといった流れでしょうか
335名無しさん@おーぷん :2017/08/02(水)07:54:42 ID:CZS
そんな感じ
クライアントサイドだからプログラムはJavaScriptだね
カードのデータをJavaScriptのデータとして持っておいて、そのデータをもとにカード一覧を出力するのがいいかな

var cardList=[{
name:'火・ヨッコ',
cost:1,
},{
name:'元素精霊サラマンダー',
cost:2
},];
var templateNode=document.getElementById('cardTemplate');

cardList.forEach(function(card){
var cardNode=templateNode.cloneNode(true);
cardNode.querySelector('.name').textContent=card.name;
cardNode.querySelector('.cost').textContent=card.cost;
document.body.appendChild(cardNode);
});

みたいな
336名無しさん@おーぷん :2017/08/02(水)08:08:58 ID:CZS
var templateNode=document.getElementById('cardTemplate');

var templateNode=document.querySelector('#cardTemplate>.card');
のほうがいいかな
337CGTT◆A1n7gQX4UY :2017/08/02(水)23:33:12 ID:Awo
javascriptは久々ですね
そしてわからない命令が多くて自分の知識不足を実感します…
自分でも調べてはいますが、一つずつ解説して下さると助かります(すみません)
338名無しさん@おーぷん :2017/08/03(木)07:02:31 ID:PXr
おk

var cardList=[{
name:'火・ヨッコ',
cost:1,
},{
name:'元素精霊サラマンダー',
cost:2
},];

これは、要素がオブジェクトの配列の宣言だね
JavaScriptでオブジェクトリテラルを使ったことがないかもしれないから、詳しく説明しよう
オブジェクト(連想配列)は、名前-値の組でデータを持っていて、
カードみたいに、一つのものが、複数の値(名前、コストなど)を持っているときに使うと便利

var hiyokko={
name:'火・ヨッコ',
cost:1,
}

各値を使うには、
hiyokko.name
hiyokko.cost
のようにする
339名無しさん@おーぷん :2017/08/03(木)07:07:21 ID:PXr
var templateNode=document.querySelector('#cardTemplate>.card');

document.querySelectorは、HTMLからCSSセレクタを指定して要素を取得するメソッドだね
CSSセレクタっていうのは、
foo #bar > baz{
color:red;
}
上のCSSでいう、「foo #bar > baz」の部分だね
document.querySelectorを使うと、CSSで要素を指定するように、JavaScriptでも要素を取得できるから便利
340名無しさん@おーぷん :2017/08/03(木)07:16:00 ID:PXr
cardList.forEach(function(card){
});

forEachというのは、配列のメソッドでfor文みたいに配列の要素を一つずつ取得するメソッド
引数に関数を渡してるのが特徴だね

上の例をfor文で書き直すと、
for(var i=0;i<cardList.length;i++){
var card=cardList[i];
}
みたいになる
341名無しさん@おーぷん :2017/08/03(木)07:21:34 ID:PXr
var cardNode=templateNode.cloneNode(true);

cloneNodeはElementのメソッドで、要素を複製する
引数にtrueを渡すと、子孫要素まで複製するようになる

ここでは、templateNodeを雛形としてHTML側で作っておいて、
それを取得、複製することでカードの要素を作るようにしている
342名無しさん@おーぷん :2017/08/03(木)07:24:14 ID:PXr
document.body.appendChild(cardNode);

appendChildはElementのメソッドで、要素を別の要素に追加するメソッド
上の例では、document.bodyに、新しく作ったcardNodeを追加している
343名無しさん@おーぷん :2017/08/03(木)07:29:50 ID:PXr
JavaScriptでわからないものがあるときは、まず「MDN 単語」で調べてみるのがおすすめ

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector
https://developer.mozilla.org/ja/docs/Web/API/Node.cloneNode
https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

MDNの記事が読めるようになれば、JavaScriptの勉強がかなり楽になる
344名無しさん@おーぷん :2017/08/03(木)07:32:19 ID:PXr
あと、カード一覧を出力するプログラムを、実際に動かしてみてね
そのためには、HTMLをちゃんと書かなきゃいけないんだけど、プログラムを理解できれば書けるはずだから
345名無しさん@おーぷん :2017/08/03(木)07:43:11 ID:PXr
textContentの説明を忘れてた

cardNode.querySelector('.name').textContent=card.name;

textContentは、Elementのプロパティで、これを使うとテキストを書き換えられる
上の例だと、先ほど説明したquerySelectorを使って要素を取得して、そのテキストをcard.nameにしてる
346CGTT◆A1n7gQX4UY :2017/08/06(日)10:56:23 ID:FYV
詳しく解説してくださってありがとうございます
ただ、オブジェクト指向というものは難しいですね
自分もHTMLとCSSとjavascriptの基礎を読み返しながら、
一つ一つ理解していきたいと思っていますが、時間がかかってしまったら申し訳ないです
347名無しさん@おーぷん :2017/08/09(水)06:10:36 ID:pln
久し振りのJavaScriptにしては重めの内容だったかなw
HTMLとCSSも少し混じってるしな
ざっくりとした説明しかしてないから、よくわからないところは質問してね

HTMLを書く部分はどこまでできたかな
できた分までここに書いてみて
348名無しさん@おーぷん :2017/08/10(木)07:09:09 ID:jmP
そういえば、カードのデザインは考えてある?
>>290みたいに簡単な感じでいいんだけど
349名無しさん@おーぷん :2017/08/11(金)06:44:52 ID:CAd
ブラウザは何使ってる?
OSがWindows 10なら、標準はMicrosoft Edgeだけど

新着レスの表示 | ここまで読んだ

名前: mail:





カードゲーム作ったを遊ぶためのサイト作成スレ2
CRITEO