商务网站建设论文答辩ppt,seo技术博客,网站建设好友,php做网站有哪些好处前言#xff1a;
游戏起源与发展 扫雷游戏的雏形可追溯到 1973 年的 “方块#xff08;cube#xff09;” 游戏#xff0c;后经改编出现了 “rlogic” 游戏#xff0c;玩家需为指挥中心探出安全路线避开地雷。在此基础上#xff0c;开发者汤姆・安德森编写出了扫雷游戏的…前言
游戏起源与发展 扫雷游戏的雏形可追溯到 1973 年的 “方块cube” 游戏后经改编出现了 “rlogic” 游戏玩家需为指挥中心探出安全路线避开地雷。在此基础上开发者汤姆・安德森编写出了扫雷游戏的雏形. 1992 年微软在 windows3.1 系统中首次预装了《扫雷》将其作为训练用户鼠标操作能力的软件. 虽从 windows8 开始系统不再默认安装扫雷游戏但它依旧凭借自身魅力受到众多玩家喜爱甚至有玩家不断刷新时间记录来挑战自我. 游戏规则 胜利条件找出所有地雷且不踩到地雷或者在规定时间内尽可能多地找出地雷. 失败条件翻开了埋有地雷的方块. 基础操作左键点击未打开的格子可将其打开右键点击可标雷 / 取消标雷双击左右键同时点击已打开的数字若该数字周围标的雷数量等于该数字会同时打开该数字周围剩余所有格子.
游戏界面及信息 剩余雷数显示在游戏界面左上角为总雷数减去已标雷数可据此了解雷区剩余雷的大致情况. 计时器位于右上角从本局游戏第一次操作为 0.001 秒开始计时可用于记录游戏所用时间及玩家挑战自我时作为参考 技巧与策略 数字推理数字代表其周围 8 个方格中的雷数若数字为 0游戏会自动打开周围所有格子若一个方格周围已标记的雷数等于该方格上的数字那么其周围未标记的方格都可安全打开. 常见阵型判断如 “111”“22”“112” 等常见数字组合可依据特定规律快速判断雷的位置. 边缘优先可先从雷区边缘开始点击因为边缘方格的周围方格数量相对较少更容易判断雷的位置降低推理难度7. 标记问号当无法确定方格是否有雷时可右键点击两次标记问号后续再根据其他信息进一步判断.
游戏变化与创新 在线多人模式如《一起来扫雷》玩家可与世界各地的玩家合作或竞争共同清除地图上的地雷还能积累积分兑换装饰装扮游戏界面. VR 版扫雷扫雷 VR 将平面的扫雷游戏搬到了 3D 场景中增加了游戏的趣味性和沉浸感. 融合其他元素《扫雷俄罗斯方块》结合了扫雷和俄罗斯方块的元素雷区不断向上生长找到所有地雷时行才会被清除 以上内容由ai生成
正文 1.自己实现一个扫雷游戏 2.使用HTML实现
!DOCTYPE html
html langenheadmeta charsetUTF-8 /title扫雷游戏/titlelinkhrefhttps://fonts.googleapis.com/css?familySpaceMono:400,700relstylesheet/linkrelstylesheethrefhttps://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css/stylecharset UTF-8;*,*:before,*:after {box-sizing: inherit;}html {box-sizing: border-box;}body {text-align: center;color: #333;padding: 20px 20px 100px;background-color: #efefef;font-family: Space Mono, monospace;}h1 {margin: 0 0 32px;}p {font-size: 1em;line-height: 1.25em;}a {color: inherit;}img {height: auto;max-width: 100%;}.wrap {text-align: center;position: relative;display: inline-block;}.legend {font-size: 14px;margin: 0 auto 32px;}.legend h4,.legend p {margin: 0 0 6px;}.legend code {background: #e3e3e3;}.legend code .key {color: #ec433c;}.legend code .click {color: #2a48ec;}.top {border: 6px solid #e3e3e3;background-color: #e3e3e3;}#scoreboard {display: flex;padding-bottom: 12px;justify-content: space-between;}#scoreboard .select-wrap {font-weight: 700;vertical-align: top;display: inline-block;}#scoreboard .select-wrap select {margin: 0;height: 36px;border-radius: 0;border-width: 3px;border-style: solid;background-color: #d1d1d1;border-color: white #9e9e9e #9e9e9e white;}#scoreboard .select-wrap select:hover,#scoreboard .select-wrap select:focus {backgroudn-color: #ebebeb;}#scoreboard .reset {padding: 0 4px;font-size: 24px;cursor: pointer;font-weight: 700;line-height: 30px;border-width: 3px;border-style: solid;background-color: #d1d1d1;border-color: white #9e9e9e #9e9e9e white;}#scoreboard .reset:hover,#scoreboard .reset:focus {outline: none;background-color: #ebebeb;}#scoreboard .counter {padding: 0 4px;color: #ec433c;border: 3px inset;line-height: 30px;letter-spacing: 0.08em;display: inline-block;background: #333;text-shadow: 0 0 2px #ec433c;}#scoreboard .counter:first-of-type {margin-right: 20px;}#scoreboard .counter:last-of-type {margin-left: 20px;}#grid {margin: 0 auto;position: relative;display: inline-block;}#grid ::-moz-selection {background-color: transparent;}#grid ::selection {background-color: transparent;}#grid.disabled .cell {pointer-events: none;}#grid.disabled .status-indicator {top: 50%;left: 50%;z-index: 11;width: 8vw;height: 8vw;font-size: 4vw;cursor: pointer;line-height: 8vw;position: absolute;border-radius: 50%;pointer-events: auto;background-color: #d1d1d1;transform: translate(-50%, -50%);border: 1px solid rgba(51, 51, 51, 0.25);}#grid.disabled .status-indicator::after {content: ;}#grid.disabled.win .status-indicator::after {content: ;}#grid.disabled.lose .status-indicator::after {content: ☹️;}#grid .row {display: flex;}#grid .cell {cursor: pointer;width: 24px;height: 24px;position: relative;background-color: #d1d1d1;border-width: 3px;border-style: solid;border-color: white #9e9e9e #9e9e9e white;}#grid .cell i {left: 0;bottom: 0;margin: 0;width: 100%;font-size: 14px;font-weight: 700;font-style: normal;position: absolute;line-height: 24px;}#grid .cell::before {top: 0;left: 0;right: 0;bottom: 0;z-index: 1;content: ;position: absolute;background-color: #d1d1d1;}#grid .cell::after {top: 50%;left: 50%;content: ;position: absolute;transform: translate(-50%, -50%);}#grid .cell:hover::before {background-color: #ebebeb;}#grid .cell.revealed {border: 1px solid #b8b8b8;}#grid .cell.revealed::before {display: none;}#grid .cell.revealed .flag {display: none;}#grid .cell .flag {top: 50%;left: 50%;z-index: 1;width: 10px;height: 4px;position: absolute;border-style: solid;border-width: 4px 0 4px 10px;transform: translate(-50%, -50%);border-color: transparent transparent transparent #ec433c;}#grid .cell.maybe .flag {border-color: transparent transparent transparent #d7af42;}#grid .cell.mine {background-color: #ec433c;}#grid .cell.mine::after {border-radius: 50%;width: 12px;height: 12px;background-color: #333;}#grid .cell.incorrect .flag::before,#grid .cell.incorrect .flag::after {top: 50%;z-index: 1;left: -13px;height: 2px;width: 16px;content: ;position: absolute;background-color: black;}#grid .cell.incorrect .flag::before {transform: rotate(-45deg);}#grid .cell.incorrect .flag::after {transform: rotate(45deg);}#grid .cell.mousedown {border: none;}#leaderboard {margin-top: 20px;text-align: center;}#leaderboard h4 {margin: 0 0 10px;}#leaderboard ul {margin: 0;padding: 10px;display: inline-block;background-color: rgba(209, 209, 209, 0.5);}#leaderboard ul li {padding: 2px;list-style: none;}#leaderboard ul li span {font-weight: 900;text-transform: capitalize;}#leaderboard ul li.highlight {background-color: #fef178;}#leaderboard button {border: none;outline: none;cursor: pointer;font-size: 12px;font-weight: 700;-webkit-appearance: none;-moz-appearance: none;appearance: none;background: none;text-decoration: underline;}.cell.white {color: #fff;}.cell.gray-light {color: #efefef;}.cell.gray-mid {color: #e3e3e3;}.cell.gray {color: #d1d1d1;}.cell.gray-dark {color: #808080;}.cell.black {color: #333;}.cell.red {color: #ec433c;}.cell.maroon {color: #a6070f;}.cell.purple {color: #a42887;}.cell.yellow {color: #d7af42;}.cell.yellow-light {color: #fef178;}.cell.blue {color: #2a48ec;}.cell.blue-dark {color: #233db7;}.cell.green {color: #2bb13d;}.cell.turquoise {color: #28907d;}#devbox {top: 10px;right: 10px;position: fixed;text-align: left;max-width: 300px;color: #fff;background-color: #333;}#devbox p {margin: 0;font-size: 12px;padding: 10px 20px;}#devbox p p {padding-top: 5px;}/style/headbodyheader classsite-header rolebannerdiv classwraph1扫雷/h1div classlegendpstrong插旗:/strongcodespan classkeyalt/spanspan classclickclick单击/span/code/p/div/div/headermain classsite-main rolemaindiv classwrapdiv idboarddiv classtopdiv idscoreboarddiv idminecounter classcounter/divdivdiv classselect-wrapselect namelevel idleveloption valuebeginner初级/optionoption valueintermediate中级/optionoption valueexpert selected高级/option/select/divbutton classreset/button/divdiv idtimer classcounter/div/divdiv idgrid/div/divdiv classbottom/div/div/div/mainscript srchttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js/scriptscript$(document).ready(function () {var $body, $document, $board, $grid, timer, time, unstarted;function _init() {// Cache some common DOM queries$document $(document);$body $(body);$body.addClass(loaded);// Start Minesweeper$board $(#board);$grid $(#grid);var $timer $(#timer);var $mineCounter $(#minecounter);var $levelSelect $(#level);var levels {beginner: 9x9x10,intermediate: 16x16x44,expert: 16x30x99,};var level $levelSelect.val();var levelParams,rows,$rows,columns,cellCount,mines,freeCells,mineTally,pauseTime,beginnerHighScore 999,intermediateHighScore 999,expertHighScore 999;var countColors {0: ,1: blue,2: green,3: red,4: blue-dark,5: maroon,6: turquoise,7: purple,8: gray-dark,};time 0;timer false;unstarted true;var statusIndicator div classstatus-indicator/div;// Check for existing high score// if (localStorage.getItem(beginner)) {// beginnerHighScore localStorage.getItem(beginner);// populateHighScore(beginner, localStorage.getItem(beginner));// }// if (localStorage.getItem(intermediate)) {// intermediateHighScore localStorage.getItem(intermediate);// populateHighScore(intermediate, localStorage.getItem(intermediate));// }// if (localStorage.getItem(expert)) {// expertHighScore localStorage.getItem(expert);// populateHighScore(expert, localStorage.getItem(expert));// }function setLevel(level) {levelParams levels[level];rows parseInt(levelParams.split(x)[0]);columns parseInt(levelParams.split(x)[1]);cellCount rows * columns;mines levelParams.split(x)[2];freeCells cellCount - mines;}function setBoard(level) {// Clear Grid$grid.html(statusIndicator).removeClass(disabled lose win).addClass(unstarted);// Set Up GridsetLevel(level);// Set unstartedunstarted true;// Build Rowsfor (r 0; r rows; r) {var newCells ;// Build Cellsfor (c 0; c columns; c) {newCells div classcell/div;}$grid.append(div classrow newCells /div);}// Set MinecountermineTally mines;$mineCounter.html(mineTally);// Set TimerresetTimer();}// Set initiallysetBoard(level);// Set on reset$(html).on(mousedown, .reset, function () {$(this).text();}).on(mouseup, .reset, function () {$(this).text();stopTimer();level $levelSelect.val();setBoard(level);});// Set when clicking status indicator$(html).on(click, .status-indicator, function () {level $levelSelect.val();setBoard(level);});// Set on level change$levelSelect.on(change, function () {stopTimer();resetTimer();level $levelSelect.val();setBoard(level);});// Lay Minesfunction layMines(level, clickedCellIndex) {$rows $(.row);var freeCells $(.cell);var takenCells [clickedCellIndex];// Lay Minesfor (m 0; m mines; m) {var mineCell Math.floor(Math.random() * Math.floor(freeCells.length));// If it happens to be the clicked cell, skip itif ($.inArray(mineCell, takenCells) -1) {m--;continue;}takenCells.push(mineCell);$(freeCells[mineCell]).addClass(mine);}// Identify Cell Numbersvar $cells $(.cell);for (c 0; c $cells.length; c) {var $cell $($cells[c]);$cell.attr(data-cell, c);// Skip if its a mineif ($cell.is(.mine)) {continue;}var mineCount 0;var rowPos Math.floor(c / columns);var $currentRow $cell.closest(.row);$currentRow.attr(data-row, rowPos);var rowCells $currentRow.find(.cell);var cellPos c % columns;if ($(rowCells[cellPos - 1]).is(.mine)) {mineCount;}if ($(rowCells[cellPos 1]).is(.mine)) {mineCount;}if (rowPos 0) {var prevRowCells $($rows[rowPos - 1]).find(.cell);if ($(prevRowCells[cellPos - 1]).is(.mine)) {mineCount;}if ($(prevRowCells[cellPos]).is(.mine)) {mineCount;}if ($(prevRowCells[cellPos 1]).is(.mine)) {mineCount;}}if (rowPos rows - 1) {var nextRowCells $($rows[rowPos 1]).find(.cell);if ($(nextRowCells[cellPos - 1]).is(.mine)) {mineCount;}if ($(nextRowCells[cellPos]).is(.mine)) {mineCount;}if ($(nextRowCells[cellPos 1]).is(.mine)) {mineCount;}}if (mineCount 0) {$cell.html(i mineCount /i);// Styling classesvar colorClass countColors[mineCount];$cell.addClass(colorClass);} else {$cell.addClass(zero);}}}// Click cell to start game$(html).off(click, #grid.unstarted .cell).on(click, #grid.unstarted .cell, function (e) {$grid.removeClass(unstarted);if (unstarted !$(e.target).is(.mine)) {layMines(level, $(.cell).index(this));timer window.setInterval(startTimer, 1000);unstarted false;}});// Timer Functionsfunction resetTimer() {$timer.html(000);time 0;}function startTimer() {time;if (time 10) {$timer.html(00 time);} else if (time 9 time 100) {$timer.html(0 time);} else {$timer.html(time);}}function stopTimer() {window.clearInterval(timer);}function pauseTimer() {stopTimer();pauseTime parseInt($(#timer).html());}function unpauseTimer() {time pauseTime;timer window.setInterval(startTimer, 1000);pauseTime false;}// Pause when window loses focus$(window).on(blur, function () {pauseTimer();}).on(focus, function () {if (pauseTime) {unpauseTimer();}});// Check Cellfunction checkCell($cell) {if (!$cell.is(.mine) !$cell.is(.revealed)) {cellClick($cell, reveal);if ($cell.is(.zero)) {$cell.trigger(click);}}}// Clicking on a cellfunction cellClick($cell, action) {// If Flaggingif (action flag !$cell.is(.revealed)) {if ($cell.is(.flagged)) {$cell.removeClass(flagged);$cell.addClass(maybe);mineTally;updateMinecounter(mineTally);} else if ($cell.is(.maybe)) {$cell.removeClass(maybe);var flag $cell.find(.flag);flag.remove();} else {$cell.addClass(flagged);$cell.append(span classflag/span);mineTally--;updateMinecounter(mineTally);}// If Revealing} else if (action reveal) {$cell.addClass(revealed);// If its a mine you lose!if ($cell.is(.mine)) {lose();}statusCheck();} else if (action clear) {if (!$cell.is(.revealed) || $cell.is(.zero)) {return;}clearClick($cell);}}// Update Minecounterfunction updateMinecounter(mineTally) {if (mineTally 10) {$mineCounter.html(0 mineTally);} else {$mineCounter.html(mineTally);}}// Clicking on a Zero cellfunction zeroClick($cell) {var cellPos $cell.prevAll().length;var $currentRow $cell.closest(.row);var rowPos parseInt($currentRow.attr(data-row));var rowCells $currentRow.find(.cell);checkCell($(rowCells[cellPos - 1]));checkCell($(rowCells[cellPos 1]));if (rowPos 0) {var prevRowCells $($rows[rowPos - 1]).find(.cell);checkCell($(prevRowCells[cellPos - 1]));checkCell($(prevRowCells[cellPos]));checkCell($(prevRowCells[cellPos 1]));}if (rowPos rows) {var nextRowCells $($rows[rowPos 1]).find(.cell);checkCell($(nextRowCells[cellPos - 1]));checkCell($(nextRowCells[cellPos]));checkCell($(nextRowCells[cellPos 1]));}}// Clicking on a number to clear free cellsfunction clearClick($cell) {var cellPos $cell.prevAll().length;var $currentRow $cell.closest(.row);var rowPos parseInt($currentRow.attr(data-row));var rowCells $currentRow.find(.cell);var adjacentCells [];var correctClear true;var adjacentMines 0;var adjacentFlags 0;var i;adjacentCells.push($(rowCells[cellPos - 1]));adjacentCells.push($(rowCells[cellPos 1]));if (rowPos 0) {var prevRowCells $($rows[rowPos - 1]).find(.cell);adjacentCells.push($(prevRowCells[cellPos - 1]));adjacentCells.push($(prevRowCells[cellPos]));adjacentCells.push($(prevRowCells[cellPos 1]));}if (rowPos rows) {var nextRowCells $($rows[rowPos 1]).find(.cell);adjacentCells.push($(nextRowCells[cellPos - 1]));adjacentCells.push($(nextRowCells[cellPos]));adjacentCells.push($(nextRowCells[cellPos 1]));}for (i 0; i adjacentCells.length; i) {// add to mine countif ($(adjacentCells[i]).is(.mine)) {adjacentMines;}// add to flag coutif ($(adjacentCells[i]).is(.flagged)) {adjacentFlags;}}if (adjacentFlags adjacentMines) {for (i 0; i adjacentCells.length; i) {if ($(adjacentCells[i]).is(.mine)) {if ($(adjacentCells[i]).is(.flagged)) {continue;} else {$(adjacentCells[i]).addClass(revealed);correctClear false;}} else if ($(adjacentCells[i]).is(.flagged)) {correctClear false;$(adjacentCells[i]).addClass(incorrect);lose();}}if (correctClear) {for (i 0; i adjacentCells.length; i) {if (!$(adjacentCells[i]).is(.mine)) {if ($(adjacentCells[i]).is(.zero)) {zeroClick($(adjacentCells[i]));}cellClick($(adjacentCells[i]), reveal);}}}} else {return;}}// Check statusfunction statusCheck() {if ($(.cell.revealed).length freeCells) {stopTimer();var winTime $(#timer).html();$grid.addClass(disabled win);resetHighScore(level, winTime);}}function lose() {$grid.addClass(disabled lose);stopTimer();}// Clicking on a cell$(html).on(click, .cell, function (e) {e.preventDefault();var action reveal;var $cell $(this);if (e.altKey || e.which 3) {action flag;} else if ($cell.is(.revealed) ||(e.which 1) (e.which 3)) {action clear;}if ($cell.is(.flagged) !e.altKey) {return;}if ($cell.is(.zero)) {zeroClick($cell);}cellClick($cell, action);});// Mouse down on a cell$(html).on(mousedown, .cell:not(.revealed,.flagged), function (e) {if (!e.altKey e.which ! 3) {$(this).addClass(mousedown);}}).on(mouseup mouseleave, .cell.mousedown, function () {$(this).removeClass(mousedown);});// Scoreboard functionalityfunction resetHighScore(level, winTime) {if (localStorage.getItem(level)) {if (winTime localStorage.getItem(level)) {localStorage.setItem(level, winTime);populateHighScore(level, winTime, true);}} else {localStorage.setItem(level, winTime);populateHighScore(level, winTime, true);}}function populateHighScore(level, highScore, highlight) {if (!$(#leaderboard).length) {$board.find(.bottom).append(div idleaderboardh4High Scores/h4ulli classbeginner/lili classintermediate/lili classexpert/li/uldivbutton idscore-reset classscore-resetClear Scores/button/div/div);}if (highlight true) {$(#leaderboard .highlight:not(. level )).removeClass(highlight);$(#leaderboard . level).addClass(highlight);}var highScoreDisplay parseInt(highScore, 10);$(#leaderboard . level).html(span level /span: highScoreDisplay seconds);}function clearScores() {localStorage.clear();$(#leaderboard).remove();}// Clicking on score reset to clear scores$(html).on(click, #score-reset, clearScores);}_init();});/script/body
/html3.电脑单机就可玩耍 最后
你今天扫雷了吗后台回复“扫雷”获取在线连接。扫雷游戏
