Skip to content

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

init

parent 25d25fb3
Hide whitespace changes
Inline Side-by-side
Showing with 367 additions and 7 deletions
.idea/jsLibraryMappings.xml 0 → 100644
View file @ b4c21f00
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<includedPredefinedLibrary name="Node.js Core" />
</component>
</project>
\ No newline at end of file
package.json 0 → 100644
View file @ b4c21f00
{
"name": "TicTacToe",
"version": "1.0.0",
"main": "index.js",
"repository": "git@gitlab2.dui88.com:haiyoucuv/qiuxu_code.git",
"author": "qiuxu <qiuxu@duiba.com.cn>",
"license": "MIT",
"dependencies": {
"nodejs-websocket": "^1.7.2"
}
}
src/client/井字棋.html 0 → 100644
View file @ b4c21f00
<!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>井字棋</title>
<style>
html, body {
margin: 0;
padding: 0;
background-color: #222222;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.grid {
width: 100px;
height: 100px;
display: inline-block;
background-color: darkgreen;
vertical-align: bottom;
border: 2px solid whitesmoke;
}
.grid::before {
content: "";
width: 80px;
height: 80px;
display: block;
border-radius: 50%;
margin: 10px auto 0;
box-sizing: border-box;
}
.grid.white::before {
background-color: whitesmoke;
border: 2px solid black;
}
.grid.black::before {
background-color: black;
border: 2px solid whitesmoke;
}
#overPanel {
position: fixed;
width: 330px;
height: 330px;
background-color: #aaaaaa;
color: black;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}
#overTip {
flex: 0.6;
font-size: 40px;
display: flex;
align-items: center;
align-content: center;
}
#resetBtn {
width: 100px;
height: 45px;
background-color: #4d4d4d;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div id="overPanel">
<div id="overTip">黑棋赢</div>
<div id="resetBtn" onclick="reset()">重新开始</div>
</div>
</body>
<script>
const mapDiv = document.createElement("div");
const overPanel = document.getElementById("overPanel");
const overTip = document.getElementById("overTip");
const resetBtn = document.getElementById("resetBtn");
/**
* 棋盘
* @type {HTMLDivElement}
*/
const map = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
];
/**
* 当前颜色，0 啥也没有， 1 白棋， 2 黑棋
*/
let color = 1;
/**
* 游戏结束
* @param {number} flag 结束标志 0 和棋， 1 白棋赢， 2 黑棋赢
*/
function gameOver(flag) {
overPanel.style.display = "flex";
switch (flag) {
case 0:
overTip.innerText = "和棋";
overTip.style.color = "#00ff00";
resetBtn.style.color = "#00ff00";
break;
case 1:
overTip.innerText = "白棋胜";
overTip.style.color = "white";
resetBtn.style.color = "white";
break;
case 2:
overTip.innerText = "黑棋胜";
overTip.style.color = "black";
resetBtn.style.color = "black";
break
}
}
/**
* 判断输赢和
*/
function judge() {
let draw = map[0][0].color;
for (let i = 0; i < 3; i++) {
let rowColor = map[i][0].color; // 计算横竖输赢
let colColor = map[0][i].color;
draw *= map[i][0].color * map[0][i].color; // 计算和棋
for (let j = 1; j < 3; j++) {
rowColor &= map[i][j].color; // 计算横竖输赢
colColor &= map[j][i].color;
draw *= map[i][j].color * map[j][i].color; // 计算和棋
}
if (rowColor || colColor) {
return gameOver(rowColor || colColor);
}
}
// 计算斜线输赢
const x1 = map[0][0].color & map[1][1].color & map[2][2].color;
const x2 = map[2][0].color & map[1][1].color & map[0][2].color;
if (x1 || x2) {
return gameOver(x1 || x2);
}
// 判断是否和棋
draw && gameOver(0);
}
/**
* 点击格子
* @param {MouseEvent} e
*/
function clickGrid(e) {
const grid = e.target;
if (grid.color === 0) { // 如果是空白的
grid.className = `grid ${color === 1 ? "white" : "black"}`;
grid.color = color;
color = 3 - color;
judge();
}
}
/**
* 重设棋盘
*/
function reset() {
for (let row = 0; row < 3; row++) {
for (let col = 0; col < 3; col++) {
map[row][col].className = "grid";
map[row][col].color = 0;
}
}
overPanel.style.display = "none";
}
/**
* 初始化棋盘
*/
function initMap() {
for (let row = 0; row < 3; row++) {
for (let col = 0; col < 3; col++) {
const grid = document.createElement("div");
map[row][col] = grid;
grid.className = "grid";
grid.row = row;
grid.col = col;
grid.color = 0;
grid.addEventListener("click", clickGrid);
mapDiv.appendChild(grid);
}
mapDiv.appendChild(document.createElement("br"));
}
document.body.appendChild(mapDiv);
}
initMap();
</script>
</html>
TicTacToe.html → src/client/井字棋对战版.html
View file @ b4c21f00
...@@ -10,19 +10,20 @@ ...@@ -10,19 +10,20 @@
<meta name="screen-orientation" content="portrait"/> <meta name="screen-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/> <meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/> <meta name="360-fullscreen" content="true"/>
<title>TicTacToe</title> <title>井字棋对战版</title>
<style> <style>
html, body { html, body {
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: black; background-color: #222222;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column;
} }
.grid { .grid {
...@@ -67,22 +68,71 @@ ...@@ -67,22 +68,71 @@
font-size: 50px; font-size: 50px;
color: black; color: black;
} }
.info-div {
width: 100%;
height: 55px;
background-color: white;
position: fixed;
top: 0;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
box-shadow: 0 0 15px 10px #777777;
}
#infoStatus {
font-size: 20px;
}
#infoCount {
font-size: 10px;
}
</style> </style>
</head> </head>
<body> <body>
<div class="info-div">
<div id="infoStatus">观战中</div>
<div id="infoCount">0人</div>
</div>
<div id="mapDiv"></div>
<div id="winPanel">黑棋赢</div> <div id="winPanel">黑棋赢</div>
</body> </body>
<script> <script>
const mapDiv = document.createElement("div"); const ws = new WebSocket("ws://172.16.226.38:3001");
ws.onopen = (event) => {
console.log("建立连接", event);
ws.send("111");
}
ws.onmessage = (event) => {
console.log(event.data);
}
ws.onclose = (event) => {
console.log(event);
}
ws.onerror = (event) => {
console.log(event);
}
</script>
<script>
const mapDiv = document.getElementById("mapDiv");
const map = [ const map = [
[0, 0, 0], [0, 0, 0],
[0, 0, 0], [0, 0, 0],
[0, 0, 0], [0, 0, 0],
]; ];
let color = 1; /**
* 0 观战
* 1 白棋
* 2 黑棋
* @type {number}
*/
let color = 0;
function showWinPanel(color) { function showWinPanel(color) {
const winPanel = document.getElementById("winPanel"); const winPanel = document.getElementById("winPanel");
...@@ -101,7 +151,7 @@ ...@@ -101,7 +151,7 @@
row &= map[i][j].color; row &= map[i][j].color;
col &= map[j][i].color; col &= map[j][i].color;
} }
if (row || col) { if (row || col) {
return showWinPanel(row || col); return showWinPanel(row || col);
} }
} }
...@@ -113,6 +163,7 @@ ...@@ -113,6 +163,7 @@
} }
function clickGrid(e) { function clickGrid(e) {
if (color === 0) return;
const grid = e.target; const grid = e.target;
const { row, col, color: gridColor } = grid; const { row, col, color: gridColor } = grid;
if (gridColor === 0) { // 是空的才可以点 if (gridColor === 0) { // 是空的才可以点
...@@ -123,6 +174,7 @@ ...@@ -123,6 +174,7 @@
} }
} }
// 初始化地图
function initMap() { function initMap() {
map.forEach((rowList, row) => { map.forEach((rowList, row) => {
rowList.forEach((color, col) => { rowList.forEach((color, col) => {
...@@ -142,6 +194,6 @@ ...@@ -142,6 +194,6 @@
initMap(); initMap();
</script> </script>
</html> </html>
src/server/server.js 0 → 100644
View file @ b4c21f00
/*
* server.js
* Created by 还有醋v on 2021/6/10.
* Copyright © 2021 haiyoucuv. All rights reserved.
*/
const ws = require("nodejs-websocket");
console.log("开始建立连接...");
const server = ws.createServer((conn) => {
console.log(conn.key + "建立连接");
conn.on("text", (str) => {
console.log("收到的信息为:" + str);
conn.sendText("收到消息：" + str);
});
// 关闭连接
conn.on("close", (code, reason) => {
console.log(conn.key + "关闭连接");
const msg = JSON.stringify({
connectedCount: server.connections.length
});
broadcast(msg);
});
// 异常关闭
conn.on("error", (code, reason) => {
console.log(conn.key + "异常关闭");
const msg = JSON.stringify({
connectedCount: server.connections.length
});
broadcast(msg);
});
});
/**
* 广播
* @param {string} msg
*/
function broadcast(msg) {
server.connections.forEach(function (conn) {
conn.sendText(msg);
});
}
server.listen(3001, "0.0.0.0", () => {
console.log("WebSocket建立完毕");
});
yarn.lock 0 → 100644
View file @ b4c21f00
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
nodejs-websocket@^1.7.2:
version "1.7.2"
resolved "http://npm.dui88.com:80/nodejs-websocket/-/nodejs-websocket-1.7.2.tgz#94abd1e248f57d4d1c663dec3831015c6dad98a6"
integrity sha1-lKvR4kj1fU0cZj3sODEBXG2tmKY=
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