JS を導入してバックギャモンのインターフェイス設計を実装する

#無料学習の推奨事項:

js ビデオ チュートリアル

要件分析とコード実装

セクション 1 キャンバス スタイル レイアウト

1. キャンバス デザイン

1. 新しい CSS ファイル フォルダーを作成します。新しい style.css ファイル;

#style.css ファイルにキャンバスを書き込む;
#canvas{ 表示: ブロック ; マージン: 50px auto; box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9; }

3. パラメータの説明
margin 50px auto// キャンバスが中央に配置されることを意味します;

box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9//

offset- x: (ここでは -2px など) は必須で、値は正または負にすることができます。水平方向の影のオフセット x 位置。

offset-y: (ここでは -2px など) は必須で、値は正または負にすることができます。垂直影のオフセット y 位置。

ぼかし: (ここでは 2px など) はオプションであり、正の値のみを取ることができます。 Blur-radius シャドウのブラー半径。0 はブラー効果がないことを意味します。値が大きいほど、シャドウのエッジがぼやけます。
color: オプション、影の色。設定しない場合、ブラウザはデフォルトの色 (通常は黒) を使用しますが、デフォルトの色はブラウザによって異なるため、省略しないことをお勧めします。
**

2. レンダリング

##セクション 2 チェス盤のデザイン

1.サイズ設計

は、全長450px、幅450pxの14*14個の長方形の枠に分割され、両側合計15pxが残ります。小さな長方形のボックス 30px × 30px

2. js コードの作成 (描画)

var chess = document.getElementById('chess');var context = chess.getContext('2d');//画一个二维画布context.strokeStyle = "#BFBFBF";var drawChessBoard = function (){
    for (var i=0; i<p><strong>3. レンダリング</strong></p><p><strong> </strong></p><p>セクション 3 チェスの駒のデザイン<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/052/4bc5d73b9e9b92ad580c2ffa0fa12484-1.png?x-oss-process=image/resize,p_40" class="lazy" alt="JS を導入してバックギャモンのインターフェイス設計を実装する"></p><p><strong>1. コードの作成</strong></p><pre class="brush:php;toolbar:false">//初始化位置数组var chessBoard = [];for(var i = 0;i<pre class="brush:php;toolbar:false">//画棋子var onstep = function (i, j, flag){//i,j代表棋子的索引位置，flag标记黑棋白棋
    context.beginPath();
    context.arc(15+i*30, 15+j*30, 13,0,2*Math.PI);
    context.closePath();
    var gradient = context.createRadialGradient(15+i*30+2,15+j*30-2,13,15+i*30+2,15+j*30-2,0);
    if(flag){//如果flag为真则黑棋
        gradient.addColorStop(0, "#0A0A0A");
        gradient.addColorStop(1,"#636766")
    }else {//白棋
        gradient.addColorStop(0, "#D1D1D1");
        gradient.addColorStop(1,"#F9F9F9");
    }
    context.fillStyle=gradient;
    context.fill();}

//点击时触发，获得所点击的位置，然后判断该位置有没有棋子，若没有也就是if判断，调用onstep函数画黑棋（or白棋）chess.onclick = function (e){
    var x = e.offsetX;
    var y = e.offsetY;
    var i = Math.floor(x/30);
    var j = Math.floor(y/30);
    if(chessBoard[i][j]==0){
        onstep(i,j,flag);
       chessBoard[i][j] = 1;
        flag = !flag;
    }}

2. レンダリング

(チェス盤上でランダムにクリックすると、黒のチェスと白のチェスが順番に表示されます)

セクション 4 の背景を追加しました

1. コードの作成

var pic = new Image();pic.src = "images/background.jpg";pic.onload = function (){
    context.drawImage(pic, 0, 0, 450, 450);
    drawChessBoard();}//注：棋盘设计中js编写最后一句可以删除了，因为在这里调用了drawChessBoard();

2. レンダリング

これは、index.html# のコードです。 # #

nbsp;html>
    <meta>
    <title>五子棋</title>
    <link><canvas></canvas><script></script>

プロジェクト構造

このようなシンプルなバックギャモン UI インターフェイスが設計されました。早速試してみてください。

関連する無料学習の推奨事項:

javascript

(ビデオ)

以上がJS を導入してバックギャモンのインターフェイス設計を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。