読者です 読者をやめる 読者になる 読者になる

かんがえちゅう!

出来寛祥です。多趣味に生きていこうと思って、楽器とかスポーツとかいろいろやってます。プログラミングも好き。

これからプログラミングを始める人が10分で理解できるカードゲームの作り方

プログラミング プログラミング-講座

sponsor

プログラミングやったことないけど、仕事で必要とか、やってみたいって人のために、読み物としてプログラミングを勉強できる参考書を作ります。

f:id:hiroyoshi-deki:20151208053939j:plain

ゆかちも応援してくれますね!

初回はプログラミングってなんなのか、どういう考え方をするものなのか!

プログラミングは実際の物を数値にして計算すること

この感覚さえつかめれば、できるようになったも同然です。プログラミングではいろいろな物を数値で表して計算するもしくは名前をつけて管理することで、ゲームのような複雑な物をつくりあげていきます。

そのために必要なプログラミングの基本概念をさらっと説明しておきます。

プログラミングで使う考え方

  • 値(数とか文字とか)を記録しておくための「変数」がある
  • 値の塊を記録しておくための「配列」もある
  • 四則演算ぐらいの計算
  • 同じ動作を繰り返し行うことができる
  • 特定の条件のときだけ、動作を行うこともできる

とりあえず、こんくらいのことができるんだなーと軽く覚えておいてください。試してみたければ、画面を右クリック>検証(Chrome)でコンソールという窓を開いて、試すといいと思います。試さなくても結果の通りなので!

この言語をJavascriptといいます。

プログラミング具体例!

// 変数の例
// x, y は 10と3
var x = 10
var y = 3

// zは10+3で13
var z = x + y

console.log(z)

結果:13

これをコピペしてみると13って出てくると思います。これは変数xに10を代入して、覚えておく。yも同様に。

最後に足し算をしてコンソールにログを出す。というプログラムです。プログラミングにおいて「=」は代入の意味なので覚えておいてね!

// 配列の例
var a = [0,1,2]

// aは0,1,2
console.log(a)

// aの0番目は0
console.log(a[0])

// aの0番目を10に
a[0] = 10
console.log(a)

結果:0,1,2 -> 0 -> 10,1,2

配列は変数と同じだけど、個別に代入するときは番号を指定してあげる必要があります!

for(i=0; i <= 10; i++){
    console.log(i)
}

結果:0 1 2 3 4 5 6 7 8 9 10

こんな感じで、繰り返しができます。

慣れれば構文丸覚えできるので、今は雰囲気だけでいいです!

var deki = 'hiroyoshi'
if( deki == 'hiroyoshi' ){
    console.log('あなたは寛祥です。')
} else {
    console.log('あなたは寛祥ではないですね?')
}

結果:あなたは寛祥です。

dekiという変数にhiroyoshiという文字列を代入します。dekiがhiroyoshiという値を持っているか確認して、持っていれば肯定、持っていなければ否定のコメントをログに出します。

それではカードゲームをプログラミングでつくることを例にして説明します。だいたいこんなことが理解できればカードゲームがつくれます!

プログラミングでカードゲームをつくる

カードゲームを作る中でプログラミングを使っていきましょう。

カードゲームのルール

カードゲームのルールを決めておきます。わかる人は遊戯王カードを思い浮かべてください。

  • プレーヤーは1対1で戦い、それぞれ相手プレーヤーのHP(3000)を奪っていく
  • モンスターカードがあって、攻撃力と守備力がある
  • 魔法カードがあって体力を回復させることができる
  • ターン毎にモンスターカードを場に出す、攻撃する、魔法カードを使うの3つができる
  • ただし、先行の場合はカードを場に出すことしかできない

こんな感じのシンプルなゲームにしましょう。

カードの準備

まずカードを用意しましょう。攻撃力と防御力が必要です。配列にいれてカードの代わりにします!

// card = [攻撃力, 守備力]
card1 = [1500, 900]
card2 = [300, 2600]
card3 = [2000, 500]
// 便利なのでp1_cardsを手札にしましょう。今そう思いつきました。
p1_cards = [card1, card2, card3]
console.log(p1_cards[0])
console.log(p1_cards[0][1])

この状態にするとp1_cards[1]のように好きなカードを指定できますね。

p1_cards[1][0]とすると攻撃力が選べます。

f:id:hiroyoshi-deki:20151209172844p:plain

カードを場に出す

戦うにはカードを場に出しましたよ、という状態にしなければなりません。

ということで、手札(p1_cards)からカードを選んで場に出しましょう。場にはp1_fieldという配列を使うことにします。

// 配列をfieldとして準備
p1_field = [null,null,null,null,null]
p1_cards = [card1, card2, card3]

// p1_fieldにカードをセット
p1_field[0] = p1_cards[0]

