<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>颜色匹配游戏-破碎</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Bubblegum+Sans");
/* colors */
.a, .a-x {
background: #573659;
}
.b, .b-x {
background: #ad4375;
}
.c, .c-x {
background: #fa7370;
}
.d, .d-x {
background: #f59231;
}
.e, .e-x {
background: #fecd5f;
}
.f, .f-x {
background: #9ccf5e;
}
.g, .g-x {
background: #3cad5b;
}
.h, .h-x {
background: #36cbbf;
}
.i, .i-x {
background: #1d839c;
}
.j, .j-x {
background: #2f506c;
}
body {
margin: 0;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: calc(1em + 1vmin);
font-family: 'Bubblegum Sans', Helvetica, FontAwesome, sans-serif;
background: #212429;
color: #fffced;
}
.controls {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 1em 0;
}
#board {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
height: 70vmin;
width: 70vmin;
border: 1ch solid;
border-radius: .3em;
}
#board > * {
-webkit-box-flex: 0;
-ms-flex: 0 1 7vmin;
flex: 0 1 7vmin;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 7vmin;
-webkit-transition: background 300ms linear;
transition: background 300ms linear;
}
#board:not(.started) > *:first-of-type::after {
content: '\f006';
}
#colors {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 1ch;
}
#colors > * {
-webkit-box-flex: 0;
-ms-flex: 0 1 7vmin;
flex: 0 1 7vmin;
height: 7vmin;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
border-radius: .3em;
}
.new-game {
pointer-events: auto;
cursor: pointer;
text-decoration: underline;
color: #00bcd4;
}
#game-over {
pointer-events: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 3em;
}
</style>
</head>
<body>
<main>
<div class="controls">
<div class="new-game">New Game</div>
<div>Moves <span class="moves">0</span> / <span>35</span></div>
</div>
<div id="board"></div>
<div id="colors"></div>
<div id="game-over"></div>
</main>
<script>
((document) => {
// parts of the game board
let moves = document.querySelector('.moves')
// ?
let board = document.querySelector('#board')
let colors = document.querySelector('#colors')
let gameover = document.querySelector('#game-over')
// control variables
let colorArray = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
let running = false
let cell = '-x'
let skill = 5
let tally = 0
let cap = 35
let color
// game play methods
// ----------------------------
let shuffle = (collection) => {
for (let i = collection.length; i; i--) {
let j = Math.floor(Math.random() * i);
[collection[i - 1], collection[j]] = [collection[j], collection[i - 1]]
}
return collection
}
let setColors = (collection, n) => {
return n < 10 ? shuffle(collection).slice(0, n) : collection
}
let checkWin = (moves) => {
let n = 0
let msg = ''
if (moves <= cap) {
if (board.childNodes[99].className.indexOf(cell) > -1) {
for (var i = 0; i < 100; i++) {
if (board.childNodes[i].className.indexOf(cell) > -1) {
n++
}
}
}
if (n === 100) {
msg = '<span class="new-game">You Win!</span>'
running = false
} else if (n < 100 && moves >= cap) {
msg = '<span class="new-game">Oops! Try Again...</span>'
running = false
}
}
if(!running) {
gameover.innerHTML = msg
}
}
let checkColor = (color) => {
let tiles = board.childNodes
for(var x = 0; x < 100; x++) {
if(tiles[x].className.indexOf(cell) > -1) {
tiles[x].className = color + cell
if (x + 1 < 100 && tiles[x + 1].className === color) {
tiles[x + 1].className += cell
}
if (x + 10 < 100 && tiles[x + 10].className === color) {
tiles[x + 10].className += cell
}
if (x - 1 >= 0 && x % 10 > 0 && tiles[x - 1].className === color) {
tiles[x - 1].className += cell
}
if (x - 10 >= 0 && x % 10 > 0 && tiles[x - 10].className === color) {
tiles[x - 10].className += cell
}
}
}
}
let builder = (container, element, collection, count, randomize) => {
container.innerHTML = ''
count = count || collection.length
randomize = randomize || false
for (let i = 0; i < count; i++) {
let child = document.createElement(element)
child.className = randomize ? collection[Math.floor((Math.random() * collection.length))] : collection[i]
container.appendChild(child)
}
}
let newGame = () => {
let options = setColors(colorArray.slice(), skill)
tally = 0
moves.innerText = tally
//?
gameover.innerHTML = ''
running = true
builder(colors, 'chip', options)
builder(board, 'tile', options, 100, true)
color = board.childNodes[0].className
board.className = ''
board.childNodes[0].className = color + cell
checkColor(color)
}
let play = (chip) => {
if (running && color !== chip){
color = chip
if(board.className !== 'started') {
board.className = 'started'
}
tally++
//?
checkColor(chip)
checkWin(tally)
}
}
document.addEventListener("DOMContentLoaded", () => {
newGame()
}, false)
document.addEventListener('click', (event) => {
let css = Array.from(event.target.classList)
if(event.target.tagName === 'CHIP') {
play(event.target.className)
}
else if(css.includes('new-game')) {
newGame()
}
})
})(document)</script>
</body>
</html>
