자바스크립트 기반 주사위 놀이 게임 구현-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

자바스크립트 기반 주사위 놀이 게임 구현

韦小宝

Jan 16, 2018 am 11:13 AM

javascriptjs주사위 놀이

이 글은 주로 JavaScript를 기반으로 한 주사위 놀이 게임의 구현을 자세히 소개합니다. JavaScript를 배우기 위한 확실한 참고 자료와 가치가 있으므로 JavaScript에 관심이 있는 친구들은 이 글을 참고하세요.

이 문서의 예제는 참고용으로 js에서 주사위 놀이를 구현하기 위한 구체적인 코드를 공유합니다. 구체적인 내용은 다음과 같습니다.

아이디어:

1 먼저 주사위 놀이 보드를 그립니다
2. 마우스 클릭 위치
3, 마우스 클릭 위치를 기준으로 판단하고 체스 말을 그립니다
4. 배치된 체스 말을 기준으로 승리 여부를 판단합니다

코드:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  * { 
   padding: 0; 
   margin: 0; 
  } 
  canvas { 
   margin: 10px; 
   border: 2px solid #000; 
  } 
  #box { 
   display: inline-block; 
   position: absolute; 
   margin-top: 200px; 
   margin-left: 100px; 
  } 
  span { 
   font: 24px "微软雅黑"; 
   display: inline-block; 
   height: 50px; 
  } 
  input { 
   margin-top: 30px; 
   display: block; 
   width: 100px; 
   height: 50px; 
   font: 16px "微软雅黑"; 
   color: #fff; 
   background-color: #0099cc; 
  } 
 </style> 
</head> 
<body> 
<canvas width="640" height="640" id="cas"> 
 您的浏览器不支持canvas，请升级到最新的浏览器 
</canvas> 
<p id="box"> 
 <span id="txt"></span> 
 <input type="button" id="btn" value="重新开始"/> 
 
</p> 
 
<script> 
 var flag = true; //true代表白棋下的棋子，false代表黑棋下的棋子 
 var isWin = false; //判断是否结束，true结束，false没有结束 
 var step = 40; //设置每个格子的宽高都是40 
 
 var txt = document.getElementById("txt"); 
 var btn = document.getElementById("btn"); 
 var cas = document.getElementById("cas");// 获取画布对象 
 var ctx = cas.getContext("2d"); //画布上下文 
 
// 创建图片对象 
 var img_b = new Image(); 
 img_b.src = "imgs/b.png";//设置黑棋图片路径 
 var img_w = new Image(); 
 img_w.src = "imgs/w.png";//设置白棋图片路径 
 
