주사위 놀이 인터페이스 디자인을 구현하기 위한 JS 소개

무료 학습 추천: 视js 비디오 튜토리얼

요구 사항 분석 및 코드 구현

천 레이아웃의 첫 번째 섹션

1. 캔버스 디자인 캔버스 CSS 폴더, 새로운 스타일 만들기.

style.css 파일에 캔버스를 작성합니다.

2. 매개변수 설명

3. 여백 50px는 캔버스가 중앙에 있음을 의미합니다. canvas{ display: block; margin: 50px auto; box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9; }상자 그림자 : -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9//

   offset-x: (여기서는 -2px와 유사)가 필수이며 값은 양수 또는 음수일 수 있습니다. 수평 그림자의 오프셋-x 위치.
offset-y: (예: 여기서는 -2px)가 필수이며 값은 양수 또는 음수일 수 있습니다. 수직 그림자의 오프셋 Y 위치입니다.
4. 흐림: (여기서는 2px 등)은 선택 사항이며 양수 값만 사용할 수 있습니다. Blur-radius 그림자 흐림 반경, 0은 흐림 효과가 없음을 의미하며, 값이 클수록 그림자 가장자리가 흐려집니다.

   색상: 선택사항, 그림자 색상입니다. 설정하지 않으면 브라우저는 기본 색상인 검은색을 사용하게 되지만 기본 색상은 브라우저마다 다르므로 생략하지 않는 것이 좋습니다.

   **

2. 렌더링

섹션 2 체스판 디자인

1. 크기 디자인

은 14*14 직사각형 상자로 나누어져 있으며 전체 길이는 450px입니다. 450px, 양쪽에 총 15px의 공백이 있고 각 작은 직사각형 상자는 30px x 30px

2.js 코드 작성(그림)

var chess = document.getElementById('chess');var context = chess.getContext('2d');//画一个二维画布context.strokeStyle = "#BFBFBF";var drawChessBoard = function (){
    for (var i=0; i<strong></strong>3. <p>섹션 3 체스 조각 디자인<strong></strong> </p><p>1. 코드 작성</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. 렌더링

(체스판을 무작위로 클릭하면 흑백 체스가 차례로 나타납니다)

섹션 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!