JavaScript 都道府県対抗戦国シミュレーションゲームをつくる（1）

戦国シミュレーションゲームをつくります。ただ普通のゲームでは面白くないので都道府県対抗の戦国シミュレーションゲームをつくります。

仕様は以下のとおり。

Contents

1 ゲームの仕様
- 1.1 侵攻について
- 1.2 戦闘について
2 データについて
3 HTML部分
4 Kenクラスの定義

ゲームの仕様

プレイヤーは47都道府県（以下、「県」とする）のなかからひとつを選び、全国制覇を目指す。
戦国武将は各県の知事とする。
県には兵と兵糧、土地のパラメータが存在する。
兵数の初期状態は県庁の職員数、兵糧は米の生産量とする。
各県の米の生産量の10,000分の1とし、10月に土地のパラメータの10,000倍の兵糧が増えるものとする。
1ターンで1ヵ月が経過し、各県は[開発]、[徴兵]、[侵攻]ができる。
[開発]は県の土地のパラメータを1増加させる。
[徴兵]は県の兵員を1,000名増やすことができる。

侵攻について

[侵攻]はとなりの県に攻め込むことができる。
「となりの県」とは県境が陸で接している県、橋、トンネルでつながっている県である。ただしこれでは沖縄県が孤立するので、沖縄県は鹿児島と隣り合っているものとする。
[侵攻]すると侵攻された県の県庁は包囲される。

戦闘について

侵攻されている県にターンが回ってきた場合は、侵攻されている県、侵攻した軍の順に次の行動を指定できる。
侵攻されている県は[静観]と[反撃]のいずれかを選択できる。
侵攻されている県は[静観]した場合、県庁内にいる兵数の3倍の兵糧を消費する。ただしこれにより県庁内の兵糧がなくなってしまう場合は[反撃]一択となる。
[反撃]する場合は包囲軍との戦闘になる。戦闘はいずれか一方が全滅するまで継続される。

侵攻している軍は[静観]と[突入]のいずれかを選択できる。
侵攻している軍が[静観]した場合、兵数と同じ兵糧を消費する。ただしこれにより兵糧がなくなってしまう場合は[突入]一択となる。
[反撃]する場合は県庁内に立てこもる敵兵との戦闘になる。籠城戦は「城側が3倍有利」とする。

要は攻められたときは立て籠もったほうが有利だけど兵糧攻めされると厳しいよということ。

戦闘は侵攻側または守備側の全滅で決着するが、その場合、勝者は敗者の兵糧を奪取する。

データについて

ところで47都道府県の知事は以下のようになっています。

都道府県知事の一覧

都道府県	氏名
北海道	鈴木直道
青森県	宮下宗一郎
岩手県	達増拓也
宮城県	村井嘉浩
秋田県	佐竹敬久
山形県	吉村美栄子
福島県	内堀雅雄
茨城県	大井川和彦
栃木県	福田富一
群馬県	山本一太
埼玉県	大野元裕
千葉県	熊谷俊人
東京都	小池百合子
神奈川県	黒岩祐治
新潟県	花角英世
富山県	新田八朗
石川県	馳浩
福井県	杉本達治
山梨県	長崎幸太郎
長野県	阿部守一
岐阜県	古田肇
静岡県	川勝平太
愛知県	大村秀章
三重県	一見勝之
滋賀県	三日月大造
京都府	西脇隆俊
大阪府	吉村洋文
兵庫県	斎藤元彦
奈良県	山下真
和歌山県	岸本周平
鳥取県	平井伸治
島根県	丸山達也
岡山県	伊原木隆太
広島県	湯崎英彦
山口県	村岡嗣政
徳島県	後藤田正純
香川県	池田豊人
愛媛県	中村時広
高知県	浜田省司
福岡県	服部誠太郎
佐賀県	山口祥義
長崎県	大石賢吾
熊本県	蒲島郁夫
大分県	佐藤樹一郎
宮崎県	河野俊嗣
鹿児島県	塩田康一
沖縄県	玉城康裕（玉城デニー）

これは日本全国都道府県別の一般行政部門職員数です。職員数が多い順に並べています。

日本全国都道府県別の一般行政部門職員数（都道府県）が多いランキング一覧表(2021年度)

1	東京都	20,351
2	北海道	12,819
3	愛知県	8920
4	大阪府	7761
5	神奈川県	7670
6	福岡県	7565
7	千葉県	7548
8	埼玉県	7155
9	兵庫県	5929
10	静岡県	5709
11	福島県	5699
12	新潟県	5534
13	長野県	5136
14	鹿児島県	5008
15	宮城県	4990
16	茨城県	4847
17	広島県	4535
18	栃木県	4499
19	岩手県	4411
20	岐阜県	4400
21	三重県	4345
22	熊本県	4278
23	京都府	4104
24	山形県	4048
25	長崎県	4016
26	沖縄県	3981
27	群馬県	3945
28	大分県	3862
29	岡山県	3856
30	愛媛県	3831
31	青森県	3787
32	宮崎県	3763
33	山口県	3543
34	和歌山県	3529
35	高知県	3467
36	秋田県	3385
37	島根県	3307
38	滋賀県	3277
39	石川県	3272
40	富山県	3220
41	奈良県	3185
42	徳島県	3167
43	佐賀県	3079
44	山梨県	3018
45	鳥取県	2931
46	福井県	2886
47	香川県	2806

以下は米の都道府県別収穫量です。

米の都道府県別収穫量

都道府県名	収穫量
北海道	553,200
青森	235,200
岩手	247,600
宮城	326,500
秋田	456,500
山形	365,300
福島	317,300
茨城	319,200
栃木	270,300
群馬	72,300
埼玉	142,400
千葉	259,500
東京	484
神奈川	14,400
新潟	631,000
富山	197,400
石川	122,900
福井	121,000
山梨	25,500
長野	187,300
岐阜	100,800
静岡	76,400
愛知	130,800
三重	130,800
滋賀	151,700
京都	72,000
大阪	22,800
兵庫	177,000
奈良	43,900
和歌山	31,000
鳥取	62,200
島根	85,100
岡山	147,200
広島	114,500
山口	92,600
徳島	47,600
香川	55,700
愛媛	68,600
高知	49,700
福岡	164,000
佐賀	117,200
長崎	48,900
熊本	156,800
大分	93,200
宮崎	75,200
鹿児島	86,000
沖縄	1,920

ではデータがそろったところで作成していきましょう。

HTML部分

HTML部分を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>都道府県対抗 戦国シミュレーションゲーム</title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<link rel = "stylesheet" href = "./style.css" type = "text/css" media = "all">
</head>

<body>

<div id = "container">
    <div id = "field">
        <div class = "inner" id = "year"></div>
        <div id = "start-buttons">
            <p>都道府県対抗戦国シミュレーションゲーム</p>
            <button id = "start">開始</button>
        </div>
        <div id = "actions">
            <div class = "inner">
                <p>次の行動を選択してください</p>
                <button id = "development" class = "buttons">開発</button>
                <button id = "conscription" class = "buttons">徴兵</button>
                <button id = "research" class = "buttons">調査</button>
                <button id = "invasion" class = "buttons">侵攻/移動</button>
                <button id = "save" class = "buttons">保存</button>
            </div>
        </div>
        <div id = "select-ken">
            <div class = "inner">
                <p id = "select-ken-navi-1">担当したい県がある地方を選択してください</p>
                <p id = "select-ken-navi-2">調べたい県がある地方を選択してください</p>
                <button id = "btn-ken-1" class = "buttons">北海道</button>
                <button id = "btn-region-1" class = "buttons">東北地方</button>
                <button id = "btn-region-2" class = "buttons">関東地方</button>
                <button id = "btn-region-3" class = "buttons">中部地方</button>
                <button id = "btn-region-4" class = "buttons">近畿地方</button>
                <button id = "btn-region-5" class = "buttons">中国地方</button>
                <button id = "btn-region-6" class = "buttons">四国地方</button>
                <button id = "btn-region-7" class = "buttons">九州地方</button>
                <button id = "btn-ken-47" class = "buttons">沖縄県</button>
                <button id = "return-from-select-ken" class = "buttons">戻る</button>
            </div>
        </div>
        <div id = "select-ken-1">
            <div class = "inner">
                <p>東北地方：</p>
                <button id = "btn-ken-2" class = "buttons">青森県</button>
                <button id = "btn-ken-3" class = "buttons">岩手県</button>
                <button id = "btn-ken-4" class = "buttons">宮城県</button>
                <button id = "btn-ken-5" class = "buttons">秋田県</button>
                <button id = "btn-ken-6" class = "buttons">山形県</button>
                <button id = "btn-ken-7" class = "buttons">福島県</button>
                <button id = "return-from-select-ken-1" class = "buttons">戻る</button>
            </div>
        </div>
        <div id = "select-ken-2">
            <div class = "inner">
                <p>関東地方：</p>
                <button id = "btn-ken-8" class = "buttons">茨城県</button>
                <button id = "btn-ken-9" class = "buttons">栃木県</button>
                <button id = "btn-ken-10" class = "buttons">群馬県</button>
                <button id = "btn-ken-11" class = "buttons">埼玉県</button>
                <button id = "btn-ken-12" class = "buttons">千葉県</button>
                <button id = "btn-ken-13" class = "buttons">東京都</button>
                <button id = "btn-ken-14" class = "buttons">神奈川県</button>
                <button id = "return-from-select-ken-2" class = "buttons">戻る</button>
            </div>
        </div>
        <div id = "select-ken-3">
            <div class = "inner">
                <p>中部地方：</p>
                <button id = "btn-ken-15" class = "buttons">新潟県</button>
                <button id = "btn-ken-16" class = "buttons">富山県</button>
                <button id = "btn-ken-17" class = "buttons">石川県</button>
                <button id = "btn-ken-18" class = "buttons">福井県</button>
                <button id = "btn-ken-19" class = "buttons">山梨県</button>
                <button id = "btn-ken-20" class = "buttons">長野県</button>
                <button id = "btn-ken-21" class = "buttons">岐阜県</button>
                <button id = "btn-ken-22" class = "buttons">鈴岡県</button>
                <button id = "btn-ken-23" class = "buttons">愛知県</button>
                <button id = "return-from-select-ken-3" class = "buttons">戻る</button>
            </div>
        </div>
        <div id = "select-ken-4">
            <div class = "inner">
                <p>近畿地方：</p>
                <button id = "btn-ken-24" class = "buttons">三重県</button>
                <button id = "btn-ken-25" class = "buttons">滋賀県</button>
                <button id = "btn-ken-26" class = "buttons">京都府</button>
                <button id = "btn-ken-27" class = "buttons">大阪府</button>
                <button id = "btn-ken-28" class = "buttons">兵庫県</button>
                <button id = "btn-ken-29" class = "buttons">奈良県</button>
                <button id = "btn-ken-30" class = "buttons">和歌山県</button>
                <button id = "return-from-select-ken-4" class = "buttons">戻る</button>
            </div>
        </div>
        <div id = "select-ken-5">
            <div class = "inner">
                <p>中国地方：</p>
                <button id = "btn-ken-31" class = "buttons">鳥取県</button>
                <button id = "btn-ken-32" class = "buttons">島根県</button>
                <button id = "btn-ken-33" class = "buttons">岡山県</button>
                <button id = "btn-ken-34" class = "buttons">広島県</button>
                <button id = "btn-ken-35" class = "buttons">山口県</button>
                <button id = "return-from-select-ken-5" class = "buttons">戻る</button>
            </div>
        </div>
        <div id = "select-ken-6">
            <div class = "inner">
                <p>四国地方：</p>
                <button id = "btn-ken-36" class = "buttons">徳島県</button>
                <button id = "btn-ken-37" class = "buttons">香川県</button>
                <button id = "btn-ken-38" class = "buttons">愛媛県</button>
                <button id = "btn-ken-39" class = "buttons">高知県</button>
                <button id = "return-from-select-ken-6" class = "buttons">戻る</button>
            </div>
        </div>
        <div id = "select-ken-7">
            <div class = "inner">
                <p>九州地方：</p>
                <button id = "btn-ken-40" class = "buttons">福岡県</button>
                <button id = "btn-ken-41" class = "buttons">佐賀県</button>
                <button id = "btn-ken-42" class = "buttons">長崎県</button>
                <button id = "btn-ken-43" class = "buttons">熊本県</button>
                <button id = "btn-ken-44" class = "buttons">大分県</button>
                <button id = "btn-ken-45" class = "buttons">宮崎県</button>
                <button id = "btn-ken-46" class = "buttons">鹿児島県</button>
                <button id = "return-from-select-ken-7" class = "buttons">戻る</button>
            </div>
        </div>
        <div id = "current-ken-information">
            <div class = "inner">
                <p>県名：</p>
                <p>大名：</p>
                <p>兵数：</p>
                <p>兵糧：</p>
                <p>土地：</p>
            </div>
        </div>
        <div id = "select-ken-information">
            <div class = "inner">
                <p>県名：</p>
                <p>大名：</p>
                <p>兵数：</p>
                <p>兵糧：</p>
                <p>土地：</p>
                <button id = "return-from-research-result" class = "buttons">戻る</button>
            </div>
        </div>
        <div id = "select-target-invasion">
            <div class = "inner">
                <p>侵攻する県を選択してください</p>
                <button id = "btn-target-invasion-1" class = "buttons">ターゲット1</button>
                <button id = "btn-target-invasion-2" class = "buttons">ターゲット1</button>
                <button id = "btn-target-invasion-3" class = "buttons">ターゲット1</button>
                <button id = "btn-target-invasion-4" class = "buttons">ターゲット1</button>
                <button id = "btn-target-invasion-5" class = "buttons">ターゲット1</button>
                <button id = "btn-target-invasion-6" class = "buttons">ターゲット1</button>
                <button id = "btn-target-invasion-7" class = "buttons">ターゲット1</button>
                <button id = "btn-target-invasion-8" class = "buttons">ターゲット1</button>
                <button id = "return-from-select-target-invasion" class = "buttons">やめる</button>
            </div>
        </div>
        <div id = "select-count">
            <div class = "inner">
                <p id = "select-count-navi">侵攻に動員する職員数を指定してください</p>
                <p id = "select-count-value">1000人</p>
                <button id = "btn-select-count-plus-10k" class = "buttons">+10,000</button>
                <button id = "btn-select-count-plus-1k" class = "buttons">+1,000</button>
                <button id = "btn-select-count-cancel" class = "buttons">中止</button><br>
                <button id = "btn-select-count-minus-10k" class = "buttons">-10,000</button>
                <button id = "btn-select-count-minus-1k" class = "buttons">-1,000</button>
                <button id = "btn-select-count-ok" class = "buttons">確定</button>
            </div>
        </div>
        <div id = "battle-actions-1">
            <div class = "inner">
                <p>現在、敵に包囲されています。どうしますか？</p>
                <button id = "waiting-1" class = "buttons">静観</button>
                <button id = "show-enemy-1" class = "buttons">敵の状態を<br>表示</button>
                <button id = "assault-1" class = "buttons">決死の<br>全軍突撃</button>
            </div>
        </div>
        <div id = "battle-actions-2">
            <div class = "inner">
                <p>現在、敵を包囲しています。どうしますか？</p>
                <button id = "waiting-2" class = "buttons">静観</button>
                <button id = "show-enemy-2" class = "buttons">敵の状態を<br>表示</button>
                <button id = "assault-2" class = "buttons">全軍で<br>県庁に突入</button>
            </div>
        </div>
        <div id = "message">
            <div class = "inner">
                <p>戦闘情報</p>
                <button id = "return-from-battle-infomation" class = "buttons">次へ</button>
            </div>
        </div>
    </div>
    <div id = "volume">
        <table>
            <tr><td class = "td-volume">音量</td></tr>
            <tr>
                <td class = "td-volume">効果音</td>
                <td class = "td-volume"><input type="range" id = "volume-range1" min="0" max="1" step="0.01"></td>
                <td class = "td-volume"><span id = "volume-value1"></span></td>
            </tr>
            <tr>
                <td class = "td-volume">BGM</td>
                <td class = "td-volume"><input type="range" id = "volume-range2" min="0" max="1" step="0.01"></td>
                <td class = "td-volume"><span id = "volume-value2"></span></td>
            </tr>
        </table>
        <button id = "volume-test-1" class = "buttons">効果音テスト</button>
        <button id = "volume-test-2" class = "buttons">BGM テスト</button>
    </div>
