Update index.html
Browse files- index.html +186 -19
index.html
CHANGED
@@ -1,19 +1,186 @@
|
|
1 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="en">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
+
<title>3D Drawing Game (Multiplayer)</title>
|
7 |
+
<style>
|
8 |
+
body {
|
9 |
+
margin: 0;
|
10 |
+
padding: 0;
|
11 |
+
display: flex;
|
12 |
+
flex-direction: column;
|
13 |
+
justify-content: center;
|
14 |
+
align-items: center;
|
15 |
+
height: 100vh;
|
16 |
+
background-color: #f0f0f0;
|
17 |
+
font-family: Arial, sans-serif;
|
18 |
+
}
|
19 |
+
#gameContainer {
|
20 |
+
width: 800px;
|
21 |
+
height: 600px;
|
22 |
+
border: 2px solid #333;
|
23 |
+
background-color: #fff;
|
24 |
+
}
|
25 |
+
#controls {
|
26 |
+
margin-top: 10px;
|
27 |
+
}
|
28 |
+
button {
|
29 |
+
margin: 0 5px;
|
30 |
+
padding: 5px 10px;
|
31 |
+
}
|
32 |
+
</style>
|
33 |
+
</head>
|
34 |
+
<body>
|
35 |
+
<div id="gameContainer">
|
36 |
+
<svg id="gameSvg" width="800" height="600"></svg>
|
37 |
+
</div>
|
38 |
+
<div id="controls">
|
39 |
+
<button id="clearBtn">Clear Canvas</button>
|
40 |
+
<input type="color" id="colorPicker" value="#000000">
|
41 |
+
</div>
|
42 |
+
|
43 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
|
44 |
+
<script>
|
45 |
+
const socket = io('http://localhost:3000');
|
46 |
+
const svg = document.getElementById('gameSvg');
|
47 |
+
const clearBtn = document.getElementById('clearBtn');
|
48 |
+
const colorPicker = document.getElementById('colorPicker');
|
49 |
+
let isDrawing = false;
|
50 |
+
let currentLine = null;
|
51 |
+
let lines = [];
|
52 |
+
let rotationX = 0;
|
53 |
+
let rotationY = 0;
|
54 |
+
let currentColor = '#000000';
|
55 |
+
|
56 |
+
function project3Dto2D(x, y, z) {
|
57 |
+
const focalLength = 400;
|
58 |
+
const scale = focalLength / (focalLength + z);
|
59 |
+
return {
|
60 |
+
x: x * scale + 400,
|
61 |
+
y: y * scale + 300
|
62 |
+
};
|
63 |
+
}
|
64 |
+
|
65 |
+
function rotatePoint(x, y, z) {
|
66 |
+
const cosX = Math.cos(rotationX);
|
67 |
+
const sinX = Math.sin(rotationX);
|
68 |
+
const cosY = Math.cos(rotationY);
|
69 |
+
const sinY = Math.sin(rotationY);
|
70 |
+
|
71 |
+
const rotatedY = y * cosX - z * sinX;
|
72 |
+
const rotatedZ = y * sinX + z * cosX;
|
73 |
+
const rotatedX = x * cosY + rotatedZ * sinY;
|
74 |
+
|
75 |
+
return { x: rotatedX, y: rotatedY, z: -x * sinY + rotatedZ * cosY };
|
76 |
+
}
|
77 |
+
|
78 |
+
function startDrawing(e) {
|
79 |
+
isDrawing = true;
|
80 |
+
const { clientX, clientY } = e;
|
81 |
+
const start = project3Dto2D(clientX - 400, clientY - 300, 0);
|
82 |
+
currentLine = { points: [{ x: clientX - 400, y: clientY - 300, z: 0 }], color: currentColor };
|
83 |
+
const lineElement = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
|
84 |
+
lineElement.setAttribute('points', `${start.x},${start.y}`);
|
85 |
+
lineElement.setAttribute('fill', 'none');
|
86 |
+
lineElement.setAttribute('stroke', currentColor);
|
87 |
+
lineElement.setAttribute('stroke-width', '2');
|
88 |
+
svg.appendChild(lineElement);
|
89 |
+
currentLine.element = lineElement;
|
90 |
+
|
91 |
+
socket.emit('startLine', { x: clientX - 400, y: clientY - 300, z: 0, color: currentColor });
|
92 |
+
}
|
93 |
+
|
94 |
+
function draw(e) {
|
95 |
+
if (!isDrawing) return;
|
96 |
+
const { clientX, clientY } = e;
|
97 |
+
const point = { x: clientX - 400, y: clientY - 300, z: 0 };
|
98 |
+
currentLine.points.push(point);
|
99 |
+
const projected = project3Dto2D(point.x, point.y, point.z);
|
100 |
+
const points = currentLine.element.getAttribute('points');
|
101 |
+
currentLine.element.setAttribute('points', `${points} ${projected.x},${projected.y}`);
|
102 |
+
|
103 |
+
socket.emit('drawLine', { x: clientX - 400, y: clientY - 300, z: 0 });
|
104 |
+
}
|
105 |
+
|
106 |
+
function stopDrawing() {
|
107 |
+
if (!isDrawing) return;
|
108 |
+
isDrawing = false;
|
109 |
+
lines.push(currentLine);
|
110 |
+
currentLine = null;
|
111 |
+
|
112 |
+
socket.emit('endLine');
|
113 |
+
}
|
114 |
+
|
115 |
+
function updateRotation(e) {
|
116 |
+
rotationY -= e.movementX * 0.01;
|
117 |
+
rotationX -= e.movementY * 0.01;
|
118 |
+
redrawLines();
|
119 |
+
|
120 |
+
socket.emit('updateRotation', { rotationX, rotationY });
|
121 |
+
}
|
122 |
+
|
123 |
+
function redrawLines() {
|
124 |
+
lines.forEach(line => {
|
125 |
+
const projectedPoints = line.points.map(point => {
|
126 |
+
const rotated = rotatePoint(point.x, point.y, point.z);
|
127 |
+
return project3Dto2D(rotated.x, rotated.y, rotated.z);
|
128 |
+
});
|
129 |
+
const pointsString = projectedPoints.map(p => `${p.x},${p.y}`).join(' ');
|
130 |
+
line.element.setAttribute('points', pointsString);
|
131 |
+
});
|
132 |
+
}
|
133 |
+
|
134 |
+
function clearCanvas() {
|
135 |
+
lines.forEach(line => svg.removeChild(line.element));
|
136 |
+
lines = [];
|
137 |
+
socket.emit('clearCanvas');
|
138 |
+
}
|
139 |
+
|
140 |
+
svg.addEventListener('mousedown', startDrawing);
|
141 |
+
svg.addEventListener('mousemove', (e) => {
|
142 |
+
if (e.buttons === 1) {
|
143 |
+
draw(e);
|
144 |
+
} else if (e.buttons === 2) {
|
145 |
+
updateRotation(e);
|
146 |
+
}
|
147 |
+
});
|
148 |
+
svg.addEventListener('mouseup', stopDrawing);
|
149 |
+
svg.addEventListener('mouseleave', stopDrawing);
|
150 |
+
svg.addEventListener('contextmenu', (e) => e.preventDefault());
|
151 |
+
|
152 |
+
clearBtn.addEventListener('click', clearCanvas);
|
153 |
+
colorPicker.addEventListener('change', (e) => {
|
154 |
+
currentColor = e.target.value;
|
155 |
+
});
|
156 |
+
|
157 |
+
// Socket.io event listeners
|
158 |
+
socket.on('startLine', (data) => {
|
159 |
+
const start = project3Dto2D(data.x, data.y, data.z);
|
160 |
+
const lineElement = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
|
161 |
+
lineElement.setAttribute('points', `${start.x},${start.y}`);
|
162 |
+
lineElement.setAttribute('fill', 'none');
|
163 |
+
lineElement.setAttribute('stroke', data.color);
|
164 |
+
lineElement.setAttribute('stroke-width', '2');
|
165 |
+
svg.appendChild(lineElement);
|
166 |
+
lines.push({ points: [data], element: lineElement, color: data.color });
|
167 |
+
});
|
168 |
+
|
169 |
+
socket.on('drawLine', (data) => {
|
170 |
+
const line = lines[lines.length - 1];
|
171 |
+
line.points.push(data);
|
172 |
+
const projected = project3Dto2D(data.x, data.y, data.z);
|
173 |
+
const points = line.element.getAttribute('points');
|
174 |
+
line.element.setAttribute('points', `${points} ${projected.x},${projected.y}`);
|
175 |
+
});
|
176 |
+
|
177 |
+
socket.on('updateRotation', (data) => {
|
178 |
+
rotationX = data.rotationX;
|
179 |
+
rotationY = data.rotationY;
|
180 |
+
redrawLines();
|
181 |
+
});
|
182 |
+
|
183 |
+
socket.on('clearCanvas', clearCanvas);
|
184 |
+
</script>
|
185 |
+
</body>
|
186 |
+
</html>
|