// 手札からカードを削除
p1_cards[0] = null
// ついでにHPも設定
p1_life = 3000

f:id:hiroyoshi-deki:20151209173007p:plain

これだけで、セットしたこととしましょう。フィールドがあって、そこになんのカードがあるか判断がつけばいいです。

カードバトル:バトルのイメージ

後ほどもう一回詳しく確認しますが、とりあえずプログラミングに落とし込む前に、バトルの詳細を作りこんでしまいましょう。

  • 自分のフィールドのモンスターそれぞれで攻撃ができる。
  • 攻撃は相手のフィールドにモンスターがいるかどうかで処理が変わる
  • いる場合:モンスターを選んで守備力との差をライフから削る。勝ったらモンスターを破壊。
  • いない場合:ライフから直接ダメージを削る

ということで、基本的にゲームの流れはモンスターを出す、相手のモンスターを倒す、差をダメージとして与える。そしてダメージを削っていくという感じになるでしょう。

カードバトル:プログラミングのイメージ

それでは戦う処理を書いてみましょう。初めに、プログラミングで戦うことがどういうことかイメージをつかみます。

このゲームの目的は相手プレーヤーの体力を奪うことです。そのためには以下の流れが必要です。

  1. 自分のフィールドからモンスターを選ぶ ー> p1_field[n] のnを決める
  2. 相手モンスターがいれば選ぶ ー> p2_field[n] のnを決める
  3. 相手モンスターを選んでいれば差を、選んでいなければ攻撃力を相手HPから削る ー> ex.) p2_life = p2_life - ( p1_field[0][1] )

これで、1ターン分の攻撃が終わります。

とりあえず今までの処理をもう一度行って、相手プレーヤーも作りましょう。

p2_life = 3000
card4 = [1200, 1400]
card5 = [2300, 100]
card6 = [100, 2300]

p2_cards = [card4, card5, card6]
p2_field = [null,null,null,null,null]

// fieldにカードをセット
p2_field[0] = p2_cards[0]
// 手札からカードを削除
p2_cards[0] = null

f:id:hiroyoshi-deki:20151209173138p:plain

これで、プレーヤーが2人いるので、バトルができます。

Let's Battle!!

実際にバトルについてプログラミングの処理を書いてみます。プレーヤー1から2への攻撃を書いてみましょう。

// 相手のフィールドをチェック
console.log(p2_field)
// [Array, null, null, null, null]
// Arrayは配列のこと、つまりモンスター
// モンスターがいるので引き算した値をライフから削る
p2_life = p2_life - ( p1_field[0][0] - p2_field[0][1] )
// 守備力に勝つので、モンスターをnullに
p2_field[0] = null

この流れをターンを入れ替えて繰り返し行えば、勝負がつく。手札を見ちゃいけないっていうルールの元行えばゲームになります。

魔法カード

最後に魔法カードを使ってみましょう。

// magic1配列に回復量を入れる
magic1 = [1000]
// p2が魔法カードを使用しHPを1000回復
p2_life = p2_life + magic1[0]
console.log(p2_life)

魔法カードはこのようにHPをプラスしていきます。

ここも計算をした後p2_lifeに再代入してあげましょう。

今回のまとめ!

カードゲームをプログラミングで実装する一番シンプルな方法を説明しました。でも、まだゲームっぽくないし、実際に遊ぶのも面白くない。

次回予告

次回は攻撃や魔法カードの使用を、わざわざ式を書き込まないように自動化してもっとゲームっぽくしていきます。

そのために使うのが関数です。

イメージとしては、ターンがわかるようになっていて、カードを指定するだけで自動的に計算が行われるようにします。

今回のコード

// プレーヤー1の準備
p1_life = 3000

card1 = [1500, 900]
card2 = [300, 2600]
card3 = [2000, 500]

p1_cards = [card1, card2, card3]
console.log(p1_cards[0])
console.log(p1_cards[0][1])

p1_field = [null,null,null,null,null]
p1_cards = [card1, card2, card3]

// p1_fieldにカードをセット
p1_field[0] = p1_cards[0]

// 手札からカードを削除
p1_cards[0] = null

// プレーヤー2の準備
p2_life = 3000
card4 = [1200, 1400]
card5 = [2300, 100]
card6 = [100, 2300]

p2_cards = [card4, card5, card6]
p2_field = [null,null,null,null,null]

p2_field[0] = p2_cards[0]
p2_cards[0] = null

// バトル開始
// 相手のフィールドをチェック
console.log(p2_field)
// [Array, null, null, null, null]
// Arrayは配列のこと、つまりモンスター
// モンスターがいるので引き算した値をライフから削る
p2_life = p2_life - ( p1_field[0][0] - p2_field[0][1] )
// 守備力に勝つので、モンスターをnullに
p2_field[0] = null

© 2015 かんがえちゅう!