first commit
This commit is contained in:
commit
d059bab473
|
|
@ -0,0 +1,21 @@
|
||||||
|
# Minesweeper made by SPYN
|
||||||
|
|
||||||
|
An easy game which is similar to the Minesweeper made by Microsoft.
|
||||||
|
|
||||||
|
The game is made for SPYN's practical engineering assignments.
|
||||||
|
|
||||||
|
No commercial use, only for learning reference.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
This Game is built in JavaScript with HTML & CSS.
|
||||||
|
|
||||||
|
To pack the code properly, you might need use NW.js(https://nwjs.io).
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Additional Information
|
||||||
|
|
||||||
|
The game supports 3 languages (ZH_CN\EN-WW\JA-JP), but the code comments are written in Chinese.
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh_cn">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>game</title>
|
||||||
|
<link rel="stylesheet" href="./style/game.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="grid"></div>
|
||||||
|
</main>
|
||||||
|
<div class="right">
|
||||||
|
<div class="time">
|
||||||
|
<p class="timeTitle">Time</p>
|
||||||
|
<p class="timeCon">0h0min0s</p>
|
||||||
|
</div>
|
||||||
|
<button class="new">New Game</button>
|
||||||
|
<button class="back">Back</button>
|
||||||
|
</div>
|
||||||
|
<div class="mask">
|
||||||
|
<p class="content">You win!</p>
|
||||||
|
<div class="enterName">
|
||||||
|
<input type="text" placeholder="Please enter your name" />
|
||||||
|
<button class="confirm">Confirm</button>
|
||||||
|
</div>
|
||||||
|
<div class="maskBtn">
|
||||||
|
<button class="new">New Game</button>
|
||||||
|
<button class="back">Back</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="./scripts/game/leaderBoard.js"></script>
|
||||||
|
<script src="./scripts/game/time.js"></script>
|
||||||
|
<script src="./scripts/game/tile.js"></script>
|
||||||
|
<script src="./scripts/game/grid.js"></script>
|
||||||
|
<script src="./scripts/game/listener.js"></script>
|
||||||
|
<script src="./scripts/game/language.js"></script>
|
||||||
|
<script src="./scripts/game/manager.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh_cn">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>hello</title>
|
||||||
|
<link rel="stylesheet" href="./style/index.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="hello">石皮幼鸟制作</div>
|
||||||
|
<script src="./scripts/index.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh_cn">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>menu</title>
|
||||||
|
<link rel="stylesheet" href="./style/menu.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p class="menu">Minesweeper</p>
|
||||||
|
<div class="selection menuList">
|
||||||
|
<button class="start">Start Game</button>
|
||||||
|
<button class="tutorial">Tutorial</button>
|
||||||
|
<button class="leaderBoard">LeaderBoard</button>
|
||||||
|
<button class="exit">Exit</button>
|
||||||
|
</div>
|
||||||
|
<div class="difficulty">
|
||||||
|
<p class="diffCon">Difficulty</p>
|
||||||
|
<div class="selection">
|
||||||
|
<button class="easy">Easy</button>
|
||||||
|
<button class="hard">Hard</button>
|
||||||
|
</div>
|
||||||
|
<button class="extra">Extra</button>
|
||||||
|
<button class="back">Back</button>
|
||||||
|
</div>
|
||||||
|
<div class="tutorialBlk">
|
||||||
|
<p class="tutoCon">Tutorial</p>
|
||||||
|
<div class="tutor">
|
||||||
|
<P>Click the left mouse button to crack open the square</P>
|
||||||
|
<p>If a mine is triggered, the game is over</p>
|
||||||
|
<p>If a number appears, it means that the number of mines with the corresponding number is around</p>
|
||||||
|
<p>If blank, there are no mines around</p>
|
||||||
|
<p>Right mouse click on the square that marks what you suspect is a mine</p>
|
||||||
|
<p>Right click again to unmark</p>
|
||||||
|
<p>Knock out all the non-mine squares to win the final victory</p>
|
||||||
|
</div>
|
||||||
|
<button class="back">Back</button>
|
||||||
|
</div>
|
||||||
|
<div class="leaderBlk">
|
||||||
|
<p class="leaderCon">LeaderBoard</p>
|
||||||
|
<p class="leaderDif">Easy</p>
|
||||||
|
<ul class="leadList"></ul>
|
||||||
|
<button class="next">Hard</button>
|
||||||
|
<button class="back">Back</button>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<ul class="language"></ul>
|
||||||
|
<div class="langSltBtn">Lang</div>
|
||||||
|
</footer>
|
||||||
|
<script src="./scripts/menu/language.js"></script>
|
||||||
|
<script src="./scripts/menu/listener.js"></script>
|
||||||
|
<script src="./scripts/menu/leaderBoard.js"></script>
|
||||||
|
<script src="./scripts/menu/menu.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"name": "minesweeper",
|
||||||
|
"version": "2.0.0",
|
||||||
|
"lockfileVersion": 2,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "minesweeper",
|
||||||
|
"version": "2.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"main": "index.html",
|
||||||
|
"name": "minesweeper",
|
||||||
|
"description": "A web game which is similar to the Minesweeper made by Microsoft.",
|
||||||
|
"version": "2.0.0",
|
||||||
|
"keywords": ["admin"],
|
||||||
|
"window": {
|
||||||
|
"title": "Minesweeper",
|
||||||
|
"icon": "icon.ico",
|
||||||
|
"toolbar": false,
|
||||||
|
"frame": true,
|
||||||
|
"width": 1280,
|
||||||
|
"height": 760,
|
||||||
|
"position": "center",
|
||||||
|
"min_width": 900,
|
||||||
|
"min_height": 600,
|
||||||
|
"resizable":true
|
||||||
|
},
|
||||||
|
"webkit": {
|
||||||
|
"plugin": true,
|
||||||
|
"java":false,
|
||||||
|
"page-cache":true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,538 @@
|
||||||
|
/**************************************
|
||||||
|
文件名：grid.js
|
||||||
|
功能：该模块用于处理游戏网格对象相关内容
|
||||||
|
版本：2.0(23.01.08)
|
||||||
|
**************************************/
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
对象名：Grid
|
||||||
|
参数：lang: 语言, mode: 游戏难度
|
||||||
|
**************************************/
|
||||||
|
function Grid(lang, mode){
|
||||||
|
//缓存标签
|
||||||
|
this.gameKey = `${mode}State`;
|
||||||
|
//存放tile对象数组
|
||||||
|
this.grid = null;
|
||||||
|
//方格大小
|
||||||
|
this.size = "54px";
|
||||||
|
//字体大小
|
||||||
|
this.fontSize = "25px";
|
||||||
|
//横向方格数
|
||||||
|
this.wSize = 9;
|
||||||
|
//纵向方格数
|
||||||
|
this.hSize = 9;
|
||||||
|
//游戏难度
|
||||||
|
this.mode = mode;
|
||||||
|
//地雷数量
|
||||||
|
this.mine = 10;
|
||||||
|
//当前状态
|
||||||
|
this.now = "Waiting";
|
||||||
|
//判断是否是第一次点击
|
||||||
|
this.first = true;
|
||||||
|
//实例化时间对象
|
||||||
|
this.time = new Time(0, 0, 0);
|
||||||
|
//时间计时器
|
||||||
|
this.t = null;
|
||||||
|
//非地雷方块数量
|
||||||
|
this.emptyNum = null;
|
||||||
|
//获取语言
|
||||||
|
this.lang = lang;
|
||||||
|
//获取HTML中grid元素
|
||||||
|
this.gridBlk = document.querySelector(".grid");
|
||||||
|
//排行榜对象实例化
|
||||||
|
this.leaderBoard = new LeaderBoard(mode);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：setMode()
|
||||||
|
功能：按照难度初始化grid
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.setMode = function(){
|
||||||
|
switch(this.mode){
|
||||||
|
case "easy":
|
||||||
|
this.mine = 10;
|
||||||
|
this.wSize = 9;
|
||||||
|
this.hSize = 9;
|
||||||
|
break;
|
||||||
|
case "hard":
|
||||||
|
this.mine = 40;
|
||||||
|
this.wSize = 16;
|
||||||
|
this.hSize = 16;
|
||||||
|
break;
|
||||||
|
case "extra":
|
||||||
|
this.mine = 99;
|
||||||
|
this.wSize = 30;
|
||||||
|
this.hSize = 16;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
this.createGrid();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：createGrid()
|
||||||
|
功能：创建HTML中grid网格，初步渲染游戏界面
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.createGrid = function(){
|
||||||
|
this.gridBlk.innerHTML = '';
|
||||||
|
if(this.mode == "extra") {
|
||||||
|
this.gridBlk.style.width = "1050px";
|
||||||
|
this.gridBlk.style.marginLeft = "calc((100vw - 1350px)/2)";
|
||||||
|
}else {
|
||||||
|
this.gridBlk.style.width = "630px";
|
||||||
|
this.gridBlk.style.marginLeft = "calc((100vw - 930px)/2)";
|
||||||
|
}
|
||||||
|
for (let i = 0; i < this.hSize; i++){
|
||||||
|
let newLine = document.createElement("div");
|
||||||
|
newLine.setAttribute("class", `line-${i} tileLine`);
|
||||||
|
if(this.mode == "extra") {
|
||||||
|
newLine.style.width = "1050px";
|
||||||
|
}else {
|
||||||
|
newLine.style.width = "630px";
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let j = 0; j < this.wSize; j++){
|
||||||
|
let newTile = document.createElement("div");
|
||||||
|
newTile.setAttribute("class", `nonTriggered tile tile-${i}-${j}`);
|
||||||
|
switch(this.mode){
|
||||||
|
case "easy":
|
||||||
|
this.size = "54px";
|
||||||
|
this.fontSize = "25px";
|
||||||
|
break;
|
||||||
|
case "hard":
|
||||||
|
this.size = "30px";
|
||||||
|
this.fontSize = "14px";
|
||||||
|
break;
|
||||||
|
case "extra":
|
||||||
|
this.size = "30px";
|
||||||
|
this.fontSize = "14px";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
newLine.appendChild(newTile);
|
||||||
|
newTile.style.width = this.size;
|
||||||
|
newTile.style.height = this.size;
|
||||||
|
}
|
||||||
|
this.gridBlk.appendChild(newLine);
|
||||||
|
}
|
||||||
|
|
||||||
|
//读取缓存，如果缓存里有未完成的游戏，则恢复游戏
|
||||||
|
let recentGame = this.getGame();
|
||||||
|
if(recentGame){
|
||||||
|
this.recover(recentGame.grid, recentGame.time);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：createGridObj()
|
||||||
|
功能：初始化Grid数组
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.createGridObj = function(){
|
||||||
|
for (let i = 0; i < this.hSize; i++){
|
||||||
|
this.grid.push([]);
|
||||||
|
for (let j = 0; j < this.wSize; j++){
|
||||||
|
this.grid[i].push(new Tile(i, j));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：setValue()
|
||||||
|
功能：生成地雷，设置tile的value数值
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.setValue = function(){
|
||||||
|
//生成地雷算法
|
||||||
|
mineNum = this.mine;
|
||||||
|
for (let i = 0; i < this.hSize; i++){
|
||||||
|
for (let j = 0; j < this.wSize; j++){
|
||||||
|
//随机0~9的整数
|
||||||
|
let num = Math.floor(Math.random() * 10);
|
||||||
|
//数字为0,4时该方块为雷
|
||||||
|
if ((num == 0 || num == 4) && mineNum != 0){
|
||||||
|
this.grid[i][j].isMine = true;
|
||||||
|
let theTile = document.querySelector(`.tile-${i}-${j}`);
|
||||||
|
theTile.setAttribute("class", `nonTriggered tile tile-${i}-${j} mine`);
|
||||||
|
mineNum--;
|
||||||
|
}else if(mineNum == 0){
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(mineNum != 0) this.setValue();
|
||||||
|
|
||||||
|
//计算周围雷数算法
|
||||||
|
for (let i = 0; i < this.hSize; i++){
|
||||||
|
for (let j = 0; j < this.wSize; j++){
|
||||||
|
if(this.grid[i][j].isMine){
|
||||||
|
if (i != 0){
|
||||||
|
if (j != 0) this.grid[i-1][j-1].value++;
|
||||||
|
this.grid[i-1][j].value++;
|
||||||
|
if (j != this.wSize-1) this.grid[i-1][j+1].value++;
|
||||||
|
}
|
||||||
|
if (i != this.hSize-1){
|
||||||
|
if (j != 0) this.grid[i+1][j-1].value++;
|
||||||
|
this.grid[i+1][j].value++;
|
||||||
|
if (j != this.wSize-1) this.grid[i+1][j+1].value++;
|
||||||
|
}
|
||||||
|
if (j != 0) this.grid[i][j-1].value++;
|
||||||
|
if (j != this.wSize-1) this.grid[i][j+1].value++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//设置每一个tile对象内和class中value值算法
|
||||||
|
for (let i = 0; i < this.hSize; i++){
|
||||||
|
for (let j = 0; j < this.wSize; j++){
|
||||||
|
let tileObj = this.grid[i][j];
|
||||||
|
let theTile = document.querySelector(`.tile-${i}-${j}`);
|
||||||
|
theTile.innerHTML = '';
|
||||||
|
|
||||||
|
//添加内置图像
|
||||||
|
let img = document.createElement("img");
|
||||||
|
img.setAttribute("src","./image/flag.png");
|
||||||
|
img.style.width = this.size;
|
||||||
|
img.style.height = this.size;
|
||||||
|
theTile.appendChild(img);
|
||||||
|
|
||||||
|
//添加value数字
|
||||||
|
if (tileObj.value != 0){
|
||||||
|
let valueCon = document.createElement("p");
|
||||||
|
valueCon.innerHTML = tileObj.value;
|
||||||
|
valueCon.style.width = this.size;
|
||||||
|
valueCon.style.height = this.size;
|
||||||
|
valueCon.style.fontSize = this.fontSize;
|
||||||
|
valueCon.style.lineHeight = this.size;
|
||||||
|
valueCon.style.bottom = `calc(${this.size}/2)`;
|
||||||
|
theTile.appendChild(valueCon);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.grid[i][j].isMine) theTile.setAttribute("class", `nonTriggered tile tile-${i}-${j} value-${tileObj.value}`);
|
||||||
|
else theTile.setAttribute("class", `nonTriggered tile tile-${i}-${j} mine value-${tileObj.value}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：start()
|
||||||
|
功能：开始一局新游戏
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.start = function(){
|
||||||
|
//停止计时器
|
||||||
|
if (this.t){
|
||||||
|
clearInterval(this.t);
|
||||||
|
}
|
||||||
|
this.now = "Doing";
|
||||||
|
this.grid = [];
|
||||||
|
this.time = new Time(0, 0, 0);
|
||||||
|
this.emptyNum = this.hSize * this.wSize - this.mine;
|
||||||
|
this.createGridObj();
|
||||||
|
this.setValue();
|
||||||
|
this.timeStart();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：click()
|
||||||
|
参数：i: 横坐标, j: 纵坐标
|
||||||
|
功能：左键单击tile判断
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.click = function(i, j){
|
||||||
|
let theTile = document.querySelector(`.tile-${i}-${j}`);
|
||||||
|
|
||||||
|
//若第一次触发的不是空白，游戏重置
|
||||||
|
if(this.first){
|
||||||
|
while(this.grid[i][j].value != 0 || this.grid[i][j].isMine){
|
||||||
|
this.start();
|
||||||
|
}
|
||||||
|
this.first = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.grid[i][j].recent == "nonTriggered"){
|
||||||
|
this.grid[i][j].recent = "triggered";
|
||||||
|
let tileCon = theTile.getAttribute("class").split(" ");
|
||||||
|
tileCon.splice(tileCon.indexOf("nonTriggered"), 1);
|
||||||
|
tileCon.push("triggered");
|
||||||
|
tileCon = tileCon.join(" ");
|
||||||
|
theTile.setAttribute("class", tileCon);
|
||||||
|
|
||||||
|
if(this.grid[i][j].isMine){
|
||||||
|
let img = document.querySelector(`.tile-${i}-${j} img`);
|
||||||
|
img.setAttribute("src", "./image/bomb.png");
|
||||||
|
//停止计时器
|
||||||
|
clearInterval(this.t);
|
||||||
|
this.now = "Failed";
|
||||||
|
}else if(!this.grid[i][j].isMine){
|
||||||
|
this.emptyNum--;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.grid[i][j].value == 0 && !this.grid[i][j].isMine) this.checkEmpty(i, j);
|
||||||
|
|
||||||
|
if(this.emptyNum == 0){
|
||||||
|
//停止计时器
|
||||||
|
clearInterval(this.t);
|
||||||
|
this.now = "Win";
|
||||||
|
}
|
||||||
|
|
||||||
|
this.maskBlk();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：checkEmpty()
|
||||||
|
参数：i: 横坐标, j: 纵坐标
|
||||||
|
功能：检测单击方块周围是否为非雷方块
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.checkEmpty = function(i, j){
|
||||||
|
if (i != 0){
|
||||||
|
if (j != 0 && !this.grid[i-1][j-1].isMine && this.grid[i-1][j-1].recent == "nonTriggered") this.click(i-1, j-1);
|
||||||
|
if (!this.grid[i-1][j].isMine && this.grid[i-1][j].recent == "nonTriggered") this.click(i-1, j);
|
||||||
|
if (j != this.wSize-1 && !this.grid[i-1][j+1].isMine && this.grid[i-1][j+1].recent == "nonTriggered") this.click(i-1, j+1);
|
||||||
|
}
|
||||||
|
if (i != this.hSize-1){
|
||||||
|
if (j != 0 && !this.grid[i+1][j-1].isMine && this.grid[i+1][j-1].recent == "nonTriggered") this.click(i+1, j-1);
|
||||||
|
if (!this.grid[i+1][j].isMine && this.grid[i+1][j].recent == "nonTriggered") this.click(i+1, j);
|
||||||
|
if (j != this.wSize-1 && !this.grid[i+1][j+1].isMine && this.grid[i+1][j+1].recent == "nonTriggered") this.click(i+1, j+1);
|
||||||
|
}
|
||||||
|
if (j != 0 && !this.grid[i][j-1].isMine && this.grid[i][j-1].recent == "nonTriggered") this.click(i, j-1);
|
||||||
|
if (j != this.wSize-1 && !this.grid[i][j+1].isMine && this.grid[i][j+1].recent == "nonTriggered") this.click(i, j+1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：rightClick()
|
||||||
|
参数：i: 横坐标, j: 纵坐标
|
||||||
|
功能：右键单击tile判断
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.rightClick = function(i, j){
|
||||||
|
let theTile = document.querySelector(`.tile-${i}-${j}`);
|
||||||
|
|
||||||
|
if(this.grid[i][j].recent == "nonTriggered"){
|
||||||
|
this.grid[i][j].recent = "marked";
|
||||||
|
|
||||||
|
let tileCon = theTile.getAttribute("class").split(" ");
|
||||||
|
tileCon.splice(tileCon.indexOf("nonTriggered"), 1);
|
||||||
|
tileCon.push("marked");
|
||||||
|
tileCon = tileCon.join(" ");
|
||||||
|
theTile.setAttribute("class", tileCon);
|
||||||
|
}else if(this.grid[i][j].recent == "marked"){
|
||||||
|
this.grid[i][j].recent = "nonTriggered";
|
||||||
|
|
||||||
|
let tileCon = theTile.getAttribute("class").split(" ");
|
||||||
|
tileCon.splice(tileCon.indexOf("marked"), 1);
|
||||||
|
tileCon.push("nonTriggered");
|
||||||
|
tileCon = tileCon.join(" ");
|
||||||
|
theTile.setAttribute("class", tileCon);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：timeStart()
|
||||||
|
功能：开始计时
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.timeStart = function(){
|
||||||
|
let timeCon = document.querySelector(".timeCon");
|
||||||
|
let self = this;
|
||||||
|
if (this.now = "Doing"){
|
||||||
|
this.t = setInterval(function(){
|
||||||
|
self.time.time.s++;
|
||||||
|
if (self.time.time.s == 60){
|
||||||
|
self.time.time.min++;
|
||||||
|
self.time.time.s = 0;
|
||||||
|
}
|
||||||
|
if (self.time.time.min == 60){
|
||||||
|
self.time.time.h++;
|
||||||
|
self.time.time.min = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
timeCon.innerHTML = self.time.getTime();
|
||||||
|
|
||||||
|
//每一秒保存一次游戏
|
||||||
|
self.setGame();
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：restart()
|
||||||
|
功能：恢复初始状态
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.restart = function(){
|
||||||
|
//隐藏结束界面蒙版
|
||||||
|
document.querySelector(".mask").style.display = "none";
|
||||||
|
//恢复第一次点击
|
||||||
|
this.first = true;
|
||||||
|
//停止计时器
|
||||||
|
clearInterval(this.t);
|
||||||
|
//恢复所有tile的class
|
||||||
|
for (let i = 0; i < this.hSize; i++){
|
||||||
|
for (let j = 0; j < this.wSize; j++){
|
||||||
|
let theTile = document.querySelector(`.tile-${i}-${j}`);
|
||||||
|
theTile.setAttribute("class", `nonTriggered tile tile-${i}-${j}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//初始化时间
|
||||||
|
let timeCon = document.querySelector(".timeCon");
|
||||||
|
timeCon.innerHTML = "0h0min0s";
|
||||||
|
//初始化当前状态
|
||||||
|
this.now = "Waiting";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：maskBlk()
|
||||||
|
功能：判断游戏是否结束，渲染结束界面蒙版
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.maskBlk = function(){
|
||||||
|
if(this.now == "Win"){
|
||||||
|
window.localStorage.removeItem(this.gameKey);
|
||||||
|
document.querySelector(".mask").style.display = "block";
|
||||||
|
switch (this.lang){
|
||||||
|
case "zh_cn":
|
||||||
|
document.querySelector(".content").innerHTML = "你赢了！";
|
||||||
|
document.querySelector(".enterName input").setAttribute("placeholder", "请输入您的昵称");
|
||||||
|
break;
|
||||||
|
case "en":
|
||||||
|
document.querySelector(".content").innerHTML = "You win!";
|
||||||
|
document.querySelector(".enterName input").setAttribute("placeholder", "Please enter your nickname");
|
||||||
|
break;
|
||||||
|
case "jp":
|
||||||
|
document.querySelector(".content").innerHTML = "ユーウィン！";
|
||||||
|
document.querySelector(".enterName input").setAttribute("placeholder", "ニックネームを入力してください");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
document.querySelector(".enterName").style.display = "flex";
|
||||||
|
}else if(this.now == "Failed"){
|
||||||
|
window.localStorage.removeItem(this.gameKey);
|
||||||
|
document.querySelector(".mask").style.display = "block";
|
||||||
|
switch (this.lang){
|
||||||
|
case "zh_cn":
|
||||||
|
document.querySelector(".content").innerHTML = "你输了！";
|
||||||
|
break;
|
||||||
|
case "en":
|
||||||
|
document.querySelector(".content").innerHTML = "You failed!";
|
||||||
|
break;
|
||||||
|
case "jp":
|
||||||
|
document.querySelector(".content").innerHTML = "残念！";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
document.querySelector(".enterName").style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：rankConfirm()
|
||||||
|
功能：处理胜利界面确认按钮动作
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.rankConfirm = function(){
|
||||||
|
const ID = document.querySelector("input").value;
|
||||||
|
const time = this.time.getTime();
|
||||||
|
this.leaderBoard.setHigh(ID, time);
|
||||||
|
document.querySelector(".enterName").style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：serialize()
|
||||||
|
功能：grid序列化
|
||||||
|
返回值：序列化后的grid以及游戏时间的对象
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.serialize = function(){
|
||||||
|
const grid = [];
|
||||||
|
for (let i = 0; i < this.hSize; i++){
|
||||||
|
grid.push([]);
|
||||||
|
for (let j = 0; j < this.wSize; j++){
|
||||||
|
grid[i].push(this.grid[i][j].serialize());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
grid: grid,
|
||||||
|
time: {
|
||||||
|
h: this.time.time.h,
|
||||||
|
min: this.time.time.min,
|
||||||
|
s: this.time.time.s
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：serialize()
|
||||||
|
参数：grid: 序列化的grid, time: 游戏时间
|
||||||
|
功能：游戏内容反序列化
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.recover = function(grid, time){
|
||||||
|
this.first = false;
|
||||||
|
this.now = "Doing";
|
||||||
|
this.time.time.h = time.h;
|
||||||
|
this.time.time.min = time.min;
|
||||||
|
this.time.time.s = time.s;
|
||||||
|
this.timeStart();
|
||||||
|
this.grid = [];
|
||||||
|
for (let i = 0; i < this.hSize; i++){
|
||||||
|
this.grid.push([]);
|
||||||
|
for (let j = 0; j < this.wSize; j++){
|
||||||
|
let sTile = grid[i][j];
|
||||||
|
let newTile = new Tile(i, j);
|
||||||
|
newTile.value = sTile.value;
|
||||||
|
newTile.isMine = sTile.isMine;
|
||||||
|
newTile.recent = sTile.recent;
|
||||||
|
this.grid[i].push(newTile);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.recoverValue();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：recoverValue()
|
||||||
|
功能：反序列化后重新渲染界面
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.recoverValue = function(){
|
||||||
|
this.emptyNum = this.hSize * this.wSize - this.mine;
|
||||||
|
for (let i = 0; i < this.hSize; i++){
|
||||||
|
for (let j = 0; j < this.wSize; j++){
|
||||||
|
let tileObj = this.grid[i][j];
|
||||||
|
let theTile = document.querySelector(`.tile-${i}-${j}`);
|
||||||
|
let tileCon = ["tile", `tile-${i}-${j}`];
|
||||||
|
if(tileObj.isMine) tileCon.push("mine");
|
||||||
|
tileCon.push(tileObj.recent);
|
||||||
|
if(tileObj.recent == "triggered") this.emptyNum--;
|
||||||
|
tileCon.push(`value-${tileObj.value}`);
|
||||||
|
tileCon = tileCon.join(" ");
|
||||||
|
theTile.setAttribute("class", tileCon);
|
||||||
|
|
||||||
|
//添加内置图像
|
||||||
|
let img = document.createElement("img");
|
||||||
|
img.setAttribute("src","./image/flag.png");
|
||||||
|
img.style.width = this.size;
|
||||||
|
img.style.height = this.size;
|
||||||
|
theTile.appendChild(img);
|
||||||
|
|
||||||
|
//添加value数字
|
||||||
|
if (tileObj.value != 0){
|
||||||
|
let valueCon = document.createElement("p");
|
||||||
|
valueCon.innerHTML = tileObj.value;
|
||||||
|
valueCon.style.width = this.size;
|
||||||
|
valueCon.style.height = this.size;
|
||||||
|
valueCon.style.fontSize = this.fontSize;
|
||||||
|
valueCon.style.lineHeight = this.size;
|
||||||
|
valueCon.style.bottom = `calc(${this.size}/2)`;
|
||||||
|
theTile.appendChild(valueCon);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：setGame()
|
||||||
|
功能：游戏记录写入缓存
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.setGame = function(){
|
||||||
|
window.localStorage.setItem(
|
||||||
|
this.gameKey,
|
||||||
|
JSON.stringify(this.serialize())
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：getGame()
|
||||||
|
功能：从缓存中读取游戏记录
|
||||||
|
返回值：若缓存中存在游戏记录，返回游戏记录，否则返回null
|
||||||
|
**************************************/
|
||||||
|
Grid.prototype.getGame = function(){
|
||||||
|
const state = window.localStorage.getItem(this.gameKey);
|
||||||
|
return state ? JSON.parse(state) : null;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
/**************************************
|
||||||
|
文件名：language.js
|
||||||
|
功能：该模块用于处理主菜单语言相关内容
|
||||||
|
版本：2.0(23.01.08)
|
||||||
|
**************************************/
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
对象名：Language
|
||||||
|
参数：lang: 传入语言(zh_cn为中文，en为英文，jp为日文)
|
||||||
|
**************************************/
|
||||||
|
function Language(lang){
|
||||||
|
this.lang = lang;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：langRender()
|
||||||
|
功能：根据语种渲染对应的语言
|
||||||
|
**************************************/
|
||||||
|
Language.prototype.langRender = function(){
|
||||||
|
switch (this.lang){
|
||||||
|
case "zh_cn":
|
||||||
|
this.chineseRender();
|
||||||
|
break;
|
||||||
|
case "en":
|
||||||
|
this.englishRender();
|
||||||
|
break;
|
||||||
|
case "jp":
|
||||||
|
this.japaneseRender();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：chineseRender()
|
||||||
|
功能：渲染中文
|
||||||
|
**************************************/
|
||||||
|
Language.prototype.chineseRender = function(){
|
||||||
|
document.querySelector(".timeTitle").innerHTML = "游戏时长";
|
||||||
|
document.querySelector(".confirm").innerHTML = "确认";
|
||||||
|
let newBtn = document.querySelectorAll(".new");
|
||||||
|
for (let i = 0; i < newBtn.length; i++){
|
||||||
|
newBtn[i].innerHTML = "重开一局";
|
||||||
|
}
|
||||||
|
let back = document.querySelectorAll(".back");
|
||||||
|
for (let i = 0; i < back.length; i++){
|
||||||
|
back[i].innerHTML = "返回";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：englishRender()
|
||||||
|
功能：渲染英文
|
||||||
|
**************************************/
|
||||||
|
Language.prototype.englishRender = function(){
|
||||||
|
document.querySelector(".timeTitle").innerHTML = "Time";
|
||||||
|
document.querySelector(".confirm").innerHTML = "Confirm";
|
||||||
|
let newBtn = document.querySelectorAll(".new");
|
||||||
|
for (let i = 0; i < newBtn.length; i++){
|
||||||
|
newBtn[i].innerHTML = "New Game";
|
||||||
|
}
|
||||||
|
let back = document.querySelectorAll(".back");
|
||||||
|
for (let i = 0; i < back.length; i++){
|
||||||
|
back[i].innerHTML = "Back";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：japaneseRender()
|
||||||
|
功能：渲染日语
|
||||||
|
**************************************/
|
||||||
|
Language.prototype.japaneseRender = function(){
|
||||||
|
document.querySelector(".timeTitle").innerHTML = "プレイ時間";
|
||||||
|
document.querySelector(".confirm").innerHTML = "確認する";
|
||||||
|
let newBtn = document.querySelectorAll(".new");
|
||||||
|
for (let i = 0; i < newBtn.length; i++){
|
||||||
|
newBtn[i].innerHTML = "ニューゲーム";
|
||||||
|
}
|
||||||
|
let back = document.querySelectorAll(".back");
|
||||||
|
for (let i = 0; i < back.length; i++){
|
||||||
|
back[i].innerHTML = "戻る";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
/**************************************
|
||||||
|
文件名：leaderBoard.js
|
||||||
|
功能：该模块用于处理排行榜相关内容
|
||||||
|
版本：2.0(23.01.08)
|
||||||
|
**************************************/
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
对象名：LeaderBoard
|
||||||
|
参数：mode: 游戏难度
|
||||||
|
**************************************/
|
||||||
|
function LeaderBoard(mode){
|
||||||
|
//获取难度
|
||||||
|
this.mode = mode
|
||||||
|
//设置排行榜缓存标签
|
||||||
|
this.HighRankKey = 'MinesweeperRank';
|
||||||
|
//从缓存中获取排行榜
|
||||||
|
this.highRank = this.getRank();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：setHigh()
|
||||||
|
参数：ID: 玩家昵称, time: 游戏时长字符串
|
||||||
|
功能：设置最高分
|
||||||
|
**************************************/
|
||||||
|
LeaderBoard.prototype.setHigh = function(ID, time){
|
||||||
|
let newHigh = {
|
||||||
|
ID: ID,
|
||||||
|
time: time
|
||||||
|
}
|
||||||
|
switch(this.mode){
|
||||||
|
case "easy":
|
||||||
|
this.rankCompare(this.highRank.easyRank, newHigh);
|
||||||
|
break;
|
||||||
|
case "hard":
|
||||||
|
this.rankCompare(this.highRank.hardRank, newHigh);
|
||||||
|
break;
|
||||||
|
case "extra":
|
||||||
|
this.rankCompare(this.highRank.extraRank, newHigh);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：rankCompare()
|
||||||
|
参数：rank: 对应难度排行榜数组, newHigh: 通关成绩对象
|
||||||
|
功能：对比现有排行榜内容和传入成绩，如果破纪录则加入排行榜
|
||||||
|
**************************************/
|
||||||
|
LeaderBoard.prototype.rankCompare = function(rank, newHigh){
|
||||||
|
let nH = newHigh.time.substring(0, newHigh.time.indexOf("h"));
|
||||||
|
let nMin = newHigh.time.substring(newHigh.time.indexOf("h")+1, newHigh.time.indexOf("min"));
|
||||||
|
let nS = newHigh.time.substring(newHigh.time.indexOf("min")+3, newHigh.time.indexOf("s"));
|
||||||
|
let flag = false;
|
||||||
|
if(rank.length == 0){
|
||||||
|
rank.splice(0, 0, newHigh);
|
||||||
|
flag = true;
|
||||||
|
}else {
|
||||||
|
for (let i = 0; i < rank.length; i++){
|
||||||
|
let obj = rank[i];
|
||||||
|
let h = parseInt(obj.time.substring(0, obj.time.indexOf("h")));
|
||||||
|
let min = parseInt(obj.time.substring(obj.time.indexOf("h")+1, obj.time.indexOf("min")));
|
||||||
|
let s = parseInt(obj.time.substring(obj.time.indexOf("min")+3, obj.time.indexOf("s")));
|
||||||
|
if(nH < h){
|
||||||
|
flag = true;
|
||||||
|
}else if(nH == h && nMin < min){
|
||||||
|
flag = true;
|
||||||
|
}else if(nH == h && nMin == min && nS < s){
|
||||||
|
flag = true;
|
||||||
|
}
|
||||||
|
if(flag){
|
||||||
|
rank.splice(i, 0, newHigh);
|
||||||
|
if(rank.length == 11){
|
||||||
|
rank.pop();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(rank.length < 10 && !flag){
|
||||||
|
rank.splice(rank.length, 0, newHigh);
|
||||||
|
flag = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(flag){
|
||||||
|
this.setRank();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：setRank()
|
||||||
|
功能：将排行榜写入缓存
|
||||||
|
**************************************/
|
||||||
|
LeaderBoard.prototype.setRank = function(){
|
||||||
|
window.localStorage.setItem(
|
||||||
|
this.HighRankKey,
|
||||||
|
JSON.stringify(this.highRank)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：getRank()
|
||||||
|
功能：从缓存中获取排行榜
|
||||||
|
返回值：返回排行榜对象
|
||||||
|
**************************************/
|
||||||
|
LeaderBoard.prototype.getRank = function(){
|
||||||
|
let newRank = {
|
||||||
|
easyRank: [],
|
||||||
|
hardRank: [],
|
||||||
|
extraRank: []
|
||||||
|
}
|
||||||
|
const rank = window.localStorage.getItem(this.HighRankKey);
|
||||||
|
//如果缓存中没有排行榜，返回空的排行榜对象
|
||||||
|
return rank ? JSON.parse(rank) : newRank;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
/**************************************
|
||||||
|
文件名：listener.js
|
||||||
|
功能：该模块用于处理事件监听相关内容
|
||||||
|
版本：2.0(23.01.08)
|
||||||
|
**************************************/
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
对象名：Listener
|
||||||
|
参数：lang: 传入语言, grid: 传入grid对象
|
||||||
|
**************************************/
|
||||||
|
function Listener(lang, grid){
|
||||||
|
//在设置监听的匿名函数中，“this”不是指代的Listener对象，必须单独获取
|
||||||
|
let self = this;
|
||||||
|
//获取语言
|
||||||
|
this.lang = lang;
|
||||||
|
//获取grid对象
|
||||||
|
this.grid = grid;
|
||||||
|
//获取所有返回按钮
|
||||||
|
this.back = document.querySelectorAll(".back");
|
||||||
|
//获取所有新游戏按钮
|
||||||
|
this.newBtn = document.querySelectorAll(".new");
|
||||||
|
//监听输入框旁的确认按钮
|
||||||
|
this.confirm = document.querySelector(".confirm");
|
||||||
|
|
||||||
|
//监听返回按钮点击事件
|
||||||
|
for (let i = 0; i < this.back.length; i++){
|
||||||
|
this.back[i].addEventListener("click", function(){
|
||||||
|
window.open(`./menu.html?lang=${self.lang}`, "_self");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//监听新游戏按钮点击事件
|
||||||
|
for (let i = 0; i < this.newBtn.length; i++){
|
||||||
|
this.newBtn[i].addEventListener("click", function(){
|
||||||
|
self.grid.restart();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//监听确认按钮点击事件
|
||||||
|
this.confirm.addEventListener("click", function(){
|
||||||
|
self.grid.rankConfirm();
|
||||||
|
})
|
||||||
|
|
||||||
|
//监听tile点击事件
|
||||||
|
for (let i = 0; i < this.grid.hSize; i++){
|
||||||
|
for (let j = 0; j < this.grid.wSize; j++){
|
||||||
|
let theTile = document.querySelector(`.tile-${i}-${j}`);
|
||||||
|
|
||||||
|
theTile.addEventListener("click", function (){
|
||||||
|
if(self.grid.now == "Waiting"){
|
||||||
|
self.grid.start();
|
||||||
|
}
|
||||||
|
|
||||||
|
self.grid.click(i, j);
|
||||||
|
});
|
||||||
|
|
||||||
|
theTile.addEventListener("contextmenu", function (){
|
||||||
|
self.grid.rightClick(i, j);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//屏蔽右键菜单
|
||||||
|
document.oncontextmenu = function (event){
|
||||||
|
if(window.event){
|
||||||
|
event = window.event;
|
||||||
|
}try{
|
||||||
|
var the = event.srcElement;
|
||||||
|
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")){
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}catch (e){
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
/**************************************
|
||||||
|
文件名：manager.js
|
||||||
|
功能：该模块用于处理游戏界面相关内容
|
||||||
|
版本：2.0(23.01.08)
|
||||||
|
**************************************/
|
||||||
|
|
||||||
|
//新建Manager对象
|
||||||
|
new Manager();
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
对象名：Manager
|
||||||
|
**************************************/
|
||||||
|
function Manager(){
|
||||||
|
//获取URL中“?”及后续部分
|
||||||
|
let url = location.search;
|
||||||
|
if (url.indexOf("?") != -1){
|
||||||
|
//截取1到url.length的部分
|
||||||
|
url = url.substring(1);
|
||||||
|
//若传入了多个参数，以&分隔，此处将参数分解为数组内多个元素
|
||||||
|
url = url.split('&');
|
||||||
|
}
|
||||||
|
//参数第0项是语言参数lang，第一项是难度参数mode，以等号分开，取等号后内容
|
||||||
|
this.lang = url[0].split('=')[1];
|
||||||
|
this.mode = url[1].split('=')[1];
|
||||||
|
|
||||||
|
//Language对象实例化
|
||||||
|
this.language = new Language(this.lang);
|
||||||
|
this.language.langRender();
|
||||||
|
|
||||||
|
//Grid对象实例化
|
||||||
|
this.grid = new Grid(this.lang, this.mode);
|
||||||
|
this.grid.setMode();
|
||||||
|
|
||||||
|
//Listener对象实例化
|
||||||
|
this.listener = new Listener(this.lang, this.grid);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
/**************************************
|
||||||
|
文件名：tile.js
|
||||||
|
功能：该模块用于处理单个小方格相关内容
|
||||||
|
版本：2.0(23.01.08)
|
||||||
|
**************************************/
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
对象名：Tile
|
||||||
|
参数：x: 横坐标, y: 纵坐标
|
||||||
|
**************************************/
|
||||||
|
function Tile(x, y){
|
||||||
|
//方块的位置
|
||||||
|
this.position = {
|
||||||
|
positionX: x,
|
||||||
|
positionY: y
|
||||||
|
}
|
||||||
|
//value为数字0~8时，指代周围有对应数字的雷数
|
||||||
|
this.value = 0;
|
||||||
|
//为true时是雷
|
||||||
|
this.isMine = false;
|
||||||
|
//方块目前状态，“nonTriggered”是未触发，“triggered”是已触发，“marked”是被标记
|
||||||
|
this.recent = "nonTriggered";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：serialize()
|
||||||
|
功能：序列化当前Tile对象
|
||||||
|
返回值：包含value、isMine、recent的对象
|
||||||
|
**************************************/
|
||||||
|
Tile.prototype.serialize = function(){
|
||||||
|
return {
|
||||||
|
value: this.value,
|
||||||
|
isMine: this.isMine,
|
||||||
|
recent: this.recent
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
/**************************************
|
||||||
|
文件名：time.js
|
||||||
|
功能：该模块用于处理游戏时间相关内容
|
||||||
|
版本：2.0(23.01.08)
|
||||||
|
**************************************/
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
对象名：Time
|
||||||
|
参数：h: 小时, min: 分钟, s: 秒
|
||||||
|
**************************************/
|
||||||
|
function Time(h, min, s){
|
||||||
|
this.time = {
|
||||||
|
h: h,
|
||||||
|
min: min,
|
||||||
|
s: s
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：getTime()
|
||||||
|
功能：获得当前游戏时间
|
||||||
|
返回值：当前游戏时间字符串
|
||||||
|
**************************************/
|
||||||
|
Time.prototype.getTime = function(){
|
||||||
|
return `${this.time.h}h${this.time.min}min${this.time.s}s`;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
/**************************************
|
||||||
|
文件名：index.js
|
||||||
|
功能：该模块用于处理开始界面相关内容
|
||||||
|
版本：2.0(23.01.08)
|
||||||
|
**************************************/
|
||||||
|
|
||||||
|
//3秒后进入主菜单
|
||||||
|
setTimeout(function (){
|
||||||
|
window.open('./menu.html?lang=en', "_self");
|
||||||
|
}, 3000);
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
/**************************************
|
||||||
|
文件名：language.js
|
||||||
|
功能：该模块用于处理主菜单语言相关内容
|
||||||
|
版本：2.0(23.01.08)
|
||||||
|
**************************************/
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
对象名：Language
|
||||||
|
参数：lang: 传入语言(zh_cn为中文，en为英文，jp为日文)
|
||||||
|
**************************************/
|
||||||
|
function Language(lang){
|
||||||
|
this.lang = lang;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：langRender()
|
||||||
|
功能：根据语种渲染对应的语言
|
||||||
|
**************************************/
|
||||||
|
Language.prototype.langRender = function(){
|
||||||
|
switch (this.lang){
|
||||||
|
case "zh_cn":
|
||||||
|
this.chineseRender();
|
||||||
|
break;
|
||||||
|
case "en":
|
||||||
|
this.englishRender();
|
||||||
|
break;
|
||||||
|
case "jp":
|
||||||
|
this.japaneseRender();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：chineseRender()
|
||||||
|
功能：渲染中文
|
||||||
|
**************************************/
|
||||||
|
Language.prototype.chineseRender = function(){
|
||||||
|
document.querySelector(".menu").innerHTML = "扫雷";
|
||||||
|
document.querySelector(".start").innerHTML = "开始游戏";
|
||||||
|
document.querySelector(".tutorial").innerHTML = "新手教程";
|
||||||
|
document.querySelector(".leaderBoard").innerHTML = "排行榜";
|
||||||
|
document.querySelector(".exit").innerHTML = "退出游戏";
|
||||||
|
document.querySelector(".diffCon").innerHTML = "难度选择";
|
||||||
|
document.querySelector(".easy").innerHTML = "简单";
|
||||||
|
document.querySelector(".hard").innerHTML = "困难";
|
||||||
|
let back = document.querySelectorAll(".back");
|
||||||
|
for (let i = 0; i < back.length; i++){
|
||||||
|
back[i].innerHTML = "返回";
|
||||||
|
}
|
||||||
|
document.querySelector(".tutoCon").innerHTML = "新手教程";
|
||||||
|
document.querySelector(".tutor").innerHTML =
|
||||||
|
`<P>点击鼠标左键敲开方块</P>
|
||||||
|
<p>如果触发了地雷，游戏结束</p>
|
||||||
|
<p>如果出现数字，则意味着周围有对应数字的地雷数</p>
|
||||||
|
<p>如果是空白，则周围无地雷</p>
|
||||||
|
<p>鼠标右击标记你怀疑是地雷的方块</p>
|
||||||
|
<p>再右击一次可以取消标记</p>
|
||||||
|
<p>敲开所有非地雷方块，赢得最终胜利</p>`;
|
||||||
|
document.querySelector(".leaderCon").innerHTML = "排行榜";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：englishRender()
|
||||||
|
功能：渲染英文
|
||||||
|
**************************************/
|
||||||
|
Language.prototype.englishRender = function(){
|
||||||
|
document.querySelector(".menu").innerHTML = "Minesweeper";
|
||||||
|
document.querySelector(".start").innerHTML = "Start Game";
|
||||||
|
document.querySelector(".tutorial").innerHTML = "Tutorial";
|
||||||
|
document.querySelector(".leaderBoard").innerHTML = "Leaderboard";
|
||||||
|
document.querySelector(".exit").innerHTML = "Exit";
|
||||||
|
document.querySelector(".diffCon").innerHTML = "Difficulty";
|
||||||
|
document.querySelector(".easy").innerHTML = "Easy";
|
||||||
|
document.querySelector(".hard").innerHTML = "Hard";
|
||||||
|
let back = document.querySelectorAll(".back");
|
||||||
|
for (let i = 0; i < back.length; i++){
|
||||||
|
back[i].innerHTML = "Back";
|
||||||
|
}
|
||||||
|
document.querySelector(".tutoCon").innerHTML = "Tutorial";
|
||||||
|
document.querySelector(".tutor").innerHTML =
|
||||||
|
`<P>Click the left mouse button to crack open the square</P>
|
||||||
|
<p>If a mine is triggered, the game is over</p>
|
||||||
|
<p>If a number appears, it means that the number of mines with the corresponding number is around</p>
|
||||||
|
<p>If blank, there are no mines around</p>
|
||||||
|
<p>Right mouse click on the square that marks what you suspect is a mine</p>
|
||||||
|
<p>Right click again to unmark</p>
|
||||||
|
<p>Knock out all the non-mine squares to win the final victory</p>`;
|
||||||
|
document.querySelector(".leaderCon").innerHTML = "Leaderboard";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：japaneseRender()
|
||||||
|
功能：渲染日语
|
||||||
|
**************************************/
|
||||||
|
Language.prototype.japaneseRender = function(){
|
||||||
|
document.querySelector(".menu").innerHTML = "マインスイーパー";
|
||||||
|
document.querySelector(".start").innerHTML = "スタート";
|
||||||
|
document.querySelector(".tutorial").innerHTML = "私は初心者";
|
||||||
|
document.querySelector(".leaderBoard").innerHTML = "リーダーボード";
|
||||||
|
document.querySelector(".exit").innerHTML = "ゲーム終了";
|
||||||
|
document.querySelector(".diffCon").innerHTML = "難易度";
|
||||||
|
document.querySelector(".easy").innerHTML = "簡単";
|
||||||
|
document.querySelector(".hard").innerHTML = "難しい";
|
||||||
|
let back = document.querySelectorAll(".back");
|
||||||
|
for (let i = 0; i < back.length; i++){
|
||||||
|
back[i].innerHTML = "戻る";
|
||||||
|
}
|
||||||
|
document.querySelector(".tutoCon").innerHTML = "チュートリアル";
|
||||||
|
document.querySelector(".tutor").innerHTML =
|
||||||
|
`<P>マウスの左ボタンで四角を発動します</P>
|
||||||
|
<p>地雷が発生したらゲームオーバー</p>
|
||||||
|
<p>数字が表示された場合、その数字に対応する地雷の数が周辺にあることを意味します</p>
|
||||||
|
<p>空白の場合、地雷はありません</p>
|
||||||
|
<p>地雷と思われるマークをマウスの右ボタンでクリックする</p>
|
||||||
|
<p>もう一度右クリックすると、マークが消えます</p>
|
||||||
|
<p>地雷のないマスをすべてトリガーにして最終的に勝利する</p>`;
|
||||||
|
document.querySelector(".leaderCon").innerHTML = "リーダーボード";
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,121 @@
|
||||||
|
/**************************************
|
||||||
|
文件名：leaderBoard.js
|
||||||
|
功能：该模块用于处理主菜单排行榜相关内容
|
||||||
|
版本：2.0(23.01.08)
|
||||||
|
**************************************/
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
对象名：LeaderBoard
|
||||||
|
参数：lang: 传入语言
|
||||||
|
**************************************/
|
||||||
|
function LeaderBoard(lang){
|
||||||
|
//设置排行榜缓存标签
|
||||||
|
this.HighRankKey = 'MinesweeperRank';
|
||||||
|
//从缓存中获取排行榜
|
||||||
|
this.highRank = this.getRank();
|
||||||
|
//获取HTML中排行榜
|
||||||
|
this.leadList = document.querySelector(".leadList");
|
||||||
|
//获取排行榜下一页按钮
|
||||||
|
this.next = document.querySelector(".next");
|
||||||
|
//获取语言
|
||||||
|
this.lang = lang;
|
||||||
|
|
||||||
|
//在设置监听的匿名函数中，“this”不是指代的leaderBoard对象，必须单独获取
|
||||||
|
let self = this;
|
||||||
|
//下一页按钮事件监听
|
||||||
|
this.next.addEventListener("click", function(){
|
||||||
|
let nextDiff = self.next.innerHTML;
|
||||||
|
if(nextDiff == "Easy" || nextDiff == "简单" || nextDiff == "簡単"){
|
||||||
|
self.rankRender("easy");
|
||||||
|
}else if(nextDiff == "Hard" || nextDiff == "困难" || nextDiff == "難しい"){
|
||||||
|
self.rankRender("hard");
|
||||||
|
}else if(nextDiff == "Extra"){
|
||||||
|
self.rankRender("extra");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：getRank()
|
||||||
|
功能：从缓存中获取排行榜
|
||||||
|
返回值：返回排行榜对象
|
||||||
|
**************************************/
|
||||||
|
LeaderBoard.prototype.getRank = function(){
|
||||||
|
let newRank = {
|
||||||
|
easyRank: [],
|
||||||
|
hardRank: [],
|
||||||
|
extraRank: []
|
||||||
|
}
|
||||||
|
const rank = window.localStorage.getItem(this.HighRankKey);
|
||||||
|
//如果缓存中没有排行榜，返回空的排行榜对象
|
||||||
|
return rank ? JSON.parse(rank) : newRank;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：rankRender(difficulty)
|
||||||
|
参数：difficulty: 游戏难度(easy为简单，hard为困难，extra为ex难度)
|
||||||
|
功能：渲染排行榜
|
||||||
|
**************************************/
|
||||||
|
LeaderBoard.prototype.rankRender = function(difficulty){
|
||||||
|
let rank = null;
|
||||||
|
let diffCon = '';
|
||||||
|
let nextCon = '';
|
||||||
|
switch(difficulty){
|
||||||
|
case "easy":
|
||||||
|
rank = this.highRank.easyRank;
|
||||||
|
switch(this.lang){
|
||||||
|
case "zh_cn":
|
||||||
|
diffCon = "简单";
|
||||||
|
nextCon = "困难";
|
||||||
|
break;
|
||||||
|
case "en":
|
||||||
|
diffCon = "Easy";
|
||||||
|
nextCon = "Hard";
|
||||||
|
break;
|
||||||
|
case "jp":
|
||||||
|
diffCon = "簡単";
|
||||||
|
nextCon = "難しい";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "hard":
|
||||||
|
rank = this.highRank.hardRank;
|
||||||
|
switch(this.lang){
|
||||||
|
case "zh_cn":
|
||||||
|
diffCon = "困难";
|
||||||
|
break;
|
||||||
|
case "en":
|
||||||
|
diffCon = "Hard";
|
||||||
|
break;
|
||||||
|
case "jp":
|
||||||
|
diffCon = "難しい";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
nextCon = "Extra";
|
||||||
|
break;
|
||||||
|
case "extra":
|
||||||
|
rank = this.highRank.extraRank;
|
||||||
|
switch(this.lang){
|
||||||
|
case "zh_cn":
|
||||||
|
nextCon = "简单";
|
||||||
|
break;
|
||||||
|
case "en":
|
||||||
|
nextCon = "Easy";
|
||||||
|
break;
|
||||||
|
case "jp":
|
||||||
|
nextCon = "簡単";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
diffCon = "Extra";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
this.leadList.innerHTML = '';
|
||||||
|
for (let i = 0; i < rank.length; i++){
|
||||||
|
let li = document.createElement("li");
|
||||||
|
li.innerHTML =
|
||||||
|
`<div>${i+1}</div><div>${rank[i].ID}</div><div>${rank[i].time}</div>`;
|
||||||
|
this.leadList.appendChild(li);
|
||||||
|
}
|
||||||
|
document.querySelector(".leaderDif").innerHTML = diffCon;
|
||||||
|
this.next.innerHTML = nextCon;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,147 @@
|
||||||
|
/**************************************
|
||||||
|
文件名：listener.js
|
||||||
|
功能：该模块用于处理事件监听相关内容
|
||||||
|
版本：2.0(23.01.08)
|
||||||
|
**************************************/
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
对象名：Listener
|
||||||
|
参数：lang: 传入语言
|
||||||
|
**************************************/
|
||||||
|
function Listener(lang) {
|
||||||
|
//获取HTML中的Language按钮
|
||||||
|
this.langSltBtn = document.querySelector(".langSltBtn");
|
||||||
|
//获取语言按钮列表
|
||||||
|
this.langSlt = document.querySelector("footer .language");
|
||||||
|
//获取所有的语言按钮
|
||||||
|
this.langs = document.querySelectorAll(".lang");
|
||||||
|
//获取难度菜单
|
||||||
|
this.difficulty = document.querySelector(".difficulty");
|
||||||
|
//获取主菜单列表按钮
|
||||||
|
this.selection = document.querySelectorAll(".menuList button");
|
||||||
|
//获取难度列表按钮
|
||||||
|
this.diffBtn = document.querySelectorAll(".difficulty button");
|
||||||
|
//获取新手教程界面
|
||||||
|
this.tutorial = document.querySelector(".tutorialBlk");
|
||||||
|
//获取新手教程界面返回按钮
|
||||||
|
this.tutoBack = document.querySelector(".tutorialBlk .back");
|
||||||
|
//获取排行榜界面
|
||||||
|
this.leaderBlk = document.querySelector(".leaderBlk");
|
||||||
|
//获取排行榜界面返回按钮
|
||||||
|
this.leadBack = document.querySelector(".leaderBlk .back");
|
||||||
|
//获取语言
|
||||||
|
this.lang = lang;
|
||||||
|
|
||||||
|
//在设置监听的匿名函数中，“this”不是指代的Listener对象，必须单独获取
|
||||||
|
let self = this;
|
||||||
|
//语言按钮点击事件
|
||||||
|
let flag = false;
|
||||||
|
this.langSltBtn.addEventListener("click", function (){
|
||||||
|
flag = !flag;
|
||||||
|
self.langSlt.style.display = (flag) ? "flex" : "none";
|
||||||
|
});
|
||||||
|
|
||||||
|
//主菜单列表按钮点击事件
|
||||||
|
for (let i = 0; i < this.selection.length; i++){
|
||||||
|
this.selection[i].addEventListener("click", function (){
|
||||||
|
self.btnClick(i);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//难度列表按钮点击事件
|
||||||
|
for (let i = 0; i < this.diffBtn.length; i++){
|
||||||
|
this.diffBtn[i].addEventListener("click", function (){
|
||||||
|
self.diffBtnClick(i);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//新手教程界面返回按钮点击事件
|
||||||
|
this.tutoBack.addEventListener("click", function (){
|
||||||
|
self.tutorial.style.display = "none";
|
||||||
|
});
|
||||||
|
|
||||||
|
//排行榜界面返回按钮点击事件
|
||||||
|
this.leadBack.addEventListener("click", function (){
|
||||||
|
self.leaderBlk.style.display = "none";
|
||||||
|
});
|
||||||
|
|
||||||
|
//切换语言
|
||||||
|
for (let i = 0; i < this.langs.length; i++) {
|
||||||
|
this.langs[i].addEventListener("click", function (){
|
||||||
|
let lang = self.langs[i].innerHTML;
|
||||||
|
let langCode = '';
|
||||||
|
switch(lang){
|
||||||
|
case "中文":
|
||||||
|
langCode = "zh_cn";
|
||||||
|
break;
|
||||||
|
case "English":
|
||||||
|
langCode = "en";
|
||||||
|
break;
|
||||||
|
case "日本語":
|
||||||
|
langCode = "jp";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
window.open(`./menu.html?lang=${langCode}`,"_self");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：btnClick()
|
||||||
|
参数：i: 第i个按钮
|
||||||
|
功能：处理主菜单按钮事件
|
||||||
|
**************************************/
|
||||||
|
Listener.prototype.btnClick = function(i){
|
||||||
|
switch (i){
|
||||||
|
case 0:
|
||||||
|
this.difficulty.style.display = "block";
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
this.tutorial.style.display = "block";
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
this.leaderBlk.style.display = "block";
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
window.location.href = "about:blank";
|
||||||
|
window.close();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
方式名：diffBtnClick()
|
||||||
|
参数：i: 第i个按钮
|
||||||
|
功能：处理难度选单按钮事件
|
||||||
|
**************************************/
|
||||||
|
Listener.prototype.diffBtnClick = function(i){
|
||||||
|
switch (i){
|
||||||
|
case 0:
|
||||||
|
window.open(`./game.html?lang=${this.lang}&mode=easy`, "_self");
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
window.open(`./game.html?lang=${this.lang}&mode=hard`, "_self");
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
window.open(`./game.html?lang=${this.lang}&mode=extra`, "_self");
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
this.difficulty.style.display = "none";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//屏蔽右键菜单
|
||||||
|
document.oncontextmenu = function(event){
|
||||||
|
if(window.event){
|
||||||
|
event = window.event;
|
||||||
|
}try{
|
||||||
|
var the = event.srcElement;
|
||||||
|
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")){
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}catch (e){
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
/**************************************
|
||||||
|
文件名：menu.js
|
||||||
|
功能：该模块用于主菜单相关内容
|
||||||
|
版本：2.0(23.01.08)
|
||||||
|
**************************************/
|
||||||
|
|
||||||
|
new Menu();
|
||||||
|
|
||||||
|
/**************************************
|
||||||
|
对象名：Menu
|
||||||
|
**************************************/
|
||||||
|
function Menu(){
|
||||||
|
//获取URL中“?”及后续部分
|
||||||
|
let url = location.search;
|
||||||
|
if (url.indexOf("?") != -1){
|
||||||
|
//截取1到url.length的部分
|
||||||
|
url = url.substring(1);
|
||||||
|
//若传入了多个参数，以&分隔，此处将参数分解为数组内多个元素
|
||||||
|
url = url.split('&');
|
||||||
|
}
|
||||||
|
|
||||||
|
//url第0项是语言
|
||||||
|
this.lang = url[0].split('=')[1];
|
||||||
|
|
||||||
|
//获取HTML语言列表
|
||||||
|
this.langSlt = document.querySelector("footer .language");
|
||||||
|
this.languages = ["中文", "English", "日本語"];
|
||||||
|
//插入语言功能
|
||||||
|
for (let lang of this.languages){
|
||||||
|
const langLi = document.createElement("li");
|
||||||
|
langLi.setAttribute("class", `lang ${lang}`);
|
||||||
|
langLi.innerHTML = lang;
|
||||||
|
this.langSlt.appendChild(langLi);
|
||||||
|
}
|
||||||
|
this.listener = new Listener(this.lang);
|
||||||
|
this.language = new Language(this.lang);
|
||||||
|
this.language.langRender();
|
||||||
|
this.leaderBoard = new LeaderBoard(this.lang);
|
||||||
|
this.leaderBoard.rankRender("easy");
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,266 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
ul, li{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: "雅黑", "Clear Sans", "Helvetica Neue", Arial, sans-serif;
|
||||||
|
background-color: #eeca98;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
position: fixed;
|
||||||
|
width: 300px;
|
||||||
|
height: 100vh;
|
||||||
|
right: 0;
|
||||||
|
border-left: 2px solid black;
|
||||||
|
background-color: rgb(135, 133, 132, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
height: 100vh;
|
||||||
|
width: calc(100vw - 300px);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
/* 简单9*9模式下方块宽度54px*9+间隔18px*8 = 630px */
|
||||||
|
/* 困难16*16模式下方块宽度30px*16+间隔10px*15 = 630px */
|
||||||
|
/* Extra30*16模式下高度同困难，宽度由js改为单个方块宽度30px*30+间隔10px*15 = 1050px */
|
||||||
|
width: 630px;
|
||||||
|
height: 630px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: calc((100vh - 630px)/2);
|
||||||
|
margin-left: calc((100vw - 930px)/2);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 630px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .tile {
|
||||||
|
display: flex;
|
||||||
|
width: 54px;
|
||||||
|
height: 54px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #8f7a67;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .nonTriggered:active {
|
||||||
|
background: #6f5c4b;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .marked:active {
|
||||||
|
background: #6f5c4b;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .triggered {
|
||||||
|
background-color: #bca794;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .tile p{
|
||||||
|
display: none;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Arial-Black;
|
||||||
|
font-weight: 700;
|
||||||
|
width: 54px;
|
||||||
|
height: 54px;
|
||||||
|
line-height: 54px;
|
||||||
|
font-size: 25px;
|
||||||
|
bottom: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .triggered.value-1 p{
|
||||||
|
display: block;
|
||||||
|
color: aqua;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .triggered.value-2 p{
|
||||||
|
display: block;
|
||||||
|
color: #bee952;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .triggered.value-3 p{
|
||||||
|
display: block;
|
||||||
|
color: chartreuse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .triggered.value-4 p{
|
||||||
|
display: block;
|
||||||
|
color: rgb(233, 24, 233);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .triggered.value-5 p{
|
||||||
|
display: block;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .triggered.value-6 p{
|
||||||
|
display: block;
|
||||||
|
color: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .triggered.value-7 p{
|
||||||
|
display: block;
|
||||||
|
color: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .triggered.value-8 p{
|
||||||
|
display: block;
|
||||||
|
color: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .tile img{
|
||||||
|
display: none;
|
||||||
|
width: 54px;
|
||||||
|
height: 54px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .triggered.mine p{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .triggered.mine img{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid .tileLine .marked img{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
background: #8f7a67;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
font-family: "雅黑", Arial-Black;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 44px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: #6f5c4b;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active {
|
||||||
|
background: #6f5c4b;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right .back {
|
||||||
|
margin-left: 90px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right .new {
|
||||||
|
margin-left: 90px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
margin-top: 60px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
height: 200px;
|
||||||
|
font-family: "雅黑", Arial-Black;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time .timeTitle {
|
||||||
|
font-size: 40px;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time .timeCon {
|
||||||
|
display: block;
|
||||||
|
font-size: 25px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 50px;
|
||||||
|
height: 50px;
|
||||||
|
width: 160px;
|
||||||
|
border: 1px solid black;
|
||||||
|
background-color: #ebe84d;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
background-color: rgb(118, 115, 115, 0.6);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask .content {
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
font-size: 98px;
|
||||||
|
line-height: 98px;
|
||||||
|
height: 98px;
|
||||||
|
top: 300px;
|
||||||
|
font-family: Arial-Black;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask .enterName {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 600px;
|
||||||
|
margin-top: 100px;
|
||||||
|
margin-left: calc((100vw - 600px)/2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask .enterName input {
|
||||||
|
width: 400px;
|
||||||
|
height: 50px;
|
||||||
|
padding-left: 20px;
|
||||||
|
font-size: 18px;
|
||||||
|
border: 2px solid black;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #bca794;
|
||||||
|
color: white;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask .enterName input:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask .maskBtn {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 260px;
|
||||||
|
bottom: 200px;
|
||||||
|
margin-left: calc((100vw - 260px)/2);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
.hello {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 98px;
|
||||||
|
display: block;
|
||||||
|
margin: -59px -300px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 98px;
|
||||||
|
height: 98px;
|
||||||
|
width: 600px;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: "雅黑", "Clear Sans", "Helvetica Neue", Arial, sans-serif;
|
||||||
|
background-color: #eeca98;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,273 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
ul, li{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
position: relative;
|
||||||
|
font-size: 98px;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 98px;
|
||||||
|
height: 98px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: "雅黑", "Clear Sans", "Helvetica Neue", Arial, sans-serif;
|
||||||
|
background-color: #eeca98;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selection {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-top: 20px;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
background: #8f7a67;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
font-family: "雅黑", Arial-Black;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 44px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: #6f5c4b;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active {
|
||||||
|
background: #6f5c4b;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
left: 60px;
|
||||||
|
bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .langSltBtn {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 2px solid black;
|
||||||
|
font-size: 14px;
|
||||||
|
background: #8f7a67;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
font-family: "雅黑", Arial-Black;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .langSltBtn:hover {
|
||||||
|
background: #6f5c4b;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .langSltBtn:active {
|
||||||
|
background: #6f5c4b;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .language {
|
||||||
|
width: 100px;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 2px solid black;
|
||||||
|
font-size: 14px;
|
||||||
|
background: #8f7a67;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
font-family: "雅黑", Arial-Black;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 60px;
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .language .lang {
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
border: 2px solid white;
|
||||||
|
border-top: none;
|
||||||
|
border-left: none;
|
||||||
|
border-right: none;
|
||||||
|
display: block;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .language .lang:hover {
|
||||||
|
background: #6f5c4b;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .language .lang:active {
|
||||||
|
background: #6f5c4b;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .language .lang:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.difficulty {
|
||||||
|
display: none;
|
||||||
|
z-index: 20;
|
||||||
|
position: fixed;
|
||||||
|
width: 320px;
|
||||||
|
height: 380px;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin: -190px -160px;
|
||||||
|
border: 4px solid black;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #ed9e3e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.difficulty .diffCon {
|
||||||
|
font-size: 60px;
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 10%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.difficulty .selection {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tutorialBlk {
|
||||||
|
display: none;
|
||||||
|
z-index: 20;
|
||||||
|
position: fixed;
|
||||||
|
width: 600px;
|
||||||
|
height: 500px;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin: -250px -300px;
|
||||||
|
border: 4px solid black;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #ed9e3e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tutorialBlk .tutoCon {
|
||||||
|
font-size: 60px;
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tutorialBlk .tutor {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: flex-start;
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tutorialBlk .tutor p {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extra {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaderBlk {
|
||||||
|
display: none;
|
||||||
|
z-index: 20;
|
||||||
|
position: fixed;
|
||||||
|
width: 600px;
|
||||||
|
height: 500px;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin: -250px -300px;
|
||||||
|
border: 4px solid black;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #ed9e3e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaderBlk .leaderCon {
|
||||||
|
font-size: 60px;
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaderBlk .leaderDif {
|
||||||
|
font-size: 40px;
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 10px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaderBlk .leadList {
|
||||||
|
display: block;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-right: 30px;
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaderBlk .leadList li {
|
||||||
|
display: flex;
|
||||||
|
font-size: 20px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 20 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaderBlk .next {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue