乙Py先生のプログラミング教室
初学者のためのプログラミング学習サイト

Javascript

先日Hunter x Hunterの架空のボードゲームである
軍儀が発売されたのですが・・・
買えなかったので代わりに
軍儀っぽいナニカを作ってみました。


解説動画はこちら



さて軍儀なんですが
漫画を読んでない人にとっては
何じゃそれってものだと思いますので
軽めに説明しておくと

東ゴルトー発祥のボードゲームで
非常に将棋に似ています。

9x9のマスにコマを置き
「師(スイ)」を取ったら勝ちです。

相手のコマは取ることも出来て
自分のコマとして利用することも出来て
これらの駒を盤上に打つことは
新(あらた)と呼ばれている

また将棋とは違うルールとして
駒を3枚まで重ねる(ツケる)ことが可能
 
コマの動きは将棋とは違うようなので
公開されているコマの動きが分かるものを
JavaScriptで再現してみることとしました。

なお対戦は出来ず、コマの動きを
確かめるのみの実装です。

初期盤面はこんな感じにしました。


スクリーンショット 2022-03-26 17.21.12

9x9盤面に初期配置で適当に配置しています。

最初は簡単なコマから



スクリーンショット 2022-03-26 17.18.05

将棋だと歩のようなコマですが
前後に1マス進めるのが異なっています。

続いて槍

スクリーンショット 2022-03-26 17.17.33

槍は前に2マス、斜め前と後ろに1マス進めます。
将棋の槍と違って面白い動きです。

続いて忍
スクリーンショット 2022-03-26 17.18.34


忍びは斜めに2マスという
トリッキーな動きです。
将棋の桂馬とも違って、少し考えるコマですね。

続いて小

スクリーンショット 2022-03-26 17.16.58

これは将棋の金と同じ動きです。
使いやすそうですね。

続いて中

スクリーンショット 2022-03-26 17.19.45

中は将棋の角の成り(馬)と同じ動きです。
初めからバシバシ動けるのは強いですね。

続いて大
スクリーンショット 2022-03-26 17.19.58

大は将棋の飛車の成り(龍王)と同じ動きです。
最初から突っ込めるので最強のコマかもしれません。

最後に師
スクリーンショット 2022-03-26 17.19.20

これは将棋の王将と同じなので
馴染みがありますね。

このほかにもまだまだコマの種類があるようですが
公開されてないみたいなので実装出来てないです。

他のルールとして
ツケを行った場合は3コマまで重ねられ
1コマ重ねるごとに、移動出来るマスが
1マス増えるというルールです。

まだ実装出来ていませんが
今後軍儀のルールが確定した際には
実装を進めてみようかと思っています。

そうすればWEB上で対戦とかで遊べそうですね。

今回は
Hunter x Hunterの架空のボードゲームである
軍儀っぽいナニカをJSで作ってみました。

早く再販されますように
それでは。


先日セガさんが
ぷよぷよのプログラミング講座を
公開していましたので
早速ぷよぷよ作ってみました。

解説動画はこちら




さて
まず、講座はこちらです。
ぷよぷよプログラミング

monacaと言うツールでのプログラミング講座なので
アカウントの作成が必要です。

メアドを登録するだけなので簡単だと思います。
プランはFreeプランを選びましょう。

さて、まず講座にアクセスすると
初級
中級
上級

3コースあります。

初級は比較的書くコードが少なめ
中級は書くコードが増え
上級は1から全部作る
と言う難易度になっています。

基本的なソースコードは
公開されているので
それを写経する形で講座は進んでいきます。

monacaを開くとこんな感じの画面になります。
スクリーンショット 2020-06-27 16.06.29

左側にはファイル群
右側にはソースが表示されます。

「実行」から「プレビュータブを表示」
でテスト実行ができます。

スクリーンショット 2020-06-27 16.07.03

こんな感じのデバック画面が出て来て
操作もできます。

