commit d059bab473d4a2fe1bfbf5af9b2c409294e76840
Author: shipiyouniao <2960474346@qq.com>
Date: Fri Jan 27 19:45:10 2023 +0800
first commit
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..499e7a9
--- /dev/null
+++ b/README.md
@@ -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.
\ No newline at end of file
diff --git a/game.html b/game.html
new file mode 100644
index 0000000..ba4c397
--- /dev/null
+++ b/game.html
@@ -0,0 +1,39 @@
+
+
+
+ game
+
+
+
+
+
+
You win!
+
+ Confirm
+
+
+ New Game
+ Back
+
+
hello
+ 石皮幼鸟制作
+
+
+
\ No newline at end of file
diff --git a/menu.html b/menu.html
new file mode 100644
index 0000000..348d23f
--- /dev/null
+++ b/menu.html
@@ -0,0 +1,54 @@
+
+
+
+ menu
+
+
Difficulty
+
+ Easy
+ Hard
+
+
+
Back
+
+
Tutorial
+
+
Click the left mouse button to crack open the square
+
If a mine is triggered, the game is over
+
If a number appears, it means that the number of mines with the corresponding number is around
+
If blank, there are no mines around
+
Right mouse click on the square that marks what you suspect is a mine
+
Right click again to unmark
+
Knock out all the non-mine squares to win the final victory
+
+
Back
+
+
LeaderBoard
+
Easy
+
+
Hard
+
Back
+
点击鼠标左键敲开方块
+ 如果触发了地雷，游戏结束
+ 如果出现数字，则意味着周围有对应数字的地雷数
+ 如果是空白，则周围无地雷
+ 鼠标右击标记你怀疑是地雷的方块
+ 再右击一次可以取消标记
+ 敲开所有非地雷方块，赢得最终胜利
`;
+ 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 =
+ `Click the left mouse button to crack open the square
+ If a mine is triggered, the game is over
+ If a number appears, it means that the number of mines with the corresponding number is around
+ If blank, there are no mines around
+ Right mouse click on the square that marks what you suspect is a mine
+ Right click again to unmark
+ Knock out all the non-mine squares to win the final victory
`;
+ 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 =
+ `マウスの左ボタンで四角を発動します
+ 地雷が発生したらゲームオーバー
+ 数字が表示された場合、その数字に対応する地雷の数が周辺にあることを意味します
+ 空白の場合、地雷はありません
+ 地雷と思われるマークをマウスの右ボタンでクリックする
+ もう一度右クリックすると、マークが消えます
+ 地雷のないマスをすべてトリガーにして最終的に勝利する
`;
+ document.querySelector(".leaderCon").innerHTML = "リーダーボード";
+}
\ No newline at end of file
diff --git a/scripts/menu/leaderBoard.js b/scripts/menu/leaderBoard.js
new file mode 100644
index 0000000..73a1def
--- /dev/null
+++ b/scripts/menu/leaderBoard.js
@@ -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 =
+ `${i+1}
${rank[i].ID}
${rank[i].time}
`;
+ this.leadList.appendChild(li);
+ }
+ document.querySelector(".leaderDif").innerHTML = diffCon;
+ this.next.innerHTML = nextCon;
+}
\ No newline at end of file
diff --git a/scripts/menu/listener.js b/scripts/menu/listener.js
new file mode 100644
index 0000000..8fede83
--- /dev/null
+++ b/scripts/menu/listener.js
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/scripts/menu/menu.js b/scripts/menu/menu.js
new file mode 100644
index 0000000..e9e2c75
--- /dev/null
+++ b/scripts/menu/menu.js
@@ -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");
+}
\ No newline at end of file
diff --git a/style/game.css b/style/game.css
new file mode 100644
index 0000000..758e6d2
--- /dev/null
+++ b/style/game.css
@@ -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);
+}
\ No newline at end of file
diff --git a/style/index.css b/style/index.css
new file mode 100644
index 0000000..29c7178
--- /dev/null
+++ b/style/index.css
@@ -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;
+}
\ No newline at end of file
diff --git a/style/menu.css b/style/menu.css
new file mode 100644
index 0000000..f39069f
--- /dev/null
+++ b/style/menu.css
@@ -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;
+}
\ No newline at end of file