// 用二维数组来保存棋盘，0代表没有走过，1为白棋走过，2为黑棋走过 
 var arr = new Array(15); //声明一个一维数组 
 for (var i = 0; i < 15; i++) { 
  arr[i] = new Array(15); //每个值再声明一个一维数组，这样就组成了一个二维数组 
  for (var j = 0; j < 15; j++) { 
   arr[i][j] = 0; 
  } 
 } 
 
 //绘制棋盘 
 function drawLine() { 
  for (var i = 0; i < cas.width / step; i++) { 
   // 画竖线 
   ctx.moveTo((i + 1) * step, 0); 
   ctx.lineTo((i + 1) * step, cas.height); 
   // 画横线 
   ctx.moveTo(0, (i + 1) * step); 
   ctx.lineTo(cas.width, (i + 1) * step); 
   ctx.stroke(); 
  } 
 } 
 //获取鼠标点击的位置 
 cas.onclick = function (e) { 
  // 先判断游戏是否结束 
  if (isWin) { 
   alert("游戏已经结束，请刷新重新开始！"); 
   return 0; 
  } 
  //判断棋子显示的地方，四条边上不显示棋子， 
  //鼠标点击的位置减去边框距离页面的上和左的距离（10），减去一个格子宽高的一半（20） 
  var x = (e.clientX - 10 - 20) / 40; 
  var y = (e.clientY - 10 - 20) / 40; 
 
  //进行取整来确定棋子最终显示的区域 
  x = parseInt(x); 
  y = parseInt(y); 
  //如果超出棋盘或者在棋盘边界直接返回，边界上不能画棋子 
  if(x < 0 || x >= 15 || y < 0 || y >= 15) { 
   return; 
  } 
  //进行判断该位置是否已经显示过棋子 
  if (arr[x][y] != 0) { 
   alert("你不能在这个位置下棋"); 
   return; 
  } 
  // 判断是显示黑子还是白子 
  if (flag) {//白子 
   flag = false; //将标志置为false,表示下次为黑子 
   drawChess(1, x, y); //调用函数来画棋子 
 
  } else {//黑子 
   flag = true; //将标志置为true,表示下次为白子 
   drawChess(2, x, y); //调用函数来画棋子 
 
  } 
 } 
 //画棋子 
 function drawChess(num, x, y) { 
  //根据x和y确定图片显示位置,让图片显示在十字线中间，因为一个格子为40，图片大小为30，所以40-30/2等于25，所以需要加上25 
  var x0 = x * step + 25; 
  var y0 = y * step + 25; 
  if (num == 1) { 
   //绘制白棋 
   ctx.drawImage(img_w, x0, y0); 
   arr[x][y] = 1; //白子 
  } else if (num == 2) { 
   // 绘制黑棋 
   ctx.drawImage(img_b, x0, y0); 
   arr[x][y] = 2; //黑子 
  } 
  //调用函数判断输赢 
  judge(num, x, y); 
 } 
 //判断输赢 
 function judge(num, x, y) { 
  var n1 = 0, //左右方向 
    n2 = 0, //上下方向 
    n3 = 0, //左上到右下方向 
    n4 = 0; // 右上到左下方向 
  //***************左右方向*************
  //先从点击的位置向左寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环 
  for (var i = x; i >= 0; i--) { 
   if (arr[i][y] != num) { 
    break; 
   } 
   n1++; 
  } 
  //然后从点击的位置向右下一个位置寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环 
  for (var i = x + 1; i < 15; i++) { 
   if (arr[i][y] != num) { 
    break; 
   } 
   n1++; 
  } 
  //****************上下方向************ 
  for (var i = y; i >= 0; i--) { 
   if (arr[x][i] != num) { 
    break; 
   } 
   n2++; 
  } 
  for (var i = y + 1; i < 15; i++) { 
   if (arr[x][i] != num) { 
    break; 
   } 
   n2++; 
  } 
  //****************左上到右下斜方向*********** 
  for(var i = x, j = y; i >=0, j >= 0; i--, j--) { 
   if (i < 0 || j < 0 || arr[i][j] != num) { 
    break; 
   } 
   n3++; 
  } 
  for(var i = x+1, j = y+1; i < 15, j < 15; i++, j++) { 
   if (i >= 15 || j >= 15 || arr[i][j] != num) { 
    break; 
   } 
   n3++; 
  } 
  //****************右上到左下斜方向*************
  for(var i = x, j = y; i >= 0, j < 15; i--, j++) { 
   if (i < 0 || j >= 15 || arr[i][j] != num) { 
    break; 
   } 
   n4++; 
  } 
  for(var i = x+1, j = y-1; i < 15, j >= 0; i++, j--) { 
   if (i >= 15 || j < 0 || arr[i][j] != num) { 
    break; 
   } 
   n4++; 
  } 
  //用一个定时器来延时，否则会先弹出对话框，然后才显示棋子 
  var str; 
  if (n1 >= 5 || n2 >= 5 || n3 >= 5 || n4 >= 5) { 
   if (num == 1) {//白棋 
    str = "白棋赢了，游戏结束！" 
   } else if (num == 2) {//黑棋 
    str = "黑棋赢了，游戏结束！" 
   } 
   txt.innerHTML = str; 
   isWin = true; 
  } 
 } 
 //重新开始 
 btn.onclick = function() { 
  flag = true; 
  isWin = false; 
 
  for (var i = 0; i < 15; i++) { 
   for (var j = 0; j < 15; j++) { 
    arr[i][j] = 0; 
   } 
  } 
  ctx.clearRect(0, 0, 640, 640); 
  txt.innerHTML = ""; 
  drawLine(); 
 } 
 drawLine(); 
</script> 
</body> 
</html>

위 내용은 전체 내용입니다 이 글의 내용이 모든 분들의 학습에 도움이 되기를 바랍니다! !

관련 기사

JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

See all articles