2022-04-20 04:32:17 +00:00
|
|
|
// const perlinScale = 3;
|
|
|
|
const tileSize = 24;
|
|
|
|
var gridSize;
|
|
|
|
var cash = 99;
|
|
|
|
var world
|
2022-04-21 03:23:51 +00:00
|
|
|
var tiles = []
|
|
|
|
|
2022-04-20 04:32:17 +00:00
|
|
|
var canvas = document.getElementById('canvas');
|
2022-04-20 18:53:36 +00:00
|
|
|
var hud = document.getElementById('hud');
|
2022-04-20 04:32:17 +00:00
|
|
|
var ctx = canvas.getContext('2d');
|
2022-04-20 18:53:36 +00:00
|
|
|
var hctx = hud.getContext('2d');
|
2022-04-20 04:32:17 +00:00
|
|
|
var socket = io.connect('http://127.0.0.1:8082/');
|
2022-04-21 03:23:51 +00:00
|
|
|
function joinGame(socket, room, nick){
|
|
|
|
socket.emit('joinGame', {room, nick});
|
2022-04-20 04:32:17 +00:00
|
|
|
}
|
2022-04-20 18:53:36 +00:00
|
|
|
function leaveGame(socket){
|
|
|
|
socket.emit('leaveGame', {});
|
|
|
|
}
|
|
|
|
|
2022-04-21 03:23:51 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class Cursor {
|
|
|
|
constructor(){
|
|
|
|
this.x = 0
|
|
|
|
this.y = 0
|
|
|
|
this.xold = 0
|
|
|
|
this.yold = 0
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
var cursor = new Cursor();
|
2022-04-20 04:32:17 +00:00
|
|
|
|
2022-04-20 18:53:36 +00:00
|
|
|
window.onbeforeunload = function(){
|
|
|
|
socket.disconnect();
|
|
|
|
world = []
|
|
|
|
}
|
2022-04-20 04:32:17 +00:00
|
|
|
|
|
|
|
socket.on('gameVars', function(tank){
|
|
|
|
gridSize = tank.gridSize;
|
|
|
|
world = tank.world;
|
2022-04-20 18:53:36 +00:00
|
|
|
|
2022-04-20 04:32:17 +00:00
|
|
|
fill_canvas()
|
|
|
|
});
|
|
|
|
|
2022-04-20 18:53:36 +00:00
|
|
|
socket.on('playerList', function(data){
|
|
|
|
console.log(data)
|
|
|
|
});
|
|
|
|
|
2022-04-20 04:32:17 +00:00
|
|
|
socket.on('sync', function (sync){
|
|
|
|
world = sync.world;
|
|
|
|
render()
|
|
|
|
})
|
|
|
|
|
2022-04-21 03:23:51 +00:00
|
|
|
function loadSprites(){
|
|
|
|
var spriteJank = document.getElementById('spriteJank');
|
|
|
|
var ctxj = spriteJank.getContext('2d');
|
|
|
|
var spriteSheet = new Image();
|
|
|
|
|
|
|
|
spriteSheet.src = '/sheet.png'
|
|
|
|
spriteSheet.onload = function() {
|
|
|
|
|
|
|
|
|
|
|
|
for (y = 0; y < 16; y++) {
|
|
|
|
for (x = 0; x < 16; x++) {
|
|
|
|
ctxj.drawImage(spriteSheet, -x*24,-y*24)
|
|
|
|
var tmp = new Image();
|
|
|
|
tmp.src = spriteJank.toDataURL();
|
|
|
|
ctxj.clearRect(0, 0, 24, 24);
|
|
|
|
tiles.push(tmp)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function submit(event) {
|
|
|
|
document.getElementById('menu').style = "display: none;"
|
|
|
|
document.getElementById('container').style = ""
|
|
|
|
const room = document.getElementById("room").value
|
|
|
|
event.preventDefault();
|
|
|
|
joinGame(socket, {room: room, name: "bob"})
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
2022-04-20 04:32:17 +00:00
|
|
|
window.onload = function () {
|
2022-04-21 03:23:51 +00:00
|
|
|
const form = document.getElementById('form');
|
2022-04-20 04:32:17 +00:00
|
|
|
|
2022-04-21 03:23:51 +00:00
|
|
|
form.addEventListener('submit', submit);
|
|
|
|
|
|
|
|
loadSprites()
|
2022-04-20 04:38:02 +00:00
|
|
|
|
2022-04-20 04:32:17 +00:00
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function fill_canvas() {
|
|
|
|
// CREATE CANVAS CONTEXT.
|
2022-04-21 03:23:51 +00:00
|
|
|
hud.addEventListener('mousemove', e => {
|
|
|
|
mouseMoved(e)
|
|
|
|
});
|
2022-04-20 18:53:36 +00:00
|
|
|
hud.addEventListener("mousedown", function(e)
|
2022-04-20 04:32:17 +00:00
|
|
|
{
|
|
|
|
getMousePosition(canvas, e);
|
|
|
|
});
|
|
|
|
canvas.width = tileSize*gridSize[0];
|
|
|
|
canvas.height = tileSize*gridSize[1];
|
2022-04-20 18:53:36 +00:00
|
|
|
hud.width = canvas.width
|
|
|
|
hud.height = canvas.height
|
2022-04-20 04:32:17 +00:00
|
|
|
|
|
|
|
|
|
|
|
updateUI();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function randomNumber(min, max) {
|
|
|
|
return Math.floor(Math.random() * (max - min) + min);
|
|
|
|
}
|
|
|
|
|
|
|
|
function render() { // DRAW THE IMAGE TO THE CANVAS.
|
|
|
|
let x, y = 0
|
|
|
|
for(x = 0; x < gridSize[0]; x++){
|
|
|
|
for(y = 0; y < gridSize[1]; y++){
|
|
|
|
const xu = x*tileSize;
|
|
|
|
const yu = y*tileSize;
|
2022-04-20 18:53:36 +00:00
|
|
|
|
|
|
|
// Draw buildings
|
|
|
|
switch (world[x][y].type) {
|
|
|
|
case (0):
|
|
|
|
ctx.drawImage(tiles[0], xu,yu)
|
|
|
|
break;
|
|
|
|
case (1):
|
|
|
|
ctx.drawImage(tiles[2], xu,yu)
|
|
|
|
break;
|
|
|
|
case (2):
|
|
|
|
ctx.drawImage(tiles[1], xu,yu)
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Draw Structures
|
|
|
|
switch (world[x][y].structure) {
|
|
|
|
case (1):
|
2022-04-21 03:23:51 +00:00
|
|
|
ctx.drawImage(tiles[4], xu,yu)
|
2022-04-20 18:53:36 +00:00
|
|
|
break;
|
|
|
|
case (2):
|
2022-04-21 03:23:51 +00:00
|
|
|
ctx.drawImage(tiles[32], xu,yu)
|
|
|
|
break;
|
|
|
|
case (3):
|
|
|
|
ctx.drawImage(tiles[33], xu,yu)
|
|
|
|
break;
|
|
|
|
case (4):
|
|
|
|
ctx.drawImage(tiles[34], xu,yu)
|
2022-04-20 18:53:36 +00:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Draw Property overlays
|
2022-04-21 03:23:51 +00:00
|
|
|
if (world[x][y].color != null){
|
2022-04-20 18:53:36 +00:00
|
|
|
ctx.beginPath();
|
2022-04-21 03:23:51 +00:00
|
|
|
ctx.fillStyle = world[x][y].color;
|
2022-04-20 18:53:36 +00:00
|
|
|
|
|
|
|
ctx.rect(xu, yu, tileSize, tileSize)
|
2022-04-21 03:23:51 +00:00
|
|
|
ctx.globalAlpha = 0.6;
|
2022-04-20 18:53:36 +00:00
|
|
|
ctx.fill()
|
|
|
|
ctx.globalAlpha = 1;
|
|
|
|
}
|
2022-04-20 04:32:17 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
console.log("image Rendered")
|
|
|
|
}
|
|
|
|
function updateUI(){
|
|
|
|
document.getElementById("cash").innerHTML = ("$" + cash +socket.id);
|
|
|
|
}
|
|
|
|
|
|
|
|
function getMousePosition(canvas, event) {
|
|
|
|
// Get mouse position on canvas
|
|
|
|
const rect = canvas.getBoundingClientRect();
|
|
|
|
const x = event.clientX - rect.left;
|
|
|
|
const y = event.clientY - rect.top;
|
2022-04-21 03:23:51 +00:00
|
|
|
// const xu = Math.floor(x/tileSize)
|
|
|
|
// const yu = Math.floor(y/tileSize)
|
|
|
|
const xu = cursor.x
|
|
|
|
const yu = cursor.y
|
2022-04-20 04:32:17 +00:00
|
|
|
// Convert canvas coordinates to usable coordinates within the coordinate system
|
|
|
|
|
|
|
|
|
|
|
|
console.log("Click!")
|
2022-04-20 18:53:36 +00:00
|
|
|
console.log(xu,yu)
|
2022-04-20 04:32:17 +00:00
|
|
|
socket.emit('clickCanvas', {tilePosition: [xu,yu], structure: 2});
|
|
|
|
|
|
|
|
}
|
2022-04-21 03:23:51 +00:00
|
|
|
function mouseMoved(event) {
|
|
|
|
const x = Math.floor(event.offsetX/tileSize)
|
|
|
|
const y = Math.floor(event.offsetY/tileSize)
|
|
|
|
if (cursor.xold != x || cursor.yold != y) {
|
|
|
|
cursor.x = x
|
|
|
|
cursor.y = y
|
|
|
|
hctx.clearRect(cursor.xold*tileSize, cursor.yold*tileSize, tileSize, tileSize)
|
|
|
|
hctx.drawImage(tiles[80], x*tileSize,y*tileSize)
|
|
|
|
cursor.xold = x
|
|
|
|
cursor.yold = y
|
|
|
|
}
|
|
|
|
}
|