주사위 놀이 게임을 구현하기 위한 기본 JS+Canvas 코드-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

주사위 놀이 게임을 구현하기 위한 기본 JS+Canvas 코드

不言

Jul 03, 2018 am 09:45 AM

canvasjs주사위 놀이

这篇文章主要为大家详细介绍了原生JS+Canvas实现五子棋游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS Canvas实现五子棋游戏的具体代码，供大家参考，具体内容如下

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8" /> 
    <title>五子棋</title> 
    <style type=&#39;text/css&#39;> 
      canvas { 
        display: block; 
        margin: 50px auto; 
        box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9; 
        cursor: pointer; 
      } 
      .btn-wrap {  
        display: flex;  
        flex-direction: row;  
        justify-content:center; 
      } 
      .btn-wrap p {  
        margin: 0 10px; 
      } 
      p>span { 
        display: inline-block; 
        padding: 10px 20px; 
        color: #fff; 
        background-color: #EE82EE; 
        border-radius: 5px; 
        cursor: pointer; 
      } 
      p.unable span {  
        background: #D6D6D4;  
        color: #adacaa; 
      } 
      #result-wrap {text-align: center;} 
    </style> 
  </head> 
  <body> 
    <h3 id="益智五子棋">--益智五子棋--</h3> 
    <canvas id="chess" width="450px" height="450px"></canvas> 
    <p class="btn-wrap"> 
      <p id=&#39;restart&#39; class="restart"> 
        <span>重新开始</span> 
      </p> 
      <p id=&#39;goback&#39; class="goback unable"> 
        <span>悔棋</span> 
      </p> 
      <p id=&#39;return&#39; class="return unable"> 
        <span>撤销悔棋</span> 
      </p> 
    </p> 
    <script type="text/javascript" charset="utf-8"> 
      var over = false; 
      var me = true; //我 
      var _nowi = 0, _nowj = 0; //记录自己下棋的坐标 
      var _compi = 0, _compj = 0; //记录计算机当前下棋的坐标 
      var _myWin = [], _compWin = []; //记录我，计算机赢的情况 
      var backAble = false, returnAble = false;  
      var resultTxt = document.getElementById(&#39;result-wrap&#39;); 
      var chressBord = [];//棋盘 
      for(var i = 0; i < 15; i++){ 
        chressBord[i] = []; 
        for(var j = 0; j < 15; j++){ 
          chressBord[i][j] = 0; 
        } 
      } 
      //赢法的统计数组 
      var myWin = []; 
      var computerWin = []; 
      //赢法数组 
      var wins = []; 
      for(var i = 0; i < 15; i++){ 
        wins[i] = []; 
        for(var j = 0; j < 15; j++){ 
          wins[i][j] = []; 
        } 
      } 
      var count = 0; //赢法总数 
      //横线赢法 
      for(var i = 0; i < 15; i++){ 
        for(var j = 0; j < 11; j++){ 
          for(var k = 0; k < 5; k++){ 
            wins[i][j+k][count] = true; 
          } 
          count++; 
        } 
      } 
      //竖线赢法 
      for(var i = 0; i < 15; i++){ 
        for(var j = 0; j < 11; j++){ 
          for(var k = 0; k < 5; k++){ 
            wins[j+k][i][count] = true; 
          } 
          count++; 
        } 
      } 
      //正斜线赢法 
      for(var i = 0; i < 11; i++){ 
        for(var j = 0; j < 11; j++){ 
          for(var k = 0; k < 5; k++){ 
            wins[i+k][j+k][count] = true; 
          } 
          count++; 
        } 
      } 
      //反斜线赢法 
      for(var i = 0; i < 11; i++){  
        for(var j = 14; j > 3; j--){ 
          for(var k = 0; k < 5; k++){ 
            wins[i+k][j-k][count] = true; 
          } 
          count++; 
        } 
      } 
      // debugger; 
      for(var i = 0; i < count; i++){ 
        myWin[i] = 0; 
        _myWin[i] = 0; 
        computerWin[i] = 0; 
        _compWin[i] = 0; 
      } 
      var chess = document.getElementById("chess"); 
      var context = chess.getContext(&#39;2d&#39;); 
      context.strokeStyle = &#39;#bfbfbf&#39;; //边框颜色 
      var backbtn = document.getElementById("goback"); 
      var returnbtn = document.getElementById("return"); 
      window.onload = function(){ 
        drawChessBoard(); // 画棋盘 
      } 
      document.getElementById("restart").onclick = function(){ 
        window.location.reload(); 
      } 
      // 我，下棋 
      chess.onclick = function(e){ 
        if(over){ 
          return; 
        } 
        if(!me){ 
          return; 
        } 
        // 悔棋功能可用 
        backbtn.className = backbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " );  
        var x = e.offsetX; 
        var y = e.offsetY; 
        var i = Math.floor(x / 30); 
        var j = Math.floor(y / 30); 
        _nowi = i; 
        _nowj = j; 
        if(chressBord[i][j] == 0){ 
          oneStep(i,j,me); 
          chressBord[i][j] = 1; //我，已占位置     
                 
          for(var k = 0; k < count; k++){ // 将可能赢的情况都加1 
            if(wins[i][j][k]){ 
              // debugger; 
              myWin[k]++; 
              _compWin[k] = computerWin[k]; 
              computerWin[k] = 6;//这个位置对方不可能赢了 
              if(myWin[k] == 5){ 
                // window.alert(&#39;你赢了&#39;); 
                resultTxt.innerHTML = &#39;恭喜，你赢了！&#39;; 
                over = true; 
              } 
            } 
          } 
          if(!over){ 
            me = !me; 
            computerAI(); 
          } 
        }      
      } 
      // 悔棋 
      backbtn.onclick = function(e){ 
        if(!backAble) { return;} 
        over = false; 
        me = true; 
        // resultTxt.innerHTML = &#39;o(╯□╰)o，悔棋中&#39;; 
        // 撤销悔棋功能可用 
        returnbtn.className = returnbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " );  
        // 我，悔棋 
        chressBord[_nowi][_nowj] = 0; //我，已占位置 还原 
        minusStep(_nowi, _nowj); //销毁棋子                  
        for(var k = 0; k < count; k++){ // 将可能赢的情况都减1 
          if(wins[_nowi][_nowj][k]){ 
            myWin[k]--; 
            computerWin[k] = _compWin[k];//这个位置对方可能赢 
          } 
        } 
        // 计算机相应的悔棋 
        chressBord[_compi][_compj] = 0; //计算机，已占位置 还原 
        minusStep(_compi, _compj); //销毁棋子                  
        for(var k = 0; k < count; k++){ // 将可能赢的情况都减1 
          if(wins[_compi][_compj][k]){ 
            computerWin[k]--; 
            myWin[k] = _myWin[i];//这个位置对方可能赢 
          } 
        } 
        resultTxt.innerHTML = &#39;--益智五子棋--&#39;; 
        returnAble = true; 
        backAble = false; 
      } 
      // 撤销悔棋 
      returnbtn.onclick = function(e){ 
        if(!returnAble) { return; } 
          // 我，撤销悔棋 
        chressBord[_nowi][_nowj] = 1; //我，已占位置  
        oneStep(_nowi,_nowj,me);                
        for(var k = 0; k < count; k++){  
          if(wins[_nowi][_nowj][k]){ 
            myWin[k]++; 
            _compWin[k] = computerWin[k]; 
            computerWin[k] = 6;//这个位置对方不可能赢 
          } 
          if(myWin[k] == 5){ 
            resultTxt.innerHTML = &#39;恭喜，你赢了！&#39;; 
            over = true; 
          } 
        } 
        // 计算机撤销相应的悔棋 
        chressBord[_compi][_compj] = 2; //计算机，已占位置   
        oneStep(_compi,_compj,false);                 
        for(var k = 0; k < count; k++){ // 将可能赢的情况都减1 
          if(wins[_compi][_compj][k]){ 
            computerWin[k]++; 
            _myWin[k] = myWin[k]; 
            myWin[k] = 6;//这个位置对方不可能赢 
          } 
          if(computerWin[k] == 5){ 
            resultTxt.innerHTML = &#39;o(╯□╰)o，计算机赢了，继续加油哦！&#39;; 
            over = true; 
          } 
        } 
        returnbtn.className += &#39; &#39;+ &#39;unable&#39;; 
        returnAble = false; 
        backAble = true; 
      } 
      // 计算机下棋 
      var computerAI = function (){ 
        var myScore = []; 
        var computerScore = []; 
        var max = 0; 
        var u = 0, v = 0; 
        for(var i = 0; i < 15; i++){ 
          myScore[i] = []; 
          computerScore[i] = []; 
          for(var j = 0; j < 15; j++){ 
            myScore[i][j] = 0; 
            computerScore[i][j] = 0; 
          } 
        } 
        for(var i = 0; i < 15; i++){ 
          for(var j = 0; j < 15; j++){ 
            if(chressBord[i][j] == 0){ 
              for(var k = 0; k < count; k++){ 
                if(wins[i][j][k]){ 
                  if(myWin[k] == 1){ 
                    myScore[i][j] += 200; 
                  }else if(myWin[k] == 2){ 
                    myScore[i][j] += 400; 
                  }else if(myWin[k] == 3){ 
                    myScore[i][j] += 2000; 
                  }else if(myWin[k] == 4){ 
                    myScore[i][j] += 10000; 
                  } 
                   
                  if(computerWin[k] == 1){ 
                    computerScore[i][j] += 220; 
                  }else if(computerWin[k] == 2){ 
                    computerScore[i][j] += 420; 
                  }else if(computerWin[k] == 3){ 
                    computerScore[i][j] += 2100; 
                  }else if(computerWin[k] == 4){ 
                    computerScore[i][j] += 20000; 
                  }             
                } 
              } 
               
              if(myScore[i][j] > max){ 
                max = myScore[i][j]; 
                u = i; 
                v = j; 
              }else if(myScore[i][j] == max){ 
                if(computerScore[i][j] > computerScore[u][v]){ 
                  u = i; 
                  v = j;   
                } 
              } 
               
              if(computerScore[i][j] > max){ 
                max = computerScore[i][j]; 
                u = i; 
                v = j; 
              }else if(computerScore[i][j] == max){ 
                if(myScore[i][j] > myScore[u][v]){ 
                  u = i; 
                  v = j;   
                } 
              } 
               
            } 
          } 
        } 
        _compi = u; 
        _compj = v; 
        oneStep(u,v,false); 
        chressBord[u][v] = 2; //计算机占据位置 
        for(var k = 0; k < count; k++){ 
          if(wins[u][v][k]){ 
            computerWin[k]++; 
            _myWin[k] = myWin[k]; 
            myWin[k] = 6;//这个位置对方不可能赢了 
            if(computerWin[k] == 5){ 
              resultTxt.innerHTML = &#39;o(╯□╰)o，计算机赢了，继续加油哦！&#39;; 
              over = true; 
            } 
          } 
        } 
        if(!over){ 
          me = !me; 
        } 
        backAble = true; 
        returnAble = false; 
        var hasClass = new RegExp(&#39;unable&#39;).test(&#39; &#39; + returnbtn.className + &#39; &#39;); 
        if(!hasClass) { 
          returnbtn.className += &#39; &#39; + &#39;unable&#39;; 
        } 
      } 
      //绘画棋盘 
      var drawChessBoard = function() { 
        for(var i = 0; i < 15; i++){ 
          context.moveTo(15 + i * 30 , 15); 
          context.lineTo(15 + i * 30 , 435); 
          context.stroke(); 
          context.moveTo(15 , 15 + i * 30); 
          context.lineTo(435 , 15 + i * 30); 
          context.stroke(); 
        } 
      } 
      //画棋子 
      var oneStep = function(i,j,me) { 
        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(me){ 
          gradient.addColorStop(0,&#39;#0a0a0a&#39;); 
          gradient.addColorStop(1,&#39;#636766&#39;); 
        }else{ 
          gradient.addColorStop(0,&#39;#d1d1d1&#39;); 
          gradient.addColorStop(1,&#39;#f9f9f9&#39;); 
        } 
        context.fillStyle = gradient; 
        context.fill(); 
      } 
      //销毁棋子 
      var minusStep = function(i,j) { 
        //擦除该圆 
        context.clearRect((i) * 30, (j) * 30, 30, 30); 
        // 重画该圆周围的格子 
        context.beginPath(); 
        context.moveTo(15+i*30 , j*30); 
        context.lineTo(15+i*30 , j*30 + 30); 
        context.moveTo(i*30, j*30+15); 
        context.lineTo((i+1)*30 , j*30+15); 
   
        context.stroke(); 
      } 
    </script> 
  </body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

관련 기사

JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.