126 lines
2.9 KiB
JavaScript
126 lines
2.9 KiB
JavaScript
// const perlinScale = 3;
|
|
const tileSize = 24;
|
|
var gridSize;
|
|
var cash = 99;
|
|
var world
|
|
var canvas = document.getElementById('canvas');
|
|
var ctx = canvas.getContext('2d');
|
|
var socket = io.connect('http://127.0.0.1:8082/');
|
|
function joinGame(tankName, tankType, socket){
|
|
if(tankName != ''){
|
|
socket.emit('joinGame', {name: tankName, type: tankType});
|
|
}
|
|
}
|
|
joinGame("aaa", "blue", socket);
|
|
|
|
|
|
socket.on('gameVars', function(tank){
|
|
gridSize = tank.gridSize;
|
|
world = tank.world;
|
|
console.log(gridSize, world)
|
|
console.log(tank)
|
|
fill_canvas()
|
|
});
|
|
|
|
socket.on('sync', function (sync){
|
|
world = sync.world;
|
|
render()
|
|
})
|
|
|
|
window.onload = function () {
|
|
|
|
// GET THE IMAGE.
|
|
var city = new Image();
|
|
city.src = 'city.png';
|
|
var rock = new Image();
|
|
rock.src = 'rock.png';
|
|
var background = new Image();
|
|
var grass = new Image();
|
|
grass.src = 'grass.png'
|
|
var sea = new Image();
|
|
sea.src = 'sea.png'
|
|
var hills = new Image();
|
|
hills.src = 'hills.png'
|
|
tiles = [grass,hills,sea,rock,city];
|
|
background.src = 'background.png';
|
|
// WAIT TILL IMAGE IS LOADED.
|
|
background.onload = function () {
|
|
// FILL THE CANVAS WITH THE IMAGE.
|
|
}
|
|
|
|
|
|
}
|
|
|
|
function fill_canvas() {
|
|
// CREATE CANVAS CONTEXT.
|
|
|
|
canvas.addEventListener("mousedown", function(e)
|
|
{
|
|
getMousePosition(canvas, e);
|
|
});
|
|
canvas.width = tileSize*gridSize[0];
|
|
canvas.height = tileSize*gridSize[1];
|
|
|
|
|
|
|
|
render()
|
|
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;
|
|
if (world[x][y].type == 0) {
|
|
|
|
ctx.drawImage(tiles[0], xu,yu)
|
|
} else if (world[x][y].type == 1) {
|
|
ctx.drawImage(tiles[2], xu,yu)
|
|
}
|
|
if (world[x][y].type == 2) {
|
|
ctx.drawImage(tiles[1], xu,yu)
|
|
}
|
|
if (world[x][y].structure == 1) {
|
|
ctx.drawImage(tiles[3], xu,yu)
|
|
}
|
|
if (world[x][y].structure == 2) {
|
|
ctx.drawImage(tiles[4], xu,yu)
|
|
}
|
|
|
|
}
|
|
}
|
|
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;
|
|
const xu = Math.floor(x/tileSize)
|
|
const yu = Math.floor(y/tileSize)
|
|
// Convert canvas coordinates to usable coordinates within the coordinate system
|
|
|
|
|
|
console.log("Click!")
|
|
|
|
socket.emit('clickCanvas', {tilePosition: [xu,yu], structure: 2});
|
|
// if (tile.type != 1 && tile.structure != 1 && cash > 10) {
|
|
// tile.structure = 2
|
|
// cash = cash - 10;
|
|
|
|
// }
|
|
|
|
}
|