</div>

<script src= "./index.js"></script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

<!DOCTYPE html>

<head>

<title>都道府県対抗戦国シミュレーションゲーム</title>

</head>

<body>

<p>都道府県対抗戦国シミュレーションゲーム</p>

</div>

<p>次の行動を選択してください</p>

</div>

<p id = "select-ken-navi-1">担当したい県がある地方を選択してください</p>

<p id = "select-ken-navi-2">調べたい県がある地方を選択してください</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<p>侵攻する県を選択してください</p>

<button id = "btn-target-invasion-1" class = "buttons">ターゲット1</button>

<button id = "btn-target-invasion-2" class = "buttons">ターゲット1</button>

<button id = "btn-target-invasion-3" class = "buttons">ターゲット1</button>

<button id = "btn-target-invasion-4" class = "buttons">ターゲット1</button>

<button id = "btn-target-invasion-5" class = "buttons">ターゲット1</button>

<button id = "btn-target-invasion-6" class = "buttons">ターゲット1</button>

<button id = "btn-target-invasion-7" class = "buttons">ターゲット1</button>

<button id = "btn-target-invasion-8" class = "buttons">ターゲット1</button>

</div>

<p id = "select-count-navi">侵攻に動員する職員数を指定してください</p>

</div>

<p>現在、敵に包囲されています。どうしますか？</p>

