<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>山羊の前端小窝</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
font-family: "Bungee Inline", cursive;
color: #f5f5f5;
overflow: hidden;
}
video {
position: absolute;
z-index: -999;
}
.wrapper {
background-color: #55acee53;
padding: 50px;
}
.current-status {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 25px;
}
.current-status p {
margin: 0 5px 0 0;
font-size: 24px;
}
.current-status img {
width: auto;
height: 32px;
}
.board {
display: grid;
grid-template-columns: repeat(3, minmax(90px, 1fr));
grid-template-rows: repeat(3, minmax(90px, 1fr));
grid-gap: 12px;
width: 100%;
height: 100%;
max-width: 495px;
margin: 0 auto 15px;
}
/* 鼠标悬浮的时候显示图片 */
.board.unicorn .cell:not(.dragon):not(.unicorn):hover::before,
.board.dragon .cell:not(.dragon):not(.unicorn):hover::before {
content: "";
width: 70%;
height: 70%;
display: block;
position: absolute;
background-repeat: no-repeat;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-size: contain;
opacity: 50%;
}
.board.unicorn .cell:not(.dragon):hover::before {
background-image: url("./3.gif");
}
.board.dragon .cell:not(.unicorn):hover::before {
background-image: url("./4.gif");
}
.cell {
cursor: pointer;
position: relative;
background-color: #f5f5f5;
width: 90px;
height: 90px;
opacity: 0.5;
transition: opacity 0.2s ease-in-out;
}
.cell:hover {
opacity: 1;
}
.cell.dragon,
.cell.unicorn {
opacity: 1;
position: relative;
cursor: not-allowed;
}
.cell.dragon::before,
.cell.unicorn::before {
content: "";
width: 70%;
height: 70%;
display: block;
position: absolute;
background-repeat: no-repeat;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-size: contain;
}
.cell.dragon::before {
background-image: url("./4.gif");
}
.cell.unicorn::before {
background-image: url("./3.gif");
}
.game-end-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #0d1021;
}
.game-end-overlay.show {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.winning-message {
margin: -50px 0 20px;
}
.winning-message img {
width: 100px;
}
.winning-message p {
font-size: 48px;
margin: 0;
}
.btn-container {
position: relative;
}
.reset-button {
color: #f5f5f5;
font-family: "Bungee Inline", cursive;
font-size: 30px;
white-space: nowrap;
border: none;
padding: 10px 20px;
background-color: #a186be;
box-shadow: 5px 5px 0 #55acee;
cursor: pointer;
transition: transform 0.1s ease-in-out;
position: relative;
}
.reset-button:hover {
transform: scale(1.2);
}
.reset-button:active {
top: 6px;
left: 6px;
box-shadow: none;
background-color: #9475b5;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="current-status" id="currentStatus">
<img src="./4.gif" id="currentBeastImg" alt="">
<p> 's turn</p>
</div>
<div class="board" id="board">
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
</div>
<div class="game-end-overlay" id="gameEndOverlay">
<div class="winning-message" data-winning-message>
<p></p>
</div>
<div class="btn-container">
<button class="reset-button" id="resetButton">play again</button>
</div>
</div>
</div>
<video src="./01.mp4" muted loop autoplay></video>
<script>
// 获取页面元素
const board = document.getElementById('board');
const cells = document.querySelectorAll('[data-cell]');
const currentStatus = document.getElementById('currentStatus');
const resetButton = document.getElementById('resetButton');
const gameEndOverlay = document.getElementById('gameEndOverlay');
const currentBeastStatusImg = document.getElementById('currentBeastImg');
const winningMessage = document.querySelector('[data-winning-message]');
const winningMessageText = document.querySelector('[data-winning-message] p');
const winningMessageImg = document.createElement('img');
// 初始化游戏状态
let gameIsLive = true;
let unicornTurn = true;
let winner = null;
// 所有获胜组合
const winningCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
// 设置鼠标悬停时的样式
const setBoardHoverClass = () => {
board.classList.remove('unicorn');
board.classList.remove('dragon');
if (unicornTurn) {
board.classList.add('unicorn');
} else {
board.classList.add('dragon');
}
}
// 在格子上放置图片
const placeBeastImg = (cell, currentBeast) => {
cell.classList.add(currentBeast);
}
// 切换回合
const swapTurns = () => {
unicornTurn = !unicornTurn;
}
// 更新当前状态
const updateCurrentStatus = () => {
if (unicornTurn) {
currentBeastStatusImg.src = './3.gif'