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

집

웹 프론트엔드

JS 튜토리얼

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

不言

Jul 03, 2018 am 09:45 AM

canvas js 주사위 놀이

这篇文章主要为大家详细介绍了原生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="result-wrap">--益智五子棋--</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中文网！

핫 AI 도구

Video Face Swap

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

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7715

자바 튜토리얼

1641

Cakephp 튜토리얼

1395

라라벨 튜토리얼

1289

PHP 튜토리얼

1232

Related knowledge

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 Apr 03, 2024 am 11:55 AM

얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.

PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법 Dec 17, 2023 am 08:08 AM

PHP와 JS를 사용하여 주식 캔들 차트를 만드는 방법 주식 캔들 차트는 주식 시장에서 흔히 사용되는 기술 분석 그래픽으로 시가, 종가, 최고가 등의 데이터를 그려서 투자자가 주식을 보다 직관적으로 이해할 수 있도록 도와줍니다. 주식의 최저 가격. 이 기사에서는 특정 코드 예제와 함께 PHP 및 JS를 사용하여 주식 캔들 차트를 만드는 방법을 설명합니다. 1. 준비 시작하기 전에 다음 환경을 준비해야 합니다. 1. PHP를 실행하는 서버 2. HTML5 및 Canvas를 지원하는 브라우저 3

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. Dec 17, 2023 pm 06:55 PM

주식 분석을 위한 필수 도구: PHP 및 JS에서 캔들 차트를 그리는 단계를 배우십시오. 인터넷과 기술의 급속한 발전으로 주식 거래는 많은 투자자에게 중요한 방법 중 하나가 되었습니다. 주식분석은 투자자의 의사결정에 있어 중요한 부분이며 캔들차트는 기술적 분석에 널리 사용됩니다. PHP와 JS를 사용하여 캔들 차트를 그리는 방법을 배우면 투자자가 더 나은 결정을 내리는 데 도움이 되는 보다 직관적인 정보를 얻을 수 있습니다. 캔들스틱 차트는 주가를 캔들스틱 형태로 표시하는 기술 차트입니다. 주가를 보여주네요

PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 Dec 18, 2023 pm 03:39 PM

인터넷 금융의 급속한 발전으로 인해 주식 투자는 점점 더 많은 사람들의 선택이 되었습니다. 주식 거래에서 캔들 차트는 주가의 변화 추세를 보여주고 투자자가 보다 정확한 결정을 내리는 데 도움이 되는 일반적으로 사용되는 기술적 분석 방법입니다. 이 기사에서는 PHP와 JS의 개발 기술을 소개하고 독자가 주식 캔들 차트를 그리는 방법을 이해하도록 유도하며 구체적인 코드 예제를 제공합니다. 1. 주식 캔들 차트의 이해 주식 캔들 차트를 그리는 방법을 소개하기 전에 먼저 캔들 차트가 무엇인지부터 이해해야 합니다. 캔들스틱 차트는 일본인이 개발했습니다.

캔버스 프레임워크를 배우고 일반적으로 사용되는 캔버스 프레임워크에 대해 자세히 설명합니다. Jan 17, 2024 am 11:03 AM

Canvas 프레임워크 탐색: 일반적으로 사용되는 Canvas 프레임워크가 무엇인지 이해하려면 특정 코드 예제가 필요합니다. 소개: Canvas는 풍부한 그래픽 및 애니메이션 효과를 얻을 수 있는 HTML5에서 제공되는 그리기 API입니다. 그리기의 효율성과 편의성을 향상시키기 위해 많은 개발자들이 다양한 Canvas 프레임워크를 개발했습니다. 이 기사에서는 일반적으로 사용되는 몇 가지 캔버스 프레임워크를 소개하고 독자가 이러한 프레임워크를 사용하는 방법을 더 깊이 이해하는 데 도움이 되는 특정 코드 예제를 제공합니다. 1. EaselJS 프레임워크 Ea

js와 vue의 관계 Mar 11, 2024 pm 05:21 PM

js와 vue의 관계: 1. 웹 개발의 초석인 JS 2. 프론트엔드 프레임워크로서의 Vue.js의 등장 3. JS와 Vue의 상호 보완적인 관계 4. JS와 Vue의 실제 적용 Vue.

게임 개발에서 캔버스의 강력한 역할과 적용을 살펴보세요. Jan 17, 2024 am 11:00 AM

게임 개발에서 캔버스의 힘과 적용 이해 개요: 인터넷 기술의 급속한 발전으로 인해 웹 게임은 플레이어들 사이에서 점점 더 인기를 얻고 있습니다. 캔버스 기술은 웹 게임 개발의 중요한 부분으로 게임 개발에 점차 등장하며 강력한 위력과 활용성을 보여주고 있습니다. 이 기사에서는 게임 개발에서 캔버스의 잠재력을 소개하고 특정 코드 예제를 통해 캔버스의 적용을 보여줍니다. 1. 캔버스 기술 소개 캔버스는 HTML5의 새로운 요소입니다.

html2canvas는 어떤 스타일에 유효하지 않습니까? Nov 24, 2023 pm 03:25 PM

잘못된 스타일에는 CSS3 애니메이션 및 전환, CSS 필터 효과, CSS3 복잡한 그래픽 및 경로, 일부 CSS3 기능, 의사 요소 및 일부 CSS 기능, Z-색인, 배경 이미지 및 그라데이션 등이 포함됩니다. 자세한 소개: 1. CSS3 애니메이션 및 전환: html2canvas는 CSS3 애니메이션 및 전환 효과를 완전히 캡처하지 못할 수 있습니다. 최종 스타일을 캡처하려고 시도하지만 변환 과정에서 이러한 애니메이션과 전환이 손실될 수 있습니다. 2. CSS 필터 효과: 흐림 및 그림자와 같은 필터는 변환 과정에서 유지되지 않을 수 있습니다.

See all articles

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

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제