<button id = "show-enemy-1" class = "buttons">敵の状態を<br>表示</button>

</div>

<p>現在、敵を包囲しています。どうしますか？</p>

<button id = "show-enemy-2" class = "buttons">敵の状態を<br>表示</button>

<button id = "assault-2" class = "buttons">全軍で<br>県庁に突入</button>

</div>

</div>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

<button id = "volume-test-1" class = "buttons">効果音テスト</button>

</div>

</body>

</html>

style.css

body {
    color: white;
    font-size: 16px;
    background-color: black;
}

#container {
    width: 360px;
    float: left;
}

#field {
    position: relative;
    height:500px;
}

#select-target-invasion,
#select-count,
#select-ken,
#select-ken-1,
#select-ken-2,
#select-ken-3,
#select-ken-4,
#select-ken-5,
#select-ken-6,
#select-ken-7 {
    width: 340px;
    height: 250px;
    position: absolute;
    top: 40px;
    left: 10px;
    border: 1px white solid;
}

#battle-actions-1, #battle-actions-2 {
    width: 340px;
    height: 180px;
    position: absolute;
    top: 300px;
    left: 10px;
    border: 1px white solid;
}

#current-ken-information {
    width: 340px;
    height: 250px;
    position: absolute;
    top: 40px;
    left: 10px;
    border: 1px white solid;
}

