enchant.jsでハースストーンの「チェスの親善試合」を再現しましたが、2人対戦しかできなかったので、
1人プレイの相手をしてくれるAIをJavaScriptで作ってみました。
将棋AIのゲーム木を評価関数で数値化する方式を真似して、AI側の行動のゲーム木を評価関数で数値化します。
ソースはこんな感じです。→ソース
AIと対戦してみる(モード選択で「SinglePlay」を選ぶとAIが対戦相手になってくれます。)
2017/06/18
2017/06/05
enchant.jsのゲーム画面の中央表示
enchant.jsで作成したゲームをブラウザの中央に表示する方法です。
enchant.jsでゲーム画面を表示すると、(特に指定をしない場合)ブラウザの左上に表示されます。
これを下のように、中央に表示し余白には背景画像を表示します。
以下のような関数を作成し、この関数をenchant.coreのインスタンスを引数に呼び出すとゲーム画面が中央表示となります。
実際に中央表示を行っているサンプルソースをGithubに作成しました。
ソースコード(Github)
enchant.jsでゲーム画面を表示すると、(特に指定をしない場合)ブラウザの左上に表示されます。
これを下のように、中央に表示し余白には背景画像を表示します。
以下のような関数を作成し、この関数をenchant.coreのインスタンスを引数に呼び出すとゲーム画面が中央表示となります。
// enchant.jsの表示をセンタリング
var moveStageToCenter = function(core) {
var stagePos = {
top: (window.innerHeight - (core.height * core.scale)) / 2,
left: (window.innerWidth - (core.width * core.scale)) / 2,
};
var stage = document.getElementById('enchant-stage');
stage.style.position = 'absolute';
stage.style.top = stagePos.top + 'px';
stage.style.left = stagePos.left + 'px';
core._pageX = stagePos.left;
core._pageY = stagePos.top;
};
また、センタリングした結果できた余白には、cssでbody要素に背景画像を設定します。body {
background-image: url(./img/hexabump.png);
background-repeat: repeat;
}
実際に中央表示を行っているサンプルソースをGithubに作成しました。
ソースコード(Github)
2017/06/04
【ハースストーン】チェスの親善試合
ハースストーンの酒場の喧嘩で結構前にあった「チェスの親善試合」が面白かったので、JavaScriptで再現してみました。
下のURLを開いた人同士で対戦できます。
https://arahkesh.kysaeed.com
TODO:
下のURLを開いた人同士で対戦できます。
https://arahkesh.kysaeed.com
TODO:
- 制限時間を作る
- 切断の扱いを決める
- もっと軽快にカードを出せるようにしたほうがいいかも
- 友だちと対戦機能
登録:
投稿 (Atom)