VUE+CanvasはシンプルなGobangゲームの全プロセスを実現します
序文レイアウトの点では、Gobang はランダムな動きを目的とするゲームよりも実装がはるかに簡単で、アイデアも明確です。Gobang は次のように分かれています。 （１）チェス盤を描く。 （２）クリックイベントをリッスンし、黒と白のチェスの駒を描きます。 （３）各移動後、５つの駒がつながっているかどうかを判定します。つながっている場合は勝ちです。 一番複雑なのは、ゴバンが勝ったかどうかをどうやって判断するかということでしょう。そこで、まずは簡単なところから、チェス盤を描いてみましょう。 1. チェス盤を描くチェス盤は非常にシンプルです。交差する水平線と垂直線を持つ 15 x 15 のチェス盤を描きましょう。
チェッカーボードを描画する() {
// チェス盤を描画します let _this = this;
_this.ctx.beginPath();
_this.ctx.fillStyle = "#fff";
_this.ctx.rect(0, 0, 450, 450);
_this.ctx.fill();
(var i = 0; i < 15; i++) の場合 {
_this.ctx.beginPath();
_this.ctx.strokeStyle = "#D6D1D1";
_this.ctx.moveTo(15 + i * 30, 15); // 30px間隔で垂直に15本の線を描きます。
_this.ctx.lineTo(15 + i * 30, 435);
_this.ctx.stroke();
_this.ctx.moveTo(15, 15 + i * 30); // 30px間隔で水平方向に15本の線を描きます。
_this.ctx.lineTo(435, 15 + i * 30);
_this.ctx.stroke();
_this.resultArr.push(新しい配列(15).fill(0));
}
}まず 450 × 450 の正方形をベースとして使用し、その周りに幅 15 の空白を残し、間隔 30 で線を描きます。 for ループでは、15 * 15 の 2 次元配列も初期化し、0 で埋めました。はい、これは動きを記録するために使用されます。
2. クリックイベントをリッスンして黒と白のチェスの駒を描画するさて、DOM を取得したら、クリック イベントをリッスンしてチェスの駒を描画します。
ハンドルクリック(イベント) {
x = event.offsetX - 70 とします。
y = event.offsetY - 70 とします。
(x < 15 || x > 435 || y < 15 || y > 435) の場合 {
// 範囲外をクリックすると return;
}
this.drawChess(x, y);
if(this.winGame){
この.drawResult();
戻る;
}
this.whiteTurn = !this.whiteTurn;
テキストを描画します。
}チェスの駒を描くコード:
チェスを描く(x, y) {
_this = this とします。
let xLine = Math.round((x - 15) / 30); // 垂直線の数 x let yLine = Math.round((y - 15) / 30); // 水平線の数 y if(_this.resultArr[xLine][yLine] !== 0){
戻る;
}
grd = _this.ctx.createRadialGradient( とする
x行 * 30 + 15、
yライン * 30 + 15、
4、
x行 * 30 + 15、
yライン * 30 + 15、
10
);
grd.addColorStop(0, _this.whiteTurn ? "#fff" : "#4c4c4c");
grd.addColorStop(1, _this.whiteTurn ? "#dadada" : "#000");
_this.ctx.beginPath();
_this.ctx.fillStyle = grd;
_this.ctx.arc(
x行 * 30 + 15、
yライン * 30 + 15、
10、
0,
2 * 数学.PI、
間違い
);
_this.ctx.fill();
_this.ctx.closePath();
_this.setResultArr(xLine, yLine);
_this.checkResult(xLine, yLine);
}クリックした座標に最も近いチェス盤の交点を計算するのは簡単です。 もちろん、そこにすでに駒が置かれている場合は、戻る必要があります。次に、交差点に白または黒の駒を描き、ここでグラデーション塗りつぶしを使用してチェスの駒をよりリアルに見せます。次に、チェスの駒の状態を対応する 2 次元配列に記録します。
setResultArr(m, n) {
_this = this とします。
_this.resultArr[m][n] = _this.whiteTurn ? 1 : 2; // 白は1、黒は2
}
3. 五番勝負の勝敗結果を確認する勝ち負けの結果はどうやって決まるのでしょうか？肉眼では、現在の動きを 0,0 原点とする座標系を確立し、0°、180°、45°、135° の 4 つの線上に 5 つの連続した駒があるかどうかを判断するだけです。直接走査してカウントするよりも、4 行のデータを取り出して、1 文字または 2 文字が 5 つ連続しているかどうかを判断する方がよい方法です。 配置の配列座標が[m, n]であるとします。 （１）水平線の結果配列文字列：this.resultArr[m].join(''); （２）縦線の結果配列文字列：
for(i = 0; i<15; i++){
水平方向の行をプッシュします(_this.resultArr[i][n]);
}
（３）135°（左上から右下）：jの範囲は0から15なので、this.resultArr[m - j][n - j]を取って一時配列の先頭にシフト解除し、this.resultArr[m + j][n + j]を取って一時配列の末尾に置いて結果を形成する。 （4）45°（左下から右上）：jの範囲は0から15なので、this.resultArr[m + j][n - j]を取って一時配列の先頭にシフト解除し、this.resultArr[m - j][n + j]を取って一時配列の末尾に置いて結果を形成します。 もちろん、配列が範囲外であるかどうかを判断する必要があります。 結果文字列を取得した後、「22222」や「11111」のような文字列があるかどうかを確認します。ある場合は勝利を意味します。
checkResult(m,n){ // 連結されたピースが 5 つあるかどうかを確認します。let _this = this;
checkStr = _this.whiteTurn ? CheckStrWhite : CheckStrBlack とします。
// 4行の1次元配列[m,n]を取り出します。let lineVertical = _this.resultArr[m].join('');
(lineVertical.indexOf(checkStr) > -1) の場合 {
_this.winGame = true;
戻る;
}
lineHorizontal = [] とします。
for(i = 0; i<15; i++){
水平方向の行をプッシュします(_this.resultArr[i][n]);
}
水平線 = 水平線.join('');
(lineHorizontal.indexOf(checkStr) > -1) の場合 {
_this.winGame = true;
戻る;
}
135行目を[]とします。
(j = 0; j < 15; j++){
if(m - j >= 0 && n - j >= 0){ // 左上隅 line135.unshift(_this.resultArr[m - j][n -j]);
}
if(j > 0 && m + j < 15 && n + j < 15){ // 右下隅 line135.push(_this.resultArr[m + j][n + j]);
}
}
行135 = 行135.join('');
if(line135.indexOf(checkStr) > -1){
_this.winGame = true;
戻る;
}
45行目を[]とします。
(j = 0; j < 15; j++){
if(m + j < 15 && n - j >= 0){ // 右上隅 line45.unshift(_this.resultArr[m + j][n -j]);
}
if(j > 0 && m - j >=0 && n + j < 15){ // 左下隅 line45.push(_this.resultArr[m - j][n + j]);
}
}
行45 = 行45.join('');
if(line45.indexOf(checkStr) > -1){
_this.winGame = true;
戻る;
}
}
最後に、どちらが勝つかを示します。
これで、シンプルな白黒チェスゲームが完成です~~~~~ いつものように、ソースコードは次のとおりです。
<テンプレート>
<div class="gobang">
<canvas id="gobang" width="800" height="600"></canvas>
</div>
</テンプレート>
<スクリプト>
定数CheckStrWhite = "11111";
定数CheckStrBlack = "22222";
エクスポートデフォルト{
名前: 「ゴバン」
データ（） {
戻る {
ctx: null、
勝利ゲーム: 偽、
whiteTurn: false, // 白ターン; true - 黒ターンresultArr: [] // チェスの駒の位置を記録する配列};
},
マウント() {
_this = this とします。
コンテナを document.getElementById("gobang");
container.addEventListener("クリック", _this.handleClick);
_this.ctx = コンテナ.getContext("2d");
_this.ctx.translate(70,70);
_this.drawCheckerboard();
},
計算:{
チェステキスト(){
this.whiteTurn ? 'ホワイトチェス' : 'ブラックチェス' を返します。
}
},
メソッド: {
チェッカーボードを描画する() {
// チェス盤を描画します let _this = this;
_this.ctx.beginPath();
_this.ctx.fillStyle = "#fff";
_this.ctx.rect(0, 0, 450, 450);
_this.ctx.fill();
(var i = 0; i < 15; i++) の場合 {
_this.ctx.beginPath();
_this.ctx.strokeStyle = "#D6D1D1";
_this.ctx.moveTo(15 + i * 30, 15); // 30px間隔で垂直に15本の線を描きます。
_this.ctx.lineTo(15 + i * 30, 435);
_this.ctx.stroke();
_this.ctx.moveTo(15, 15 + i * 30); // 30 ピクセル間隔で水平に 15 本の線を描きます。チェス盤は 14*14 です。
_this.ctx.lineTo(435, 15 + i * 30);
_this.ctx.stroke();
_this.resultArr.push(新しい配列(15).fill(0));
}
_this.drawText();
},
チェスを描く(x, y) {
_this = this とします。
let xLine = Math.round((x - 15) / 30); // 垂直線の数 x let yLine = Math.round((y - 15) / 30); // 水平線の数 y if(_this.resultArr[xLine][yLine] !== 0){
戻る;
}
grd = _this.ctx.createRadialGradient( とする
x行 * 30 + 15、
yライン * 30 + 15、
4、
x行 * 30 + 15、
yライン * 30 + 15、
10
);
grd.addColorStop(0, _this.whiteTurn ? "#fff" : "#4c4c4c");
grd.addColorStop(1, _this.whiteTurn ? "#dadada" : "#000");
_this.ctx.beginPath();
_this.ctx.fillStyle = grd;
_this.ctx.arc(
x行 * 30 + 15、
yライン * 30 + 15、
10、
0,
2 * 数学.PI、
間違い
);
_this.ctx.fill();
_this.ctx.closePath();
_this.setResultArr(xLine, yLine);
_this.checkResult(xLine, yLine);
},
setResultArr(m, n) {
_this = this とします。
_this.resultArr[m][n] = _this.whiteTurn ? 1 : 2; // 白は1、黒は2
},
checkResult(m,n){ // 連結されたピースが 5 つあるかどうかを確認します。let _this = this;
checkStr = _this.whiteTurn ? CheckStrWhite : CheckStrBlack とします。
// 4行の1次元配列[m,n]を取り出します。let lineVertical = _this.resultArr[m].join('');
(lineVertical.indexOf(checkStr) > -1) の場合 {
_this.winGame = true;
戻る;
}
lineHorizontal = [] とします。
for(i = 0; i<15; i++){
水平方向の行をプッシュします(_this.resultArr[i][n]);
}
水平線 = 水平線.join('');
(lineHorizontal.indexOf(checkStr) > -1) の場合 {
_this.winGame = true;
戻る;
}
135行目を[]とします。
(j = 0; j < 15; j++){
if(m - j >= 0 && n - j >= 0){ // 左上隅 line135.unshift(_this.resultArr[m - j][n -j]);
}
if(j > 0 && m + j < 15 && n + j < 15){ // 右下隅 line135.push(_this.resultArr[m + j][n + j]);
}
}
行135 = 行135.join('');
if(line135.indexOf(checkStr) > -1){
_this.winGame = true;
戻る;
}
45行目を[]とします。
(j = 0; j < 15; j++){
if(m + j < 15 && n - j >= 0){ // 右上隅 line45.unshift(_this.resultArr[m + j][n -j]);
}
if(j > 0 && m - j >=0 && n + j < 15){ // 左下隅 line45.push(_this.resultArr[m - j][n + j]);
}
}
行45 = 行45.join('');
if(line45.indexOf(checkStr) > -1){
_this.winGame = true;
戻る;
}
},
テキストを描画する(){
_this = this とします。
_this.ctx.clearRect(435 + 60, 0, 100, 70);
_this.ctx.fillStyle = "#fff";
_this.ctx.font="20px Arial";
_this.ctx.fillText('このラウンド:' + _this.chessText, 435 + 70, 35);
},
描画結果(){
_this = this とします。
_this.ctx.fillStyle = "#ff2424";
_this.ctx.font="20px Arial";
_this.ctx.fillText(_this.chessText+'勝ちました!', 435 + 70, 70);
},
ハンドルクリック(イベント) {
x = event.offsetX - 70 とします。
y = event.offsetY - 70 とします。
(x < 15 || x > 435 || y < 15 || y > 435) の場合 {
// 範囲外をクリックすると return;
}
this.drawChess(x, y);
if(this.winGame){
この.drawResult();
戻る;
}
this.whiteTurn = !this.whiteTurn;
テキストを描画します。
}
}
};
</スクリプト>
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイル スコープ lang="scss">
.ゴバン {
#ゴバン {
背景: #2a4546;
}
}
</スタイル>要約するVUE+Canvas を使って簡単な Gobang ゲームを実装する方法についての記事はこれで終わりです。VUE+Canvas Gobang ゲームに関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux で PHP curl 拡張機能をインストールする方法の詳細な説明
>>: MySQL における主キーが 0 であることと主キーの自己選択制約の関係についての詳しい説明 (詳細)
推薦する
ストリーマーボタンの効果を実現するCSS3アニメーション
CSS3 を学習する過程で、CSS3 属性を使用すると多くのクールな効果を簡単に実現できることが分か...
js QRコードスキャンログインの原理についての簡単な説明
目次QRコードログインの真髄QRコードを理解するシステム認証メカニズムQRコードをスキャンしてログイ...
Docker はリモート接続のサンプルコードを実現するために MySQL をデプロイします
1.docker search mysql查看mysql版本 2. docker pull mysq...
Dockerfile における ENTRYPOINT と CMD の違い
Docker システムの学習チュートリアルでは、Dockerfile を使用して Docker イメ...
IE6のバグと修正は予防戦略です
元記事:究極の IE6 チートシート: 25 以上の Internet Explorer 6 のバグ...
axiosのシンプルなカプセル化と使用例コード
序文最近、プロジェクトを構築しているときに、リクエストのカプセル化について考え、どのようにカプセル化...
Vueのキーボードイベントの詳細な説明
目次共通キーエイリアスエイリアスが指定されていないキーシステム修飾キーカスタムキーエイリアス要約する...
2つのNode.jsプロセスがどのように通信するかの詳細な説明
目次序文異なるコンピュータ上の 2 つの Node.js プロセス間の通信TCPソケットの使用HTT...
JavaScriptカルーセルの実装について
今日もとても実践的な事例です。名前を聞くだけで高度で難しそうですよね？今日はカルーセル画像の真髄を簡...
MySQL マルチテーブル共同クエリ操作例の分析
この記事では、MySQL のマルチテーブル共同クエリ操作について説明します。ご参考までに、詳細は以下...
React Hooks の一般的な使用シナリオ (概要)
目次1. ステートフック1. 基本的な使い方2. 更新3. 合併を実現する4. 遅延初期化状態5. ...
mysql5.7.17.msi インストール グラフィック チュートリアル
mysql-5.7.17.msiのインストール、スクリーンショットに従ってください、ステップバイステ...
Vue でバイナリ ファイル ストリームを受信して PDF プレビューを実現する方法
バックグラウンド コントローラー @RequestMapping("/getPDFStre...
MySQLが中国語の文字を挿入する問題を永久に解決するコツを教えます
目次序文最初のステップ:ステップ2: このmy.iniを変更する要約する序文問題の説明:不正な文字列...
Linux でローカル コンピューターとリモート サーバーのポートが接続されているかどうかを確認する方法
以下のように表示されます。 1. ssh -v -p [ポート番号] [ユーザー名]@[IPアドレス...