#select-ken-information {
    width: 340px;
    height: 350px;
    position: absolute;
    top: 40px;
    left: 10px;
    border: 1px white solid;
    background-color: black;
}

#select-ken,
#select-ken-3 {
    height: 310px;
}

.buttons {
    width: 95px;
    height: 50px;
    margin-right: 5px;
    margin-bottom: 15px;
    vertical-align: middle;
}

#actions {
    width: 340px;
    height: 200px;
    position: absolute;
    top: 300px;
    left: 10px;
    border: 1px white solid;
}

#message {
    width: 340px;
    height: 180px;
    position: absolute;
    top: 300px;
    left: 10px;
    border: 1px white solid;
}

.inner {
    margin: 10px;
}

#btn-select-count-ok, #btn-select-count-cancel {
    margin-left: 10px;
}

#actions,
#select-target-invasion,
#select-preparation-invasion,
#select-ken,
#select-ken-1,
#select-ken-2,
#select-ken-3,
#select-ken-4,
#select-ken-5,
#select-ken-6,
#select-ken-7,
#select-count,
#select-ken-information,
#current-ken-information,
#development-result,
#conscription-result,
#invasion-result,
#message,
#battle-actions-1,
#battle-actions-2,
#message {
    display: none;
}

#start {
    margin-top: 20px;
    width: 160px;
    height: 60px;
}

#start-buttons {
    position: absolute;
    left: 0px;
    top: 100px;
    width: 360px;
    text-align: center;
}

#year {
    position: absolute;
    left: 0px;
    top: 0px;
}

#volume {
    margin-left: 5px;
    background-color: black;
}

.td-volume {
    border: 0px solid #000;
    padding-left: 5px;
    padding-right: 5px;
}

#volume-range1, #volume-range2 {
    width: 200px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

body {

color: white;

font-size: 16px;

background-color: black;

}

#container {

width: 360px;

float: left;

}

#field {

position: relative;

height:500px;

}

#select-target-invasion,

#select-count,

#select-ken,

#select-ken-1,

#select-ken-2,

#select-ken-3,

#select-ken-4,

#select-ken-5,

#select-ken-6,

#select-ken-7 {

width: 340px;

height: 250px;

position: absolute;

top: 40px;

left: 10px;

border: 1px white solid;

}

#battle-actions-1, #battle-actions-2 {

width: 340px;

height: 180px;

position: absolute;

top: 300px;

left: 10px;

border: 1px white solid;

}

#current-ken-information {

width: 340px;

height: 250px;

position: absolute;

top: 40px;

left: 10px;

border: 1px white solid;

}

#select-ken-information {

width: 340px;

height: 350px;

position: absolute;

top: 40px;

left: 10px;

border: 1px white solid;

background-color: black;

}

#select-ken,

#select-ken-3 {

height: 310px;

}

.buttons {

width: 95px;

height: 50px;

margin-right: 5px;

margin-bottom: 15px;

vertical-align: middle;

}

#actions {

width: 340px;

height: 200px;

position: absolute;

top: 300px;

left: 10px;

border: 1px white solid;

}

#message {

width: 340px;

height: 180px;

position: absolute;

top: 300px;

left: 10px;

border: 1px white solid;

}

.inner {

margin: 10px;

}

#btn-select-count-ok, #btn-select-count-cancel {

margin-left: 10px;

}

#actions,

#select-target-invasion,

#select-preparation-invasion,

#select-ken,

#select-ken-1,

#select-ken-2,

#select-ken-3,

#select-ken-4,

#select-ken-5,

#select-ken-6,

#select-ken-7,

#select-count,

#select-ken-information,

#current-ken-information,

#development-result,

#conscription-result,

#invasion-result,

#message,

#battle-actions-1,

#battle-actions-2,

#message {

display: none;

}

#start {

margin-top: 20px;

width: 160px;

height: 60px;

}

#start-buttons {

position: absolute;

left: 0px;

top: 100px;

width: 360px;

text-align: center;

}

#year {

position: absolute;

left: 0px;

top: 0px;

}

#volume {

margin-left: 5px;

background-color: black;

}

.td-volume {

border: 0px solid #000;

padding-left: 5px;

padding-right: 5px;

}

#volume-range1, #volume-range2 {

width: 200px;

}

Kenクラスの定義

Kenクラスを定義します。コンストラクタの引数は県名、知事名、兵数、兵糧数です。SetJoin関数は県の連結を設定します。1回の呼び出しでAからBとBからAの両方の連結を設定します。

index.js

