Skip to main content
Participant
June 15, 2021
Question

カードゲームのチュートリアルを、なるべく簡単な構造で作りたい

  • June 15, 2021
  • 1 reply
  • 505 views

こんにちは。

FLASHのAS2.0のころにゲームを作っていましたが、最近久しぶりに使ってみたらアクションをどの様に書いていくのから全く別の物になっていて、そのまま使えるのが「this.stop();」だけで困っています。

 

この様なものをHTML5でウェブに埋め込もうと考えているのですが、お力添えを頂ければ幸いです。

表題にもある様に「カードゲームの簡単なチュートリアル」をウェブ上でできる物を作りたいと思っています。

 

1:1~50までの数字が書いてあるカードの画像50枚をシンボル化し、ランダムな重ね順で山札を作りたい。

2:カードをドラッグして移動

3:ドラッグしたカードは、重ね順を最前面に移動

4:カードをダブルクリックで裏返し(カード毎にシンボル内のフレームアニメーションで)

5:トリプルクリックで180°回転

 

2と4のみはなんとかできましたが、135に悩んでいます。

AS2.0の頃の様な、それぞれ2-3行でできるものだったら嬉しいのですが、何卒ご教授いただけましたら幸いです。

This topic has been closed for replies.

1 reply

Fumio Nonaka
Community Expert
Community Expert
June 19, 2021

ご質問の仕方について、気づいた点をふたつ申し上げます。


[1] 一度に複数の質問をされると、回答が得にくくなります。
回答者はそのすべてに答えなければならないようなプレッシャーを感じるからです。最終的にどういうものをつくりたいと示すことは、意図が明確になり望ましいといえます。けれど、質問はひとつずつされた方がよいでしょう。

[2] どこまでおできになり、どこがわからないのか、具体的にされた方が回答しやすいです。
ActionScript 2.0の頃ならできたということでしたら、その場合どういうつくり込みにしたのかご説明されれば、それをHTML5 Canvasでどうすればよいのかは格段に答えやすくなるはずです。

ということで、とりあえず1.について。ActionScript 2.0のときだったとして、本当に50枚のカードをランダムに重ねて山にしますか。山の50枚のカードは、ひとつも数字が見えないのですよね。私でしたら、50枚の山をひとつのシンボルでつくって、引く操作(ドラッグ?)をして取り出したカードの数字がランダムな順になればよいと考えます。

あるいは、山のカードはババ抜きのように扇形にでも広げて、そこから1枚引くというデザインですか。つまり、つくり方によってどうしたらよいかは大きく違ってこざるをえません。

Participant
June 26, 2021

申し訳ないです。

一緒に聞いた方が良いのかと思っていました。

 

現在

「card1」~「card5」の画像をシンボルにしてステージに配置しています。

1フレーム目にこのように記述しています。

 

・▼初期配置の中の「初期重ね順」

・▼クリックで重ね順をトップに

・▼ダブルクリックでめくる

 

 

//▼初期配置---------------------------------
var cards= [this.card1,this.card2,this.card3,this.card4,this.card5];
var maisu = cards.length;
for(var i=0;i<maisu;i++){                             //初期シャッフル
  var r = Math.floor( Math.random() * maisu);
  var t = cards[r];
  cards[r] = cards[i];
  cards[i] = t;
}

 

for(var i=0;i<maisu;i++){
  cards[i].x = 115;
  cards[i].y = 160;
  cards[i].gotoAndPlay("omote");

  cards[i].swapDepths(i);                            //初期重ね順
}


//▼ドラッグ-------------------------------------
for(var i=0;i<maisu;i++){
  cards[i].on("pressmove",movecard);
  function movecard(eee){
    eee.currentTarget.x = eee.stageX;
    eee.currentTarget.y = eee.stageY;
  }
}


//▼クリックで重ね順をトップに------------------------------------
for(var i=0;i<maisu;i++){
  cards[i].addEventListener("click",kasane.bind(this));
  function kasane() {
    var depth = this.getNextHighestDepth();
    cards[i].swapDepths(depth);
  }
}


//▼ダブルクリックでめくる(カードシンボルの中身のシーンで表現)---
for(var i=0;i<maisu;i++){
  cards[i].addEventListener("dblclick",mekuru.bind(this));
  function mekuru() {
    cards[i].gotoAndPlay(cards[i].currentFrame+1);
  }
}

 

Fumio Nonaka
Community Expert
Community Expert
July 2, 2021

では、カードのインスタンスを50枚重ねる方向で検討しましょう。カードのシャッフルは、つぎのようにしてはいかがですか。ランダムの処理は、このあともうひと工夫いります。

 

const cards = [this.card1, this.card2, this.card3, this.card4, this.card5];
const count = cards.length
for (let i = 0; i < count; i++) {
	const card = cards[i];
	card.gotoAndStop(Math.floor(Math.random() * count));
}

 

おそらく、これだけではおわかりにならないですよね。つまり、コードをただ書いて見せただけでは説明になっていないということです。とくに、Animateのタイムラインやシンボルの組み立ては、コードだけではわかりません。

たとえば、つぎのgotoAndPlay()は何をされているのでしょう。"omote"に移動しているということは、フレームの切り替えでカードの裏表を変えているのではないかと「推測」します(できるだけ「推測」はさせないでください)。けれど、gotoAndStop()なく、gotoAndPlay()ということはアニメーションさせているのでしょうか。また、はじめはカードの数字を伏せて裏を向けておくものでしょうから、"omote"というフレームラベルが腑に落ちません。

 

for(var i=0;i<maisu;i++){

  cards[i].gotoAndPlay("omote");

}

 

ただ、おそらくフレーム移動でインスタンスの表示を切り替えるという手法は使っていらっしゃると「推測」して示したのが冒頭のコードです。50個のシンボルをつくるのではなく、ひとつのシンボルの1〜50フレームに1フレームずつ、50枚の画像を置きます。そうすれば、飛び先フレームを変えるだけで、50枚のカードのインスタンスができます。重ね順を変える必要もありません。

ただし、裏表の切り替えは、フレームでできなくなります。裏の画像はシンボル内にレイヤーをつくって、数字の上に重ねて隠せばよいでしょう。裏のインスタンスのvisibleをfalseにすれば数字が現れます。

ひと工夫必要なのは、シャッフルです。冒頭のコードでは、ランダムにはなるものの、同じ数字が複数になったり、逆に存在しない数字が生まれることになります。そこで、1から50までの整数連番の配列をランダムに並べ替えます。そのあと、配列の頭から順にカードの数字を割り当てれば完全なシャッフルです(正確には第1フレームのフレーム番号は0なので0〜49)。

配列を偏りなくランダムに並替える」をお読みください。Flash 5の時代の記事ですから、JavaScriptコードとして動きます。

ご質問は、回答する側の立場に立って、見直したうえで投稿されることをお勧めします。