ホームページ > 記事 > ウェブフロントエンド > JS を導入してバックギャモンのインターフェイス設計を実装する
#無料学習の推奨事項:
要件分析とコード実装
セクション 1 キャンバス スタイル レイアウト
1. キャンバス デザイン
box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9//offset- x: (ここでは -2px など) は必須で、値は正または負にすることができます。水平方向の影のオフセット x 位置。
offset-y: (ここでは -2px など) は必須で、値は正または負にすることができます。垂直影のオフセット y 位置。ぼかし: (ここでは 2px など) はオプションであり、正の値のみを取ることができます。 Blur-radius シャドウのブラー半径。0 はブラー効果がないことを意味します。値が大きいほど、シャドウのエッジがぼやけます。
2. レンダリング
color: オプション、影の色。設定しない場合、ブラウザはデフォルトの色 (通常は黒) を使用しますが、デフォルトの色はブラウザによって異なるため、省略しないことをお勧めします。
**
##セクション 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="https://img.php.cn/upload/article/000/000/052/4bc5d73b9e9b92ad580c2ffa0fa12484-1.png" 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>プロジェクト構造
javascript
以上がJS を導入してバックギャモンのインターフェイス設計を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。