class Ken {
    constructor(kenName, ownerName, heisCount, foodsCount){
        this.KenName = kenName;
        this.OwnerName = ownerName;
        this.HeisCount = heisCount;
        this.FoodsCount = foodsCount;
        this.Value = Math.ceil(foodsCount / 10000);
        this.Done = false; // そのターンで行動は終了したか？
        this.Random = Math.random(); // 配列をシャッフルするときに使う乱数
        this.JoinKenNames = []; // 隣接する県
        this.Invaders = []; // 侵攻軍または援軍の配列
    }

    SetJoin(ken){
        if(!ken.JoinKenNames.includes(this.KenName))
            ken.JoinKenNames.push(this.KenName);
        if(!this.JoinKenNames.includes(ken.KenName))
            this.JoinKenNames.push(ken.KenName);
    }
}

class Ken {

constructor(kenName, ownerName, heisCount, foodsCount){

this.KenName = kenName;

this.OwnerName = ownerName;

this.HeisCount = heisCount;

this.FoodsCount = foodsCount;

this.Value = Math.ceil(foodsCount / 10000);

this.Done = false; // そのターンで行動は終了したか？

this.Random = Math.random(); // 配列をシャッフルするときに使う乱数

this.JoinKenNames = []; // 隣接する県

this.Invaders = []; // 侵攻軍または援軍の配列

}

SetJoin(ken){

if(!ken.JoinKenNames.includes(this.KenName))

ken.JoinKenNames.push(this.KenName);

if(!this.JoinKenNames.includes(ken.KenName))

this.JoinKenNames.push(ken.KenName);

}

joinKens関数は第一引数の県と第二引数の県を連結させます。

function joinKens(name1, names2){
    const ken1 = kens.find(ken => ken.KenName == name1);
    names2.forEach(name => {
        const ken2 = kens.find(ken => ken.KenName == name);
        ken1.SetJoin(ken2);
    });
}

function joinKens(name1, names2){

const ken1 = kens.find(ken => ken.KenName == name1);

names2.forEach(name => {

const ken2 = kens.find(ken => ken.KenName == name);

ken1.SetJoin(ken2);

});

}

initKens関数はKenオブジェクトを生成して配列に格納します。引数は上記の表から抽出したものです。

let kens = [];

function initKens(){
    kens = [];
    kens.push(new Ken('北海道', '鈴木', 12819, 553200));
    kens.push(new Ken('青森県', '宮下', 3787, 235200));
    kens.push(new Ken('岩手県', '達増', 4411, 247600));
    kens.push(new Ken('宮城県', '村井', 4990, 326500));
    kens.push(new Ken('秋田県', '佐竹', 3385, 456500));
    kens.push(new Ken('山形県', '山形吉村', 4048, 365300));
    kens.push(new Ken('福島県', '内堀', 5699, 317300));
    kens.push(new Ken('茨城県', '大井川', 4847, 319200));
    kens.push(new Ken('栃木県', '福田', 4499, 270300));
    kens.push(new Ken('群馬県', '山本', 3945, 72300));
    kens.push(new Ken('埼玉県', '大野', 7155, 142400));
    kens.push(new Ken('千葉県', '熊谷', 7548, 259500));
    kens.push(new Ken('東京都', '小池', 20351, 484));
    kens.push(new Ken('神奈川県', '黒岩', 7670, 14400));
    kens.push(new Ken('新潟県', '花角', 5534, 631000));
    kens.push(new Ken('富山県', '新田', 3220, 197400));
    kens.push(new Ken('石川県', '馳', 3272, 122900));
    kens.push(new Ken('福井県', '杉本', 2886, 121000));
    kens.push(new Ken('山梨県', '長崎', 3018, 25500));
    kens.push(new Ken('長野県', '阿部', 5136, 187300));
    kens.push(new Ken('岐阜県', '古田', 4400, 100800));
    kens.push(new Ken('静岡県', '川勝', 5709, 76400));
    kens.push(new Ken('愛知県', '大村', 8920, 130800));
    kens.push(new Ken('三重県', '一見', 4345, 130800));
    kens.push(new Ken('滋賀県', '三日月', 3277, 151700));
    kens.push(new Ken('京都府', '西脇', 4104, 72000));
    kens.push(new Ken('大阪府', '大阪吉村', 7761, 22800));
    kens.push(new Ken('兵庫県', '斎藤', 5929, 177000));
    kens.push(new Ken('奈良県', '山下', 3185, 43900));
    kens.push(new Ken('和歌山県', '岸本', 3529, 31000));
    kens.push(new Ken('鳥取県', '平井', 2931, 62200));
    kens.push(new Ken('島根県', '丸山', 3307, 85100));
    kens.push(new Ken('岡山県', '伊原木', 3856, 147200));
    kens.push(new Ken('広島県', '湯崎', 4535, 114500));
    kens.push(new Ken('山口県', '村岡', 3543, 92600));
    kens.push(new Ken('徳島県', '後藤田', 3167, 47600));
    kens.push(new Ken('香川県', '池田', 2806, 55700));
    kens.push(new Ken('愛媛県', '中村', 3831, 68600));
    kens.push(new Ken('高知県', '浜田', 3467, 49700));
    kens.push(new Ken('福岡県', '服部', 7565, 164000));
    kens.push(new Ken('佐賀県', '山口', 3079, 117200));
    kens.push(new Ken('長崎県', '大石', 4016, 48900));
    kens.push(new Ken('熊本県', '蒲島', 4278, 156800));
    kens.push(new Ken('大分県', '佐藤', 3862, 93200));
    kens.push(new Ken('宮崎県', '河野', 3763, 75200));
    kens.push(new Ken('鹿児島県', '塩田', 5008, 86000));
    kens.push(new Ken('沖縄県', '玉城', 3981, 1920));

    // 隣り合った県を連結させる
    joinKens('青森県', ['北海道','秋田県', '岩手県']);
    joinKens('秋田県', ['岩手県','山形県', '宮城県']);
    joinKens('岩手県', ['宮城県']);
    joinKens('宮城県', ['山形県', '福島県']);
    joinKens('山形県', ['新潟県', '福島県']);
    joinKens('福島県', ['茨城県', '栃木県', '新潟県']);
    joinKens('茨城県', ['栃木県', '千葉県','埼玉県']);
    joinKens('千葉県', ['東京都', '埼玉県']);
    joinKens('東京都', ['神奈川県', '埼玉県', '山梨県']);
    joinKens('埼玉県', ['栃木県', '群馬県','山梨県','長野県']);
    joinKens('栃木県', ['群馬県']);
    joinKens('新潟県', ['群馬県', '長野県']);
    joinKens('長野県', ['群馬県', '山梨県', '静岡県', '富山県', '岐阜県', '愛知県']);
    joinKens('神奈川県', ['山梨県', '静岡県']);
    joinKens('静岡県', ['山梨県', '愛知県']);
    joinKens('岐阜県', ['富山県', '愛知県', '石川県', '滋賀県', '福井県', '三重県']);
    joinKens('富山県', ['石川県']);
    joinKens('石川県', ['福井県']);
    joinKens('愛知県', ['三重県']);
    joinKens('福井県', ['滋賀県', '京都府']);
    joinKens('滋賀県', ['三重県', '京都府']);
    joinKens('京都府', ['兵庫県', '大阪府', '奈良県']);
    joinKens('三重県', ['奈良県', '京都府', '和歌山県']);
    joinKens('奈良県', ['和歌山県', '大阪府']);
    joinKens('大阪府', ['和歌山県', '兵庫県']);
    joinKens('鳥取県', ['兵庫県', '岡山県', '広島県', '島根県']);
    joinKens('岡山県', ['兵庫県', '広島県']);
    joinKens('広島県', ['島根県', '山口県']);
    joinKens('島根県', ['山口県']);
    joinKens('香川県', ['徳島県', '愛媛県', '岡山県']);
    joinKens('徳島県', ['高知県', '愛媛県', '兵庫県']);
    joinKens('愛媛県', ['高知県', '広島県']);
    joinKens('福岡県', ['大分県', '熊本県', '佐賀県', '山口県']);
    joinKens('大分県', ['熊本県', '宮崎県']);
    joinKens('宮崎県', ['熊本県', '鹿児島県']);
    joinKens('鹿児島県', ['熊本県', '沖縄県']);
    joinKens('佐賀県', ['長崎県']);
}

let kens = [];

function initKens(){

kens = [];

kens.push(new Ken('北海道', '鈴木', 12819, 553200));

kens.push(new Ken('青森県', '宮下', 3787, 235200));

kens.push(new Ken('岩手県', '達増', 4411, 247600));

kens.push(new Ken('宮城県', '村井', 4990, 326500));

kens.push(new Ken('秋田県', '佐竹', 3385, 456500));

kens.push(new Ken('山形県', '山形吉村', 4048, 365300));

kens.push(new Ken('福島県', '内堀', 5699, 317300));

kens.push(new Ken('茨城県', '大井川', 4847, 319200));

kens.push(new Ken('栃木県', '福田', 4499, 270300));

kens.push(new Ken('群馬県', '山本', 3945, 72300));

kens.push(new Ken('埼玉県', '大野', 7155, 142400));

kens.push(new Ken('千葉県', '熊谷', 7548, 259500));

kens.push(new Ken('東京都', '小池', 20351, 484));

kens.push(new Ken('神奈川県', '黒岩', 7670, 14400));

kens.push(new Ken('新潟県', '花角', 5534, 631000));

kens.push(new Ken('富山県', '新田', 3220, 197400));

kens.push(new Ken('石川県', '馳', 3272, 122900));

kens.push(new Ken('福井県', '杉本', 2886, 121000));

kens.push(new Ken('山梨県', '長崎', 3018, 25500));

kens.push(new Ken('長野県', '阿部', 5136, 187300));

kens.push(new Ken('岐阜県', '古田', 4400, 100800));

kens.push(new Ken('静岡県', '川勝', 5709, 76400));

kens.push(new Ken('愛知県', '大村', 8920, 130800));

kens.push(new Ken('三重県', '一見', 4345, 130800));

kens.push(new Ken('滋賀県', '三日月', 3277, 151700));

kens.push(new Ken('京都府', '西脇', 4104, 72000));

kens.push(new Ken('大阪府', '大阪吉村', 7761, 22800));

kens.push(new Ken('兵庫県', '斎藤', 5929, 177000));

kens.push(new Ken('奈良県', '山下', 3185, 43900));

kens.push(new Ken('和歌山県', '岸本', 3529, 31000));

kens.push(new Ken('鳥取県', '平井', 2931, 62200));

kens.push(new Ken('島根県', '丸山', 3307, 85100));

kens.push(new Ken('岡山県', '伊原木', 3856, 147200));

kens.push(new Ken('広島県', '湯崎', 4535, 114500));

kens.push(new Ken('山口県', '村岡', 3543, 92600));

kens.push(new Ken('徳島県', '後藤田', 3167, 47600));

kens.push(new Ken('香川県', '池田', 2806, 55700));

kens.push(new Ken('愛媛県', '中村', 3831, 68600));

kens.push(new Ken('高知県', '浜田', 3467, 49700));

kens.push(new Ken('福岡県', '服部', 7565, 164000));

kens.push(new Ken('佐賀県', '山口', 3079, 117200));

kens.push(new Ken('長崎県', '大石', 4016, 48900));

kens.push(new Ken('熊本県', '蒲島', 4278, 156800));

kens.push(new Ken('大分県', '佐藤', 3862, 93200));

kens.push(new Ken('宮崎県', '河野', 3763, 75200));

kens.push(new Ken('鹿児島県', '塩田', 5008, 86000));

kens.push(new Ken('沖縄県', '玉城', 3981, 1920));

// 隣り合った県を連結させる

joinKens('青森県', ['北海道','秋田県', '岩手県']);

joinKens('秋田県', ['岩手県','山形県', '宮城県']);

joinKens('岩手県', ['宮城県']);

joinKens('宮城県', ['山形県', '福島県']);

joinKens('山形県', ['新潟県', '福島県']);

joinKens('福島県', ['茨城県', '栃木県', '新潟県']);

joinKens('茨城県', ['栃木県', '千葉県','埼玉県']);

joinKens('千葉県', ['東京都', '埼玉県']);

joinKens('東京都', ['神奈川県', '埼玉県', '山梨県']);

joinKens('埼玉県', ['栃木県', '群馬県','山梨県','長野県']);

joinKens('栃木県', ['群馬県']);

joinKens('新潟県', ['群馬県', '長野県']);

joinKens('長野県', ['群馬県', '山梨県', '静岡県', '富山県', '岐阜県', '愛知県']);

joinKens('神奈川県', ['山梨県', '静岡県']);

joinKens('静岡県', ['山梨県', '愛知県']);

joinKens('岐阜県', ['富山県', '愛知県', '石川県', '滋賀県', '福井県', '三重県']);

joinKens('富山県', ['石川県']);

joinKens('石川県', ['福井県']);

joinKens('愛知県', ['三重県']);

joinKens('福井県', ['滋賀県', '京都府']);

joinKens('滋賀県', ['三重県', '京都府']);

joinKens('京都府', ['兵庫県', '大阪府', '奈良県']);

joinKens('三重県', ['奈良県', '京都府', '和歌山県']);

joinKens('奈良県', ['和歌山県', '大阪府']);

joinKens('大阪府', ['和歌山県', '兵庫県']);

joinKens('鳥取県', ['兵庫県', '岡山県', '広島県', '島根県']);

joinKens('岡山県', ['兵庫県', '広島県']);

joinKens('広島県', ['島根県', '山口県']);

joinKens('島根県', ['山口県']);

joinKens('香川県', ['徳島県', '愛媛県', '岡山県']);

joinKens('徳島県', ['高知県', '愛媛県', '兵庫県']);

joinKens('愛媛県', ['高知県', '広島県']);

joinKens('福岡県', ['大分県', '熊本県', '佐賀県', '山口県']);

joinKens('大分県', ['熊本県', '宮崎県']);

joinKens('宮崎県', ['熊本県', '鹿児島県']);

joinKens('鹿児島県', ['熊本県', '沖縄県']);

joinKens('佐賀県', ['長崎県']);

}

完全にネタゲーですが、次回に続きます。

動作確認はこちらから

JavaScript 都道府県対抗戦国シミュレーションゲームをつくる（1）

ゲームの仕様

侵攻について

戦闘について

データについて

HTML部分

Kenクラスの定義

関連記事

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