Présentation de JS pour implémenter la conception de l'interface de backgammon

Recommandation d'apprentissage gratuite : Tutoriel vidéo js

Analyse des exigences et implémentation du code

Section 1 Disposition du style de toile

1. Conception de la toile

1. Nouveau dossier de fichiers CSS, créez un nouveau fichier style.css

2. Écrivez le canevas dans le fichier style.css

3. canvas{ display: block; margin: 50px auto; box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9; }

4. Explication des paramètres

marge 50px auto// signifie que le canevas est centré

box-shadow : -2px ; -2px 2px #EFEFEF,5px 5px 5px #B9B9B9//
offset-x : (comme -2px ici) est requis et la valeur peut être positive ou négative. position offset-x de l'ombre horizontale.
offset-y : (comme -2px ici) est requis et la valeur peut être positive ou négative. position décalée y de l’ombre verticale.
flou : (comme 2px ici) est facultatif et ne peut prendre que des valeurs positives. Blur-radius Rayon de flou de l'ombre, 0 signifie aucun effet de flou, plus la valeur est grande, plus le bord de l'ombre est flou.
couleur : facultatif, la couleur de l'ombre. S'il n'est pas défini, le navigateur utilisera la couleur par défaut, généralement le noir, mais la couleur par défaut varie selon les navigateurs, il est donc recommandé de ne pas l'omettre.
**

2. Rendu

Section 2 Conception de la carte

1. Le design de taille

est divisé en 14*14 cadres rectangulaires, d'une longueur totale de 450 px et d'une largeur de 450 px, avec un total de 15 px restant des deux côtés. . Chaque petit rectangle Box 30px par 30px

2. écriture de code js (dessin)

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><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/052/4bc5d73b9e9b92ad580c2ffa0fa12484-1.png" class="lazy" alt="Présentation de JS pour implémenter la conception de linterface de backgammon">Section 3 Conception des pièces d'échecs</p><p><strong></strong>1. Écriture de code</p><p></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. 🎜>

(Vous cliquez au hasard sur l'échiquier et les échecs en noir et blanc apparaîtront à leur tour)

Arrière-plan de la section 4 ajouté

1. Ecriture du code

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

2. Rendu

Voici le code dans index.html

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

Structure du projet

Une interface utilisateur de backgammon si simple a été conçue, dépêchez-vous et essayez-la !

Recommandations d'apprentissage gratuites associées :

javascript(vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!