Einführung in JS zur Implementierung des Backgammon-Schnittstellendesigns

Kostenlose Lernempfehlung: 视JS-Video-Tutorial

Anforderungsanalyse und Code-Implementierung

Der erste Abschnitt des Tuchlayouts

1. Canvas-Design

Neuer CSS-Ordner erstellen eine neue style.css-Datei;

1. Leinwand in die style.css-Datei schreiben;

2. Parametererklärung

3. canvas{ display: block; margin: 50px auto; box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9; }margin 50px auto// bedeutet, dass die Leinwand zentriert ist;

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

   offset-x: (wie hier -2px) ist erforderlich und der Wert kann positiv oder negativ sein. Offset-x-Position des horizontalen Schattens.
offset-y: (wie hier -2px) ist erforderlich und der Wert kann positiv oder negativ sein. Offset-Y-Position des vertikalen Schattens.

Unschärfe: (wie hier 2px) ist optional und kann nur positive Werte annehmen. Unschärferadius Schattenunschärferadius, 0 bedeutet keinen Unschärfeeffekt. Je größer der Wert, desto unschärfer wird der Schattenrand.

Farbe: optional, die Farbe des Schattens. Wenn dies nicht festgelegt ist, verwendet der Browser die Standardfarbe, normalerweise Schwarz. Die Standardfarbe variiert jedoch je nach Browser. Daher wird empfohlen, sie nicht wegzulassen.

**

2. 450 Pixel, davon sind auf beiden Seiten insgesamt 15 Pixel vorhanden, und jedes kleine rechteckige Feld ist 30 x 30 Pixel groß.

var chess = document.getElementById('chess');var context = chess.getContext('2d');//画一个二维画布context.strokeStyle = "#BFBFBF";var drawChessBoard = function (){
    for (var i=0; i<br><br>3 <br>Abschnitt 3 Schachfiguren-Design

1. Code schreiben

//初始化位置数组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. Rendering

(Sie klicken nach dem Zufallsprinzip auf das Schachbrett und es erscheinen nacheinander schwarze und weiße Schachfiguren)

Abschnitt 4 Hintergrund hinzugefügt

1. Steht auf und probiert es aus!

Verwandte kostenlose Lernempfehlungen:

Javascript

(Video)

Das obige ist der detaillierte Inhalt vonEinführung in JS zur Implementierung des Backgammon-Schnittstellendesigns. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!