扫雷小游戏
欢迎来到程序小院
扫雷小游戏
玩法：
按下鼠标左键点开未知方块，按下鼠标右键标记/取消标记地雷,初级3个雷、中级10个雷、高级30个雷
开始游戏
https://www.ormcc.com/play/gameStart/137
HTML
初级
中级
高级
CSS
.game-app{
#game-box{
margin: 20px auto;
display: flex;
flex-wrap: wrap;
box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
border: 2px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #fff, #fff),
linear-gradient(120deg, #f7716d, #60C4FD, #EDC951,
#7ac630, #f7716d, #60C4FD, #EDC951, #7ac630,#7ac630,
#f7716d, #60C4FD, #EDC951, #7ac630);
padding: 10px;
opacity: 0;
}
.game-cell{
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
border: 1px rgb(220, 223, 230) solid;
box-shadow: 0 0 6px 1px rgb(220, 223, 230);
background-color: #fff;
color:#60C4FD;
}
js
let a = [];//用来储存随机生成的地雷的索引
box.style.opacity = 1;
box.innerHTML = "";//清除旧的地图
// 随机生成地雷的索引
let tempA = [];
for (let i = 0; i < row * col; i++) {
tempA[i] = i;
}
for (let i = 0; i < mineCount; i++) {
let randomIndex = Math.floor(Math.random()*(tempA.length - i));
let randomNumber = tempA.splice(randomIndex,1)[0];
a.push(randomNumber);
}
// 判断地图上某个坐标是否在数组（保存地雷索引的数组）中（用来判断某格是否是雷）
function include(x,y,arr) {
for (let i = 0; i < arr.length; i++) {
if(x*col + y == arr[i]){
return true;
}
}
return false;
}
// 用来判断坐标是否出界
function isOutOfBounds(x, y) {
if(x < 0 || y < 0 || x >= row || y >= col){
return true;
}else{
return false;
}
}
// 用来返回某个坐标周围的雷数
function boom(x,y) {
let count = 0;
if (include(x,y,a)){
return -1;
}
for (let i = (x - 1); i < (x + 2); i++) {
for (let j = (y - 1); j < (y + 2); j++) {
if(i == x && j == y){
continue;
}else{
if(!isOutOfBounds(i,j)){
if(include(i,j,a)){
count++;
}
}
}
}
}
return count;
}
// 返回某个坐标的DOM对象
function findCell(x, y) {
let cells = document.querySelectorAll(".game-cell");
return cells[x*row + y];
}
// 自动翻开无雷区域
function removeBlank(x,y) {
let boomCount = boom(x,y);
if(boomCount == 0){
findCell(x,y).innerText = "0";
findCell(x,y).style.backgroundColor = "#eee";
let temp = 0;
for (let i = (x - 1); i < (x + 2); i++) {
for (let j = (y - 1); j < (y + 2); j++) {
temp++;
if(!(i == x && j == y)){
if(!isOutOfBounds(i,j)){
if (findCell(i,j).innerText != ""){
continue;
}
let boomCount1 = boom(i,j);
if(boomCount1 != 0){
findCell(i,j).innerText = boomCount1;
findCell(i,j).style.backgroundColor = "#eee";
}else{
findCell(i,j).style.color = "#7ac630";
removeBlank(i,j);
}
}
}
}
}
}else{
findCell(x,y).innerText = boomCount;
findCell(x,y).style.backgroundColor = "#eee";
}
}
// 判断是否胜利
function isWin() {
let cells = document.querySelectorAll(".game-cell");
let blankCount = 0;//未翻开的空白格的数量
let flagCount = 0;//标记旗帜的数量
for (let i = 0; i < cells.length; i++) {
if(cells[i].innerText == ""){
blankCount++;
}else if(cells[i].innerText == ""){
flagCount++;
}
}
if (blankCount > mineCount){
return false;// 空白格大于雷数，说明还有未翻开的无雷格子
}else if (blankCount == mineCount){
if (flagCount == 0){
return true;//空白格等于雷数，同时旗帜数为0，说明玩家没有插旗，所有空白格都是地雷
}else{
return false;
}
}else{
if (blankCount == 0){
if(flagCount == mineCount){
return true;//空白格等于零，说明没有未翻开的格子，而旗帜数等于雷数，所有旗帜格下都是地雷
}
}else{
if (blankCount + flagCount == mineCount){
return true;//空白格小于雷数且不等于零，说明玩家已经用旗帜标记了部分地雷，如果空白格数加旗帜格数等于雷数，说明空白格都是地雷
}
}
return false;
}
}
// 切换成游戏结束后的地图（所有雷和雷数标记显示出来）
function gameOver() {
let cells = document.querySelectorAll(".game-cell");
let index = 0;
for (let i = 0; i < row; i++) {
for (let j = 0; j < col; j++) {
if(a.includes(index)){
cells[index].innerText = "";
cells[index].style.backgroundColor = "#eee";
}else{
let boomCount = boom(i,j);
cells[index].innerText = boomCount;
cells[index].style.backgroundColor = "#fff";
}
index++;
}
}
}
// console.log(a);
box.style.width = w * col + "px";
box.style.height = w * row + "px";
for (let i = 0; i < row; i++) {
for (let j = 0; j < col; j++) {
let cell = document.createElement("div");
cell.classList.add("game-cell");
box.appendChild(cell);
cell.onmousedown = function (e) {
// 鼠标左键翻开格子
if (e.button == 0){
if (boom(i,j) == -1){
cell.innerText = "";
tips("你输啦!");
gameOver();
}else{
removeBlank(i,j);
if (isWin()){
tips("恭喜你，你赢啦!");
gameOver();
}
}
// 鼠标右键用旗帜标记地雷
}else if(e.button == 2){
if (cell.innerText == ""){
cell.innerText = "";
cell.style.backgroundColor = "#eee";
if (isWin()){
tips("恭喜你，你赢啦!");
gameOver();
}
}else if(cell.innerText == ""){
cell.innerText = "";
cell.style.backgroundColor = "transparent";
}
}
}
}
}
源码https://www.ormcc.com/
需要源码请关注添加好友哦^ ^
转载：欢迎来到本站，转载请注明文章出处
https://ormcc.com/
