MeexReay/cubicjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

typescript rewrite

Browse source
This commit is contained in:
MeexReay 2024-12-21 14:19:03 +03:00
parent d1de965ae4
commit 1d1e7a1688
8 changed files with 1285 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

82
client/index.html Normal file
View file

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cubic</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icon/favicon-16x16.png">
<link rel="manifest" href="/icon/site.webmanifest">
<script>
if (!new URLSearchParams(location.search).has("PLEASE_HTTPS")) {
if (location.protocol !== 'http:') {
location.replace(`http:${location.href.substring(location.protocol.length)}`);
}
}
</script>
<style>
pre {
font-family: 'Fira Code', 'Times New Roman', Times, serif;
font-size: 15px;
border-radius: 10px;
padding: 15px;
background: #333;
}
</style>
</head>
<body oncontextmenu="return false;">
<div class="container">
<h1>Cubic</h1>
<p>игра кубик переделанная на js</p>
<div class="margin-25"></div>
<input type="text" id="server-ip" placeholder="айпи серрве"><br>
<input type="text" id="server-nick" placeholder="ник игроаа"><br>
<span id="server-error" style="color: red;margin: 5px 0;display: inline-block;"></span><br>
<button id="connect-server">поддключт к серваа</button><br>
<div class="margin-25"></div>
<canvas width="640" height="480" id="game"></canvas>
<div class="margin-25"></div>
<h3>список серверов:</h3>
<ul style="list-style: thai;">
<li>meex.lol</li>
<li>других пока нет</li>
</ul>
<div class="margin-25"></div>
<h3>инструкция по игре:</h3>
<pre>
ходить через кнопки A и D
прыгать кнопкой Space
выбрать блок цифрами
поставить блок через ПКМ только перед этим выберите
ломать блоки через ЛКМ
меню отладки на F3
ресетнуться на кнопку R
открыть чат кнопка T
</pre>
<div class="margin-25"></div>
<a href="https://github.com/MeexReay/cubicjs">репозиторий гитхаб</a><br>
<a href="README.md">протокол сервера</a><br>
<a href="server.py">готовая реализация сервера на Python</a>
</div>
<script src="script.js"></script>
</body>
</html>

0
client/src/block.ts Normal file
View file

55
client/src/network.ts Normal file
View file

@ -0,0 +1,55 @@
interface Packet {
getId(): string
getData(): string
}
function createPacket(id: string, ...params: string[]): Packet {
return {
getId: () => id,
getData: () => params.join("\n"),
}
}
function fromPacket(data: string): Packet {
return createPacket(data[0], ...data.slice(1).split("\n"))
}
class Connection {
private socket: WebSocket
private on_packet: (packet: Packet) => {}
private on_close: (error: string | null) => {}
constructor(
socket: WebSocket,
on_packet: (packet: Packet) => {},
on_close: (error: string | null) => {}
) {
this.socket = socket
this.on_packet = on_packet
this.on_close = on_close
this.socket.onmessage = this._on_message
this.socket.onclose = this._on_close
this.socket.onerror = this._on_error
}
private _on_message(event: MessageEvent) {
this.on_packet(fromPacket(event.data))
}
private _on_close(event: CloseEvent) {
this.on_close(null)
}
private _on_error(event: Event) {
this.on_close(event.toString())
}
close() {
this.socket.close()
}
send(packet: Packet) {
this.socket.send(packet.getId()+packet.getData())
}
}

0
client/src/player.ts Normal file
View file

0
client/src/render.ts Normal file
View file

757
client/src/script.ts Normal file
View file