プロジェクトの基本構成は
土台となるindex.html
ゲームの操作を司るplayer.js
画面上の操作を司るstage.js
コンフィグ設定ファイルのconfig.js

あとはimg配下にぷよの画像があります。

講座の内容としては
player.jsを書き換えて
少しづつ操作方法を
増やしていく内容になっていますね。


初級では書き加える部分がかなり少なく
デバッグも簡単なので
早ければ1時間ほどで終わります。

でも中級になってくると
書く場所と量も増えて来て
デバッグも大変になります。

上級は1から全部なので、何日かかるか
分からないですねーーー。

monacaはアプリを作るサービスのようなので
実機にこのプロジェクトをビルドして
動かすこともできるっぽいですね。

ただ、スマホだとコントローラー無いので
相当厳しそうではあります。

monacaでは言語はJavascriptを用いているので
基本的にはブラウザーで開発するのと
あまり変わりはありません。

比較的デバッグも簡単ですね。

難点は
自分があまりぷよぷよ上手く無いので
デバッグが大変だと言うことくらいでしょうか。

ちゃんと連鎖で消える所まで行った時は
少し感動してしまいました。


昔ゲームプログラミングを勉強していた時は
セガの方が出している700Pほどの超分厚い本を見ながら
プログラミングの方法をを学んでいました。

パズルゲームは
プログラミングの教材としてはピカイチです。

特にテトリスとかぷよぷよは
最高の題材では無いでしょうか?

難易度としてはぷよぷよの方が
難しいかなと思いますが

こう言った教材が無料で公開されていること自体
セガさんに感謝したいところではあります。

ソースコードなどはゲーム業界を目指す人は
相当参考になるんじゃ無いでしょうか?

ゲーム業界を目指さない人も
Javascriptの制御部分は
かなり参考になると思います。

やって損は無い講座ですね。

おヒマな方は是非やってみてください。
それでは。





はい

先日TBSで放送されていた
「水曜日のダウンタウン」

こちらで放送されていた説
「三つ巴対決そこそこ盛り上がる説」


これに出てきてた
三つ巴オセロをJavascriptで再現してみました

解説動画はこちら



さて
ここではHTML , Javascript , CSSを用いて
オセロゲームを再現しています。

黒白赤のターン制でボードは8x8マス
自分の色以外の色であれば
ひっくり返すことができることとしました。


最初の配置は
番組内で用いられていた配置を採用しています。

スクリーンショット 2019-03-21 14.27.48

これは3つは並べておかないと
黒白のターンで赤が全て潰されてしまうからです。

初手で黒が赤白を挟みにゆくと

スクリーンショット 2019-03-21 14.28.29

こうなります。

黒を置いた時に
間のコマが赤か白であれば
ひっくり返せるようなアルゴリズムです。

続けて行くと
スクリーンショット 2019-03-21 14.28.39

こんな感じで埋まって行き

スクリーンショット 2019-03-21 14.28.53

最後はこうなりました。

どう端を取るか
どう取らせるか

3人対戦だと
ここら辺を考えるのが
だいぶ面白くなりますね

通常のオセロよりも
盛り上がるかもと思ってみたり。

もしかしたら
9x9マスとか増やしたほうが
良いのかもしれません。


パスをどうするとか
レギュレーションをどうするかとか
ルール決めが
三つ巴オセロゲームを面白くするための
重要項目になりますね。

4人対戦とか
長方形や星型、いびつな形でのボード
2人組みでチーム対戦できるとか
(黒白 , 青赤で相手チームの色をひっくり返せる)
Hexボードとか・・・


既存のゲームでも
少し改造してやることで
全く違ったゲームになり
遊びの幅が広がりますね。

もし何か
改造して欲しい、検証して欲しい
ゲームなどがあればTwitterやYotube他
コメントいただけると幸いです。

ソースコードも
希望があればお送りしたいと思いますので
コメントよろしくお願いいたします。

それでは!!





このページのトップヘ