정보실

웹학교

정보실

javascript 지뢰찾기게임 - Minesweeper

본문

자유 시간 있어요? 클래식 Windows 게임 지뢰 찾기에 대한 Creme의 JavaScript 레크리에이션을 확인하십시오.


https://codepen.io/creme/pen/EqeXNJ 


HTML : 


<div class="board"></div>

<a href="#!" class="btn">New Game</a>

<div class="endscreen"></div>

<!-- need to style the settings first -->

<!-- <div class="settings">
	<label for="boardSize">board size</label>
	<input id="boardSize" type="range" min="0" max="20">
	
	<label for="tileSize">tile size</label>
	<input id="tileSize" type="range" min="10" max="100" step="10">
	
	<fieldset>
    <input type="radio" id="easy" name="difficulty" value="0.1" class="difficulty">
    <label for="easy">Easy</label> 
    <input type="radio" id="normal" name="difficulty" value="0.2" class="difficulty" checked>
    <label for="normal">Normal</label>
		<input type="radio" id="hard" name="difficulty" value="0.4" class="difficulty">
    <label for="hard">Hard</label> 
  </fieldset>
</div> -->


CSS : 


:root {
  --tileSize: 60px;
  --boardSize: 0px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'VT323', monospace;
}
*::-moz-selection {
  background: rgba(127, 140, 141, 0.6);
}
*::selection {
  background: rgba(127, 140, 141, 0.6);
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #ffebc5;
}

.btn {
  background: #c9c9c9;
  padding: .5rem 1rem;
  text-decoration: none;
  color: #969696;
  font-size: 1.5rem;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: background .2s ease, -webkit-transform .2s ease;
  transition: background .2s ease, transform .2s ease;
  transition: background .2s ease, transform .2s ease, -webkit-transform .2s ease;
  box-shadow: inset 0 2px 0 #e7e7e7, inset 0 -2px 0 #bcbcbc, inset 2px 0 0 #e7e7e7, inset -2px 0 0 #bcbcbc;
  text-shadow: 0 1px 0 #efefef, 0 -1px 0 #7c7c7c;
}
.btn:hover {
  background: #d5d5d5;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.btn:active {
  background: #bcbcbc;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}

.endscreen {
  position: fixed;
  background: #e2e2e2;
  padding: 1rem 2rem;
  font-size: 40px;
  display: none;
  box-shadow: inset 0 2px 0 #e7e7e7, inset 0 -2px 0 #bcbcbc, inset 2px 0 0 #e7e7e7, inset -2px 0 0 #bcbcbc, 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 16px 32px 0 rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 #efefef, 0 -1px 0 #7c7c7c;
}
.endscreen.show {
  display: block;
}
.endscreen span {
  color: #2ecc71;
}

.board {
  background: #e2e2e2;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  border: 10px solid #d5d5d5;
  box-sizing: content-box;
  box-shadow: 0 6px 0 #bcbcbc, 0 -6px 0 #e7e7e7, 6px 0 0 #bcbcbc, -6px 0 0 #e7e7e7;
}
.board:before {
  content: '';
  position: absolute;
  width: 8px;
  height: 6px;
  background: #e2e2e2;
  top: -14px;
  right: -14px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: -1;
  box-shadow: 1px calc(var(--boardSize) * 1.465) 0 #e2e2e2;
}
.board:after {
  content: '';
  position: absolute;
  width: 8px;
  height: 6px;
  background: white;
  top: -14px;
  left: -14px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  z-index: -1;
  box-shadow: -1px calc(var(--boardSize) * 1.465) 0 #afafaf;
}
.board .tile {
  background: #e2e2e2;
  width: var(--tileSize);
  height: var(--tileSize);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--tileSize) * .8);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: background .2s ease;
  box-shadow: inset 0 2px 0 0 #fcfcfc, inset 2px 0 0 0 #fcfcfc, inset 0 -2px 0 0 #c9c9c9, inset -2px 0 0 0 #c9c9c9;
}
.board .tile:hover:not(.tile--checked) {
  background: #efefef;
}
.board .tile--checked {
  background: #d5d5d5;
  box-shadow: inset 0 1px 0 0 #c9c9c9, inset 1px 0 0 0 #c9c9c9, inset 0 -1px 0 0 #c9c9c9, inset -1px 0 0 0 #c9c9c9;
}
.board .tile--checked.tile--bomb:before, .board .tile--checked.tile--bomb:after {
  opacity: 1;
}
.board .tile--checked:hover {
  cursor: default;
}
.board .tile--bomb {
  font-size: calc(var(--tileSize) * .5);
}
.board .tile--flagged {
  font-size: calc(var(--tileSize) * .5);
}

.settings {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.settings label {
  font-size: 1.2rem;
}


Javascript : 


console.clear();

let size = 10; // size x size tiles
let bombFrequency = 0.2; // percentage of bombs
let tileSize = 60;

const board = document.querySelectorAll('.board')[0];
let tiles;
let boardSize;

const restartBtn = document.querySelectorAll('.btn')[0];
const endscreen = document.querySelectorAll('.endscreen')[0]

// settings
const boardSizeBtn = document.getElementById('boardSize');
const tileSizeBtn = document.getElementById('tileSize');
const difficultyBtns = document.querySelectorAll('.difficulty');

let bombs = [];
let numbers = [];
let numberColors = ['#3498db', '#2ecc71', '#e74c3c', '#9b59b6', '#f1c40f', '#1abc9c', '#34495e', '#7f8c8d',];
let endscreenContent = {win: ' you won!', loose: '

페이지 정보

조회 33회 ]  작성일19-08-14 13:54

웹학교