@ -0,0 +1,757 @@
const canvas = document.getElementById("game") as HTMLCanvasElement
const ctx = canvas.getContext("2d");
const width = 640
const height = 480
function lerp(a: number, b: number, alpha: number): number {
return a + alpha * ( b - a )
}
const server_ip = document.getElementById("server-ip") as HTMLInputElement
const server_nick = document.getElementById("server-nick") as HTMLInputElement
const connect_server = document.getElementById("connect-server") as HTMLButtonElement
const server_error = document.getElementById("server-error") as HTMLSpanElement
const allowed_key_to_send = [
"KeyR", "KeyW", "KeyE", "KeyQ", "KeyS",
"Numpad1", "Numpad2", "Numpad3", "Numpad4", "Numpad5",
"Numpad6", "Numpad7", "Numpad8", "Numpad9", "Numpad0",
"ShiftLeft", "ControlLeft", "Enter",
"F1", "F2", "KeyZ", "KeyX", "KeyC"
]
connect_server.onclick = () => {
let ip = server_ip.value
let nick = server_nick.value
server_error.innerText = ""
if (ip.length == 0) {
server_error.innerText = "введите айпи пж"
return
}
if (nick.length == 0) {
server_error.innerText = "введите ник пж"
return
}
if (!ip.includes(":")) {
ip += ":8000"
}
if (typeof player.socket !== "undefined") {
player.socket.close()
}
player.onConnect(nick)
blocks = []
try {
let socket = new WebSocket(
"ws://"+ip,
"cubic",
)
socket.onopen = e => {
socket.send("J"+nick);
player.socket = socket
}
socket.onmessage = e => {
player.onRecvPacket(e.data[0], e.data.slice(1).split("\n"))
}
socket.onclose = e => {
player.socket = undefined
resetWorld()
}
socket.onerror = () => {
server_error.innerText = "Connection closed due to error"
resetWorld()
}
} catch (exception) {
server_error.innerText = exception
}
}
function wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string[] {
const lines = [];
let currentLine = '';
for (let i = 0; i < text.length; i++) {
const char = text[i];
const testLine = currentLine + char;
const testWidth = ctx.measureText(testLine).width;
if (testWidth > maxWidth && currentLine) {
lines.push(currentLine);
currentLine = char;
} else {
currentLine = testLine;
}
}
if (currentLine) {
lines.push(currentLine);
}
return lines;
}
var ticksAlive = 0
var debugMode = false
var camera = {
x: 0.0,
y: 0.0,
size: 1.5
}
var chatOpened = false
var chatMessages = []
var chatTyping = ""
type Rect = [number, number, number, number]
class Block {
public x: number
public y: number
public color: string
public collides: boolean
public type: string
constructor(
x: number,
y: number,
color: string,
collides: boolean,
type: string,
) {
this.x = x
this.y = y
this.color = color
this.collides = collides
this.type = type
}
render() {
let rect = this.translate_to_camera()
if (this.is_need_render(rect)) {
ctx.fillStyle = this.color
ctx.fillRect(...rect)
}
}
is_need_render(rect: Rect): boolean {
return rect[0] + rect[2] > 0 || rect[1] + rect[3] > 0 || rect[0] < width || rect[1] < height
}
translate_to_camera(): Rect {
let size = camera.size * 16
return [
this.x * size - size / 2 + (width / 2 - camera.x * size),
height - (this.y + 1) * size + size / 2 - (height / 2 - camera.y * size),
size,
size
]
}
tick() {
}
renderTick() {
}
on_collide(player: Player, x: number, y: number) {
if (x != 0) player.velocity_x = this.x + x - player.x
if (y != 0) player.velocity_y = this.y + y - player.y
}
renderText() {
}
}
class Player extends Block {
public velocity_x: number
public velocity_y: number
public name: string
public on_ground: boolean
constructor(
x: number,
y: number,
name: string,
color: string,
velocity_x: number,
velocity_y: number,
) {
super(x, y, color, true, null)
this.velocity_x = velocity_x
this.velocity_y = velocity_y
this.name = name
}
reset() {
this.on_ground = false
}
on_collide(player: Player, x: number, y: number) {
super.on_collide(player, x, y)
// if (x != 0) {
// player.vel_x *= 0.5
// this.vel_x = player.vel_x
// }
// if (y != 0) {
// player.vel_y *= 0.5
// this.vel_y = player.vel_y
// }
}
tick(collide=true) {
this.x = Math.round(this.x * 100) / 100
this.y = Math.round(this.y * 100) / 100
this.velocity_x = Math.round(this.velocity_x * 100) / 100
this.velocity_y = Math.round(this.velocity_y * 100) / 100
if (collide) this.collide()
}
collide() {
this.on_ground = false
for (const block of blocks) {
if (!block.collides) continue
let collide_x = 0
let collide_y = 0
if (this.x > block.x-1 && this.x < block.x+1) {
if (this.y > block.y && this.y + this.velocity_y - 1 < block.y) {
this.on_ground = true
collide_y = 1
}
if (this.y < block.y && this.y + this.velocity_y > block.y - 1) collide_y = -1
}
if (this.y > block.y-1 && this.y < block.y+1) {
if (this.x > block.x && this.x + this.velocity_x - 1 < block.x) collide_x = 1
if (this.x < block.x && this.x + this.velocity_x > block.x - 1) collide_x = -1
}
block.on_collide(this, collide_x, collide_y)
}
}
renderTick() {
this.velocity_x *= 0.5
this.velocity_y *= 0.5
this.x += this.velocity_x
this.y += this.velocity_y
}
renderText() {
super.renderText()
let rect = this.translate_to_camera()
if (this.is_need_render(rect)) {
ctx.fillStyle = "#ddd"
ctx.font = "15px monospace";
let width = ctx.measureText(this.name).width
ctx.fillText(this.name,rect[0]+rect[2]/2-width/2, rect[1]-5);
}
}
teleport(x: number, y: number) {
this.velocity_x = x - this.x
this.velocity_y = y - this.y
}
forceTeleport(x: number, y: number) {
this.x = x
this.y = y
this.velocity_x = 0
this.velocity_y = 0
}
}
class MainPlayer extends Player {
public socket: WebSocket | undefined
public walk_speed: number
public jump_speed: number
public gravity_speed: number
public controls_x: number
public controls_jump: boolean
public block_type: string | null
public all_block_types: string[]
constructor() {
super(0.0, 0.0, "unnamed player", "#5e6", 0, 0)
this.reset()
this.socket = undefined
}
reset() {
super.reset()
this.walk_speed = 1
this.jump_speed = 2
this.gravity_speed = 0.5
this.controls_x = 0
this.controls_jump = false
this.block_type = null
this.all_block_types = [
"normal", "normal", "normal", "normal", "normal",
"normal", "normal", "normal", "normal", "normal"
]
}
onConnect(name) {
this.x = 0.0
this.y = 0.0
this.velocity_x = 0.0
this.velocity_y = 0.0
camera.x = 0.0
camera.y = 0.0
chatOpened = false
chatMessages = []
this.name = name
this.color = "#5e6"
this.reset()
}
register() {
document.addEventListener("keydown", (e) => {
let key = e.code
if (chatOpened) {
if (key == "Backspace") {
chatTyping = chatTyping.slice(0, chatTyping.length-1)
} else if (key == "Enter") {
if (chatTyping == "") {
chatOpened = false
return
}
this.sendPacket("M", chatTyping)
chatTyping = ""
chatOpened = false
} else if (key == "Escape") {
chatOpened = false
} else if (e.key.length == 1) {
chatTyping += e.key
e.preventDefault()
return false
}
} else {
if (key == "KeyD") {
this.controls_x = 1
} else if (key == "KeyA") {
this.controls_x = -1
} else if (key == "Space") {
this.controls_jump = true
e.preventDefault()
return false
} else if (key == "KeyR") {
if (typeof this.socket === "undefined") {
this.forceTeleport(0, 1)
}
} else if (key == "KeyT") {
chatOpened = true
}
if (e.key == "0") this.block_type = null
if ("123456789".includes(e.key)) this.block_type = this.all_block_types[parseInt(e.key)-1]
if (allowed_key_to_send.includes(key)) {
this.sendPacket("K",key,"1")
}
if (key == "Escape") {
if (typeof this.socket !== "undefined") {
this.socket.close()
}
}
}
if (key == "F3") {
debugMode = !debugMode
e.preventDefault()
return false
}
})
document.addEventListener("keyup", (e) => {
let key = e.code
if ((key == "KeyD" && this.controls_x == 1)
|| (key == "KeyA" && this.controls_x == -1)) {
this.controls_x = 0
} else if (key == "Space" && this.controls_jump) {
this.controls_jump = false
}
if (allowed_key_to_send.includes(key)) {
this.sendPacket("K",key,"0")
}
})
canvas.addEventListener("wheel", e => {
if (e.deltaY > 0) {
camera.size *= 0.5 * (e.deltaY/114)
} else {
camera.size *= 2 * (e.deltaY/-114)
}
e.preventDefault()
return false
})
canvas.addEventListener("mousedown", e => {
let rect = canvas.getBoundingClientRect()
let size = 16 * camera.size
let x = Math.round((e.clientX - rect.x) / size - (width / size / 2) + camera.x)
let y = Math.round((height - (e.clientY - rect.y)) / size - (height / size / 2) + camera.y)
if (e.buttons == 2 && this.block_type != null) {
if (typeof this.socket === "undefined") {
placeBlock(new Block(x,y,"#555",true,this.block_type))
}
this.sendPacket("P", x.toString(), y.toString(), this.block_type)
} else if (e.buttons == 1) {
if (typeof this.socket === "undefined") {
removeBlock(x, y)
}
this.sendPacket("D", x.toString(), y.toString())
}
})
}
onRecvPacket(packet_id: string, packet_data: string[]) {
if (packet_id == "K") {
server_error.innerText = packet_data[0]
this.socket.close()
this.socket = null
}
if (packet_id == "N") {
this.name = packet_data[0]
}
if (packet_id == "C") {
this.color = packet_data[0]
}
if (packet_id == "M") {
chatMessages.unshift(...packet_data)
}
if (packet_id == "R") {
this.velocity_x = parseFloat(packet_data[0]) - this.x + parseFloat(packet_data[2])
this.velocity_y = parseFloat(packet_data[1]) - this.y + parseFloat(packet_data[3])
}
if (packet_id == "P") {
let x = parseFloat(packet_data[0])
let y = parseFloat(packet_data[1])
this.x = x
this.y = y
}
if (packet_id == "V") {
let x = parseFloat(packet_data[0])
let y = parseFloat(packet_data[1])
this.velocity_x = x
this.velocity_y = y
}
if (packet_id == "S") {
let speed_type = packet_data[0]
let speed = parseFloat(packet_data[1])
if (speed_type == "W") {
this.walk_speed = speed
} else if (speed_type == "J") {
this.jump_speed = speed
} else if (speed_type == "G") {
this.gravity_speed = speed
}
}
if (packet_id == "W") {
for (const data of packet_data) {
let type = data[0]
let create = data[1] == "1"
let params = data.slice(2).split(",")
if (type == "B") {
let x = parseFloat(params[0])
let y = parseFloat(params[1])
if (create) {
let collides = params[2] == "1"
let type = params[3]
let color = params[4]
let block = getBlock(x, y)
if (block != null) {
block.x = x
block.y = y
block.color = color
block.collides = collides
block.type = type
} else {
placeBlock(new Block(x,y,color,collides,type))
}
} else {
removeBlock(x, y)
}
} else if (type == "P") {
let name = params[0]
if (create) {
let x = parseFloat(params[1])
let y = parseFloat(params[2])
let vel_x = parseFloat(params[3])
let vel_y = parseFloat(params[4])
let color = params[5]
let player = getPlayer(name)
if (player != null) {
player.x = x
player.y = y
player.color = color
player.velocity_x = vel_x
player.velocity_y = vel_y
} else {
placeBlock(new Player(x,y,name,color,vel_x,vel_y))
}
} else {
removePlayer(name)
}
}
}
}
if (packet_id == "B") {
this.all_block_types = packet_data.slice(0, 9)
this.block_type = null
}
}
sendPacket(id: string, ...params: string[]) {
if (typeof this.socket === "undefined") return
this.socket.send(id+params.join("\n"))
}
sendVelPacket(x, y) {
if (x == 0 && y == 0) return
this.sendPacket("V", x, y)
}
tick() {
super.tick(false)
let vel_x = this.velocity_x
let vel_y = this.velocity_y
this.velocity_x += this.controls_x * this.walk_speed
if (this.controls_jump && this.on_ground) {
this.velocity_y += this.jump_speed
this.on_ground = false
} else {
this.velocity_y -= this.gravity_speed
}
this.collide()
ticksAlive++
this.sendVelPacket(this.velocity_x-vel_x, this.velocity_y-vel_y)
}
render() {
super.render()
camera.x = Math.round(lerp(camera.x, this.x, 0.075) * 1000) / 1000
camera.y = Math.round(lerp(camera.y, this.y, 0.075) * 1000) / 1000
}
renderText() {
super.renderText()
if (this.block_type != null) {
ctx.fillStyle = "#76d"
ctx.font = "15px monospace";
ctx.fillText("selected: "+this.block_type, 0, 15);
}
if (debugMode) {
ctx.fillStyle = "#de7"
ctx.font = "20px monospace";
ctx.fillText("x: "+this.x, 0, 20);
ctx.fillText("y: "+this.y, 0, 40);
ctx.fillText("velocity_x: "+this.velocity_x, 0, 60);
ctx.fillText("velocity_y: "+this.velocity_y, 0, 80);
ctx.fillText("camera.x: "+camera.x, 0, 100);
ctx.fillText("camera.y: "+camera.y, 0, 120);
}
if (!chatOpened) {
ctx.fillStyle = "#22222288"
ctx.fillRect(5, height - 35, width * 0.4, 30)
ctx.fillStyle = "#aaaaaa88"
ctx.font = "15px monospace";
ctx.fillText("Нажмите T для чата", 15, height - 15);
} else {
ctx.fillStyle = "#22222288"
ctx.fillRect(5, height - 35, width -10, 30)
ctx.save();
ctx.beginPath();
ctx.moveTo(5, height - 35);
ctx.lineTo(width - 5 , height - 35);
ctx.lineTo(width - 5, height - 5);
ctx.lineTo(5, height - 5);
ctx.lineTo(5, height - 35);
ctx.closePath();
ctx.clip();
ctx.font = "15px monospace"
if (chatTyping.length == 0) {
ctx.fillStyle = "#aaaaaa88"
ctx.fillText("Напишите сообщение...", 15, height - 15);
} else {
ctx.fillStyle = "#ffffff"
let text_width = ctx.measureText(chatTyping).width
ctx.fillText(chatTyping, Math.min(10, width - text_width - 10), height - 15)
}
ctx.restore();
}
if (chatMessages.length > 0) {
let draw_message = (message) => {
let lines = wrapText(ctx, message, message_width - 20)
let height = lines.length * 20 + 5 + 5
let top = message_bottom - height
ctx.fillStyle = "#22222288"
ctx.fillRect(5, top, message_width, height)
let y = 5
for (let line of lines) {
ctx.fillStyle = "#ffffff"
ctx.fillText(line, 15, top+y+15);
y += 5 + 20
}
message_bottom -= height + 5
}
let message_width = width * 0.4
let message_bottom = height - 35 - 5
if (chatOpened) {
chatMessages.forEach(draw_message)
} else {
draw_message(chatMessages[0])
}
}
}
}
var player = new MainPlayer()
player.register()
var blocks: Block[] = []
function resetWorld() {
player.onConnect("unnamed player")
blocks = []
blocks.push(new Block(-1, -1, "#555", true, "normal"));
blocks.push(new Block(0, -1, "#a67", true, "spawn"));
blocks.push(new Block(1, -1, "#555", true, "normal"));
}
resetWorld()
function getBlock(x: number, y: number): Block {
let value = blocks.find(o => !(o instanceof Player) && o.x == x && o.y == y)
if (typeof value === "undefined") {
return null
} else {
return value
}
}
function placeBlock(block: Block) {
blocks.push(block);
}
function removeBlock(x: number, y: number) {
blocks = blocks.filter(o => o instanceof Player || o.x != x || o.y != y)
}
function getPlayer(name: string): Player | null {
let value = blocks.find(o => o instanceof Player && o.name == name) as Player
if (typeof value === "undefined") {
return null
} else {
return value
}
}
function removePlayer(name: string) {
blocks = blocks.filter(o => !(o instanceof Player) || o.name != name)
}
setInterval(() => {
for (const block of blocks)
block.tick()
player.tick()
}, 1000 / 20)
setInterval(() => {
for (const block of blocks)
block.renderTick()
player.renderTick()
}, 1000 / 60)
let renderTimer = () => {
ctx.fillStyle = "#333";
ctx.fillRect(0, 0, width, height);
for (const block of blocks)
block.render()
for (const block of blocks)
block.renderText()
player.render()
player.renderText()
requestAnimationFrame(renderTimer)
}
requestAnimationFrame(renderTimer)