tt
This commit is contained in:
175
Client/a.html
Normal file
175
Client/a.html
Normal file
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>游戏方块容器</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body, html {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #f0f0f0; /* 页面背景色 */
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
gap: 15px;
|
||||
width: min(100vw, 100vh); /* 取视口宽高的较小值 */
|
||||
height: min(100vw, 100vh); /* 确保容器是正方形 */
|
||||
padding: 20px;
|
||||
background-color: white; /* 容器背景为白色 */
|
||||
margin: 0 auto; /* 水平居中 */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%); /* 完全居中 */
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: white; /* 大方块背景为白色 */
|
||||
border: 2px solid #e0e0e0; /* 柔和的边框 */
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 允许内部小方块换行 */
|
||||
position: relative; /* 为内部元素定位做准备 */
|
||||
overflow: hidden; /* 隐藏超出部分 */
|
||||
/* 不再需要aspect-ratio，因为grid布局会自动保持正方形 */
|
||||
}
|
||||
|
||||
/* 内部小方块样式 */
|
||||
.inner-square {
|
||||
width: 25%; /* 4x4网格，每个占25%宽度 */
|
||||
height: 25%; /* 4x4网格，每个占25%高度 */
|
||||
border: 1px solid #f5f5f5; /* 浅色边框分隔 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 状态指示器 */
|
||||
.status-indicator {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: #ccc; /* 默认灰色（未连接） */
|
||||
}
|
||||
|
||||
.status-connected {
|
||||
background-color: #2ecc71; /* 连接成功时绿色 */
|
||||
}
|
||||
|
||||
.status-error {
|
||||
background-color: #e74c3c; /* 错误时红色 */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid-container">
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const container = document.querySelector('.grid-container');
|
||||
|
||||
// 创建16个大方块（容器）
|
||||
for (let i = 1; i <= 16; i++) {
|
||||
const gridItem = document.createElement('div');
|
||||
gridItem.className = 'grid-item';
|
||||
gridItem.id = `grid-${i}`; // 为每个方块设置唯一ID
|
||||
|
||||
// 添加状态指示器
|
||||
const statusIndicator = document.createElement('div');
|
||||
statusIndicator.className = 'status-indicator';
|
||||
gridItem.appendChild(statusIndicator);
|
||||
|
||||
// 在方块内部创建4x4小方块
|
||||
for (let j = 0; j < 16; j++) {
|
||||
const innerSquare = document.createElement('div');
|
||||
innerSquare.className = 'inner-square';
|
||||
gridItem.appendChild(innerSquare);
|
||||
}
|
||||
|
||||
container.appendChild(gridItem);
|
||||
|
||||
// 为每个大方块创建独立的WebSocket连接
|
||||
connectWebSocket(gridItem, i);
|
||||
}
|
||||
|
||||
// WebSocket连接函数
|
||||
function connectWebSocket(gridItem, index) {
|
||||
// 替换为实际的WebSocket服务器地址
|
||||
const wsUrl = `ws://localhost:8080/game/${index}`;
|
||||
const ws = new WebSocket(wsUrl);
|
||||
|
||||
// 获取状态指示器
|
||||
const statusIndicator = gridItem.querySelector('.status-indicator');
|
||||
|
||||
ws.onopen = () => {
|
||||
console.log(`方块 ${index} 已连接到服务器`);
|
||||
statusIndicator.classList.add('status-connected');
|
||||
statusIndicator.classList.remove('status-error');
|
||||
|
||||
// 发送初始化消息（示例）
|
||||
ws.send(JSON.stringify({
|
||||
type: 'init',
|
||||
gridId: index
|
||||
}));
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
console.log(`方块 ${index} 收到消息:`, event.data);
|
||||
// 在此处理服务器消息，更新小方块状态
|
||||
// 示例：根据消息改变小方块颜色
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.type === 'update') {
|
||||
updateInnerSquares(gridItem, data);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onerror = (error) => {
|
||||
console.error(`方块 ${index} 连接错误:`, error);
|
||||
statusIndicator.classList.remove('status-connected');
|
||||
statusIndicator.classList.add('status-error');
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
console.log(`方块 ${index} 连接关闭`);
|
||||
statusIndicator.classList.remove('status-connected');
|
||||
};
|
||||
|
||||
// 将WebSocket实例附加到DOM元素上
|
||||
gridItem.ws = ws;
|
||||
}
|
||||
|
||||
// 更新小方块状态的函数（示例）
|
||||
function updateInnerSquares(gridItem, data) {
|
||||
const innerSquares = gridItem.querySelectorAll('.inner-square');
|
||||
innerSquares.forEach((square, idx) => {
|
||||
// 根据服务器数据更新小方块样式
|
||||
// 示例：随机改变背景色
|
||||
if (data.squares && data.squares[idx]) {
|
||||
square.style.backgroundColor = data.squares[idx].color;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 窗口关闭时关闭所有WebSocket连接
|
||||
window.addEventListener('beforeunload', () => {
|
||||
document.querySelectorAll('.grid-item').forEach(item => {
|
||||
if (item.ws && item.ws.readyState === WebSocket.OPEN) {
|
||||
item.ws.close();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user