Skip to content

Q
qiuxu_code
Commit 25d25fb3 authored by 邱旭's avatar 邱旭
Browse files
Options

init

parent 873177de
Hide whitespace changes
Inline Side-by-side
Showing with 184 additions and 0 deletions
.idea/.gitignore 0 → 100644
View file @ 25d25fb3
# 默认忽略的文件
/shelf/
/workspace.xml
# 基于编辑器的 HTTP 客户端请求
/httpRequests/
.idea/inspectionProfiles/Project_Default.xml 0 → 100644
View file @ 25d25fb3
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="HtmlRequiredAltAttribute" enabled="false" level="WARNING" enabled_by_default="false" />
</profile>
</component>
\ No newline at end of file
.idea/modules.xml 0 → 100644
View file @ 25d25fb3
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/qiuxu_code.iml" filepath="$PROJECT_DIR$/.idea/qiuxu_code.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/qiuxu_code.iml 0 → 100644
View file @ 25d25fb3
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
.idea/vcs.xml 0 → 100644
View file @ 25d25fb3
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>
\ No newline at end of file
TicTacToe.html 0 → 100644
View file @ 25d25fb3
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="author" content="hycv">
<meta name="viewport"
content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="true"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<title>TicTacToe</title>
<style>
html, body {
padding: 0;
margin: 0;
background-color: black;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.grid {
width: 100px;
height: 100px;
display: inline-block;
background-color: darkgreen;
border: 2px solid whitesmoke;
vertical-align: bottom;
}
.grid::before {
content: "";
display: block;
width: 80px;
height: 80px;
margin-top: 10px;
margin-left: 10px;
border-radius: 50%;
box-sizing: border-box;
}
.grid.white::before {
background-color: whitesmoke;
border: 3px solid black;
}
.grid.black::before {
background-color: black;
border: 3px solid whitesmoke;
}
#winPanel {
width: 310px;
height: 310px;
background-color: #888888;
border: 3px solid whitesmoke;
position: fixed;
display: none;
align-items: center;
justify-content: center;
font-size: 50px;
color: black;
}
</style>
</head>
<body>
<div id="winPanel">黑棋赢</div>
</body>
<script>
const mapDiv = document.createElement("div");
const map = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
];
let color = 1;
function showWinPanel(color) {
const winPanel = document.getElementById("winPanel");
winPanel.innerText = `${color === 2 ? "黑" : "白"}棋赢`;
winPanel.style.display = "flex";
winPanel.style.color = color === 2 ? "black" : "white";
}
// 检查输赢
function judge() {
// 检查三横三竖
for (let i = 0; i < 3; i++) {
let row = map[i][0].color;
let col = map[0][i].color;
for (let j = 1; j < 3; j++) {
row &= map[i][j].color;
col &= map[j][i].color;
}
if (row || col) {
return showWinPanel(row || col);
}
}
// 检查两个斜线
const x1 = map[0][0].color & map[1][1].color & map[2][2].color;
const x2 = map[0][2].color & map[1][1].color & map[2][0].color;
(x1 || x2) && showWinPanel(x1 || x2);
}
function clickGrid(e) {
const grid = e.target;
const { row, col, color: gridColor } = grid;
if (gridColor === 0) { // 是空的才可以点
grid.color = color;
grid.classList.add(color === 1 ? "white" : "black");
color = 3 - color;
judge();
}
}
function initMap() {
map.forEach((rowList, row) => {
rowList.forEach((color, col) => {
const grid = document.createElement("div");
grid.classList.add("grid");
mapDiv.appendChild(grid);
grid.row = row;
grid.col = col;
grid.color = color;
grid.addEventListener("click", clickGrid);
map[row][col] = grid;
});
mapDiv.appendChild(document.createElement("br"));
});
document.body.appendChild(mapDiv);
}
initMap();
</script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment