이 글에서는 js에서 지뢰 찾기 애플릿을 구현하기 위한 샘플 코드를 주로 소개하는데, 편집자는 꽤 좋다고 생각합니다. 이제 js 소스 코드를 공유하고 참고용으로 제공하겠습니다. js에 관심있으신 분들은 에디터 따라오셔서 구경해보세요
저는 자바스크립트 초보자인데 지뢰찾기 프로그램을 작성해서 실력을 쌓았습니다!
지뢰찾기 규칙 및 기능
모든 사람이 지뢰찾기에 익숙해야 합니다. 주요 규칙은
1. 현재 그리드가 표시되는지 확인하는 것입니다. 만약 그렇다면, 그것은 GameOver입니다. 지뢰가 아니라면, 이 그리드는 주변 8개의 그리드에 있는 지뢰의 수를 표시합니다.
2. 가능한 지뢰를 표시하려면 마우스 오른쪽 버튼을 클릭하세요. 취소하려면 그리드를 다시 마우스 오른쪽 버튼으로 클릭해야 합니다.
3. 마우스 가운데 버튼(휠)을 누르면 지뢰를 빠르게 지울 수 있습니다. (주변 지뢰의 수가 표시되지 않은 그리드와 열리지 않은 그리드의 수가 같으면 이 그리드가 함께 열립니다.)
주요 기능은 기본적으로 완전히 복원 Windows 7 Minesweeper의 기능이 새겨져 있습니다
Minesweeper github 주소: Minesweeper github 주소
Minesweeper 알고리즘
1 먼저 일련의 속성을 포함하는 constructor를 정의했습니다.
var mineCraft = function(num1,num2,mine_num,obj,type){
this.num1 = num1; //整个扫雷的行数
this.num2 = num2; //整个扫雷的列数
this.mine_num = mine_num; //雷的个数
this.tiles = []; //数组里面存放的是每个小格子
this.obj = obj; //扫雷放置的对象
this.flag = true;
this.arr = [];
this.arr_2 = [];
this.time_dsq = null;
this.time_dc ='';
this.time_arr = [[],[],[]]; //时间统计信息
this.details = [[],[],[]]; // 游戏统计详情
this.type = type; //游戏类型：初级/中级/高级/自定义
this.buildTiles(); //创建游戏函数
};2.페이지에 지뢰 찾기 인터페이스 기능 buildTiles 만들기:
buildTiles:function(){
this.obj.style.width = 51*this.num1+'px'; //在传进来的对象上画整体格子，每个小格子51px大小，总大小就为个数*单个大小
this.obj.style.height = 51*this.num2+'px';
var indexOfp = 0;
for(var i = 0;i<this.num2;i++){
for(var j = 0;j<this.num1;j++){
var tile = document.createElement('p');
tile.className = 'tile'; //定义小格子class
tile.index = indexOfp; //为每个小格子添加索引
this.tiles[indexOfp] = tile; //将小格子存入数组中
indexOfp++;
this.obj.appendChild(tile); //将小格子插入到整个扫雷界面中
}
}
this.obj.oncontextmenu = function(){ //取消浏览器的默认右键菜单事件
return false;
}
this.event(); //点击事件
},3. 이벤트 기능 바인딩:
event : function(){
var _this = this;
this.obj.onmouseover = function(e){ //鼠标悬停事件---
if(e.target.className == 'tile'){
e.target.className = 'tile current';
}
}
this.obj.onmouseout = function(e){ //鼠标移出事件--
if(e.target.className == 'tile current'){
e.target.className = 'tile';
}
}
this.obj.onmousedown = function(e){ //鼠标按下事件
var index = e.target.index;
if(e.button == 1){ //e.button属性 左键0/中键1/右键2
event.preventDefault(); //取消默认
}
_this.changeStyle(e.button,e.target,index);
}
this.obj.onmouseup = function(e){ //鼠标弹起事件
if(e.button == 1){
_this.changeStyle(3,e.target);
}
}
},4. 클릭하여 기능 호출:
changeStyle:function(num1,obj,num_index){
if(num1 == 0){ //是左键的话
if(this.flag){ //this.flag 是之前定义的用于判断是否为第一次点击
this.store(num_index); //store函数，存放被点击的格子周围的8个格子
this.setMineCraft(this.mine_num,this.arr,num_index); //如果是第一次点击 即调用布雷函数 更改flag状态
this.flag = false;
this.detail_statistics(0,false); //开始信息统计函数
}
if(obj.className != 'tile'&&obj.className !='tile current'){//如果不是第一次点击，被点击的格子不是未点击状态，无效
return false;
}
if(obj.getAttribute('val') == 0){ //如果不是雷。改为翻开状态
obj.className = "showed";
obj.innerHTML = obj.getAttribute('value') == 0?'':obj.getAttribute('value'); //显示周围雷数
this.showAll(obj.index); //递归函数判断周围格子的情况，就是扫雷游戏上一点开会出现一片的那种
}
if(this.over(obj)){ //判断游戏是否结束
this.last();
}
}
if(num1 == 2){ //右键标记事件
if(obj.className == 'biaoji'){
obj.className = 'tile';
}else if(obj.className !='biaoji'&&obj.className != 'showed'){
obj.className = 'biaoji';
}
}
if(num1 == 1){ // 中键事件
if(obj.className =="showed"){
this.show_zj1(obj.index);
}
}
if(num1 == 3){ //鼠标弹起事件
if (obj.className == "showed") {
var flag1 = this.show_zj2(obj.index,0);
}else{
this.show_zj2(obj.index,1)
return false;
}
if(flag1&&this.over()){ //弹起判断是否结束
this.last();
}
}
},5. 내 이전 브레이는 페이지가 buildTiles에 있었습니다. 로드되었지만() 이로 인해 모터의 첫 번째 그리드가 내 것일 가능성이 발생합니다(게임플레이가 강력하지 않음). 나중에 첫 번째 클릭이 완료된 후 내 것으로 수정되었습니다(첫 번째 클릭이 올바른지 확인하세요). 내 것이 아님) 직접 폭발하는 현상을 피하세요. 따라서 후속 이벤트
setMineCraft:function(num,arr_first,num_first){ //雷的个数、最开始被点击的格子周围的八个、被点击的那个格子
var arr_index = [];
for(var i = 0;i<arr_first.length;i++){
arr_index.push(arr_first[i].index);
}
var length = this.tiles.length;
for (var i = 0; i < length; i++) {
this.tiles[i].setAttribute("val", 0);
}
for (var i = 0; i < num; i++) {
var index_Mine = Math.floor(Math.random() * this.tiles.length);
if(index_Mine == num_first||arr_index.lastIndexOf(index_Mine)>-1){//如果是属于第一次点击的周围的直接跳过在该位置布雷
num++;
continue;
}
if (this.tiles[index_Mine].getAttribute("val") == 0) {
this.tiles[index_Mine].setAttribute("val", 1);
}else {
num++;
}
}
this.showValue();
this.event()
},6 이후에 트리거되는changeStyle 함수에 호출을 넣으세요. 주변 그리드를 저장하는 함수:
store : function(num) { //传入格子的index.
var tiles_2d = [];
var indexs = 0;
for(var i = 0;i<this.num2;i++){
tiles_2d.push([]);
for(var j = 0;j<this.num1;j++){
tiles_2d[i].push(this.tiles[indexs]);
indexs++;
}
}
var j = num % this.num1;
var i = (num - j) / this.num1;
this.arr = [];
//左上
if (i - 1 >= 0 && j - 1 >= 0) {
this.arr.push(tiles_2d[i - 1][j - 1]);
}
//正上
if (i - 1 >= 0) {
this.arr.push(tiles_2d[i - 1][j]);
}
//右上
if (i - 1 >= 0 && j + 1 <= this.num1-1) {
this.arr.push(tiles_2d[i - 1][j + 1]);
}
//左边
if (j - 1 >= 0) {
this.arr.push(tiles_2d[i][j - 1]);
}
//右边
if (j + 1 <= this.num1-1) {
this.arr.push(tiles_2d[i][j + 1]);
}
//左下
if (i + 1 <= this.num2-1 && j - 1 >= 0) {
this.arr.push(tiles_2d[i + 1][j - 1]);
}
//正下
if (i + 1 <= this.num2-1) {
this.arr.push(tiles_2d[i + 1][j]);
}
//右下
if (i + 1 <= this.num2-1 && j + 1 <= this.num1-1) {
this.arr.push(tiles_2d[i + 1][j + 1]);
}
},7.showAll 함수: if 주변 그리드가 없는 Thunder, 주변 8개의 그리드를 자동으로 연 다음 재귀적 방법을 사용하여 주변 8개의 그리드에 지뢰가 있는지 확인합니다
showAll:function(num){
if (this.tiles[num].className == "showed" && this.tiles[num].getAttribute("value") == 0){
this.store(this.tiles[num].index);
var arr2 = new Array();
arr2 = this.arr;
for (var i = 0; i < arr2.length; i++) {
if (arr2[i].className != "showed"&&arr2[i].className !='biaoji') {
if (arr2[i].getAttribute("value") == 0) {
arr2[i].className = "showed";
this.showAll(arr2[i].index);
} else {
arr2[i].className = "showed";
arr2[i].innerHTML = arr2[i].getAttribute("value");
}
}
}
}
},8.show_zj 함수: 주로 중간 클릭 버튼 클릭에 사용됩니다. 함수, show_zj1은 마우스 버튼을 누른 후 표시 효과이고,
show_zj2 함수는
show_zj1:function(num){
this.store(this.tiles[num].index);
for (var i = 0; i < this.arr.length; i++) {
if (this.arr[i].className == "tile") {
this.arr_2.push(this.arr[i]);
this.arr[i].className = "showed";
// this.arr[i].className = "test";
}
}
},
show_zj2:function(num,zt){
var count = 0;
this.store(this.tiles[num].index);
for(var i = 0,len = this.arr_2.length;i<len;i++){
this.arr_2[i].className = 'tile'; //按下效果恢复原状
}
this.arr_2.length = 0;
for(var i = 0;i<this.arr.length;i++){
this.arr[i].className == 'biaoji'&&count++;
}
if(zt == 1){
return false;
}
var numofmines = this.tiles[num].getAttribute("value");
if(numofmines == count){ //如果周围雷数和周围被标记数相等就翻开周围的格子
var arr = new Array(this.arr.length);
for(var i = 0;i<this.arr.length;i++){
arr[i] = this.arr[i];
}
for (var i = 0,length = arr.length; i < length; i++) {
if (arr[i].className == "tile" && arr[i].getAttribute("val") != 1) {//如果周围格子无雷则继续。
arr[i].className = "showed";
arr[i].innerHTML = arr[i].getAttribute("value") == 0?"":arr[i].getAttribute("value");
this.showAll(arr[i].index);
} else if (arr[i].className == "tile" && arr[i].getAttribute("val") == 1) { //如果周围格子有雷，游戏结束
this.over(arr[i]);
this.last();
return false;
}
}
}
return true;
},9입니다. 종료 판단:
over:function(obj){
var flag = false;
var showed = document.getElementsByClassName('showed');
var num = this.tiles.length - this.mine_num;
if(showed.length == num){ //如果被排出来的格子数等于总格子数-雷数，这游戏成功结束
this.detail_statistics(1,true); //游戏统计 ，true代表胜，false，代表失败
alert('恭喜你获得成功');
flag = true;
}else if(obj&&obj.getAttribute('val') == 1){ //如果被点击的是雷，则炸死
this.detail_statistics(1,false);
alert('被炸死！');
flag = true;
}
return flag;
},10 종료 후 표시 기능:
last:function(){
var len = this.tiles.length;
for(var i = 0;i<len;i++){
this.tiles[i].className = this.tiles[i].getAttribute('val') == 1?'boom':'showed';
if(this.tiles[i].className != 'boom'){ //
this.tiles[i].innerHTML = this.tiles[i].getAttribute('value') == 0?'':this.tiles[i].getAttribute('value');
}
}
this.obj.onclick = null;
this.obj.oncontextmenu = null;
},11 통계 정보: 상당히 완벽하며 판정 항목은 Windows 7 Minesweeper 버전과 동일합니다. 각 게임이 종료된 후 데이터는 localStorage에 저장됩니다.
//已玩游戏，已胜游戏，胜率，最多连胜，最多连败，当前连局；
detail_statistics:function(num,zt){
var time_pay = 1;
var _this = this;
if(num == 0){
this.time_dsq = setInterval(function(){
$('#time_need').text(time_pay);
_this.time_dc =time_pay;
time_pay++;
},1000);
}
else if(num == 1){
clearInterval(this.time_dsq);
if(this.type == 4){return false;}
if(localStorage.details == undefined){
localStorage.details = JSON.stringify([[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0]]); //这里存放的就是上面注释中的六项数据
}
if(JSON.parse(localStorage.details) instanceof Array){
this.details = JSON.parse(localStorage.details);
}
this.details[this.type][0] += 1;
if(zt == false){
if(this.details[this.type][5]>=0){
this.details[this.type][5] = -1;
}else{
this.details[this.type][5] -= 1;
}
if(this.details[this.type][5]<this.details[this.type][4]){
this.details[this.type][4] = this.details[this.type][5];
}
this.details[this.type][2] = this.toPercent(this.details[this.type][2]/this.details[this.type][0]);
localStorage.details = JSON.stringify(this.details);
return false;
}
if(this.details[this.type][5]>=0){
this.details[this.type][5] += 1;
}else{
this.details[this.type][5] = 1;
}
if(this.details[this.type][5]>this.details[this.type][3]){
this.details[this.type][3] = this.details[this.type][5];
}
this.details[this.type][3] += 1;
this.details[this.type][2] = this.toPercent(this.details[this.type][4]/this.details[this.type][0]);
localStorage.details = JSON.stringify(this.details);
var time1 = new Date();
var time_str = time1.getFullYear()+'/'+time1.getMonth()+'/'+time1.getDate()+' '+time1.getHours()+':'+time1.getMinutes();
if(localStorage.time == undefined){
localStorage.time = JSON.stringify([[],[],[]]);
}
if(JSON.parse(localStorage.time) instanceof Array){
this.time_arr = JSON.parse(localStorage.time);
}
this.time_arr[this.type].push([this.time_dc,time_str]);
this.time_arr[this.type].sort(function(a,b){
return a[0]-b[0];
});
if(this.time_arr[this.type].length>5){
this.time_arr[this.type].pop();
}
localStorage.time = JSON.stringify(this.time_arr);
}
},Minesweeper의 주요 부분은 다음과 같습니다. 그리고 여기에는 일부 작은 기능이 적혀 있지 않습니다. 완전한 버전을 보려면 gitHub를 볼 수 있습니다
예전에는 책을 읽고 공부할 때 배운 것을 잊어버릴 것 같은 느낌이 항상 들었습니다. 공식은 이해했지만 어떻게 사용하는지 몰랐습니다. 지뢰찾기 미니 프로그램을 작성하고 나니 많은 것을 얻었습니다
관련 추천:
더 잘 공유하겠습니다. JavaScript 경험 비동기성을 위한 솔루션
JavaScript의 다중 상속 예제에 대한 자세한 설명
위 내용은 지뢰 찾기 애플릿을 구현하기 위한 Node.js 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
