Now a server app!
-Using socket.io
This commit is contained in:
A Bass
parent
272d0b9b08
commit
8444655bc0
23
index.html
23
index.html
|
|
@ -1,23 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title></title>
|
|
||||||
<script src='perlin.js'></script>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Uber Secret Project</h1>
|
|
||||||
<div class="container">
|
|
||||||
<div class="wrapper">
|
|
||||||
<canvas id="canvas" width=0 height=0></canvas>
|
|
||||||
<div class="right">
|
|
||||||
<p>Info</p><br>
|
|
||||||
<p id="cash">$0</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<script src="script.js"></script>
|
|
||||||
</html>
|
|
||||||
89
index.js
89
index.js
|
|
@ -1,12 +1,79 @@
|
||||||
var liveServer = require("live-server");
|
var noise = require('noisejs');
|
||||||
|
var express = require('express');
|
||||||
|
|
||||||
var params = {
|
const gridSize = [18, 18];
|
||||||
port: 8181, // Set the server port. Defaults to 8080.
|
const perlinScale = 3;
|
||||||
host: "0.0.0.0", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP.
|
var world = generateWorld();
|
||||||
file: "index.html", // When set, serve this file (server root relative) for every 404 (useful for single-page applications)
|
|
||||||
wait: 10, // Waits for all changes, before reloading. Defaults to 0 sec.
|
var app = express() //Static resources server
|
||||||
mount: [['/components', './node_modules']], // Mount a directory to a route.
|
app.use(express.static(__dirname + '/www/'));var server = app.listen(8082, function () {
|
||||||
logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
|
var port = server.address().port;
|
||||||
middleware: [function(req, res, next) { next(); }] // Takes an array of Connect-compatible middleware that are injected into the server middleware stack
|
console.log('Server running at port %s', port);
|
||||||
};
|
});
|
||||||
liveServer.start(params);
|
|
||||||
|
var io = require('socket.io')(server);/* Connection events */
|
||||||
|
io.on('connection', function(client) {
|
||||||
|
console.log('User connected');
|
||||||
|
client.on('joinGame', function(tank){
|
||||||
|
console.log(client.id + ' joined the game');
|
||||||
|
|
||||||
|
// client.emit('addTank', { id: tank.id, type: tank.type, isLocal: true, x: initX, y: initY, hp: TANK_INIT_HP });
|
||||||
|
// client.broadcast.emit('addTank', { id: tank.id, type: tank.type, isLocal: false, x: initX, y: initY, hp: TANK_INIT_HP} );
|
||||||
|
// game.addTank({ id: tank.id, type: tank.type, hp: TANK_INIT_HP});
|
||||||
|
client.emit('gameVars', {gridSize: gridSize, world: world})
|
||||||
|
})
|
||||||
|
|
||||||
|
client.on('clickCanvas', function(data){
|
||||||
|
const xu = data.tilePosition[0]
|
||||||
|
const yu = data.tilePosition[1]
|
||||||
|
world[xu][yu].structure = data.structure
|
||||||
|
client.broadcast.emit('sync',{world: world})
|
||||||
|
client.emit('sync',{world: world})
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function randomNumber(min, max) {
|
||||||
|
return Math.floor(Math.random() * (max - min) + min);
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateWorld(){
|
||||||
|
let x, y = 0
|
||||||
|
|
||||||
|
let tempWorld = Array.from(Array(gridSize[0]), () => new Array(gridSize[1]));
|
||||||
|
for (x = 0; x < gridSize[0]; x++){
|
||||||
|
for (y = 0; y < gridSize[1]; y++){
|
||||||
|
tempWorld[x][y] = {type: 0, structure: 0}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
noise.seed(Math.random())
|
||||||
|
for(x = 0; x < gridSize[0]; x++){
|
||||||
|
for(y = 0; y < gridSize[1]; y++){
|
||||||
|
|
||||||
|
var value = (noise.perlin2(x/perlinScale, y/perlinScale))*10;
|
||||||
|
if (value >= -3) {
|
||||||
|
tempWorld[x][y].type = 0
|
||||||
|
} else if (value < -3) {
|
||||||
|
tempWorld[x][y].type = 1
|
||||||
|
}
|
||||||
|
if (value > 1.4) {
|
||||||
|
tempWorld[x][y].type = 2
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (i = 0; i < gridSize[0]*gridSize[1]/15; i){
|
||||||
|
x = randomNumber(0,gridSize[0]);
|
||||||
|
y = randomNumber(0,gridSize[1]);
|
||||||
|
if (tempWorld[x][y].type != 1) {
|
||||||
|
i++;
|
||||||
|
tempWorld[x][y].structure = 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return tempWorld;
|
||||||
|
}
|
||||||
|
|
|
||||||
1720
package-lock.json
generated
1720
package-lock.json
generated
File diff suppressed because it is too large
Load diff
17
package.json
Normal file
17
package.json
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
"name": "empires",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "server.js",
|
||||||
|
"dependencies": {
|
||||||
|
"dotenv": "^16.0.0",
|
||||||
|
"express": "^4.17.3",
|
||||||
|
"socket.io": "^4.4.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {},
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "UNLICENSED"
|
||||||
|
}
|
||||||
139
script.js
139
script.js
|
|
@ -1,139 +0,0 @@
|
||||||
const perlinScale = 3;
|
|
||||||
tileSize = 24;
|
|
||||||
const gridSize = [18, 18];
|
|
||||||
var cash = 99;
|
|
||||||
|
|
||||||
var world = Array.from(Array(gridSize[0]), () => new Array(gridSize[1]));
|
|
||||||
for (x = 0; x < gridSize[0]; x++){
|
|
||||||
for (y = 0; y < gridSize[1]; y++){
|
|
||||||
world[x][y] = {type: 0, structure: 0}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
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_canvas(); // FILL THE CANVAS WITH THE IMAGE.
|
|
||||||
}
|
|
||||||
|
|
||||||
function fill_canvas() {
|
|
||||||
// CREATE CANVAS CONTEXT.
|
|
||||||
var canvas = document.getElementById('canvas');
|
|
||||||
canvas.addEventListener("mousedown", function(e)
|
|
||||||
{
|
|
||||||
getMousePosition(canvas, e);
|
|
||||||
});
|
|
||||||
canvas.width = tileSize*gridSize[0];
|
|
||||||
canvas.height = tileSize*gridSize[1];
|
|
||||||
var ctx = canvas.getContext('2d');
|
|
||||||
|
|
||||||
|
|
||||||
generateWorld()
|
|
||||||
render(ctx)
|
|
||||||
updateUI();
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getBlockDimensions(){
|
|
||||||
|
|
||||||
return [canvas.width/24, canvas.height/24]
|
|
||||||
}
|
|
||||||
|
|
||||||
function randomNumber(min, max) {
|
|
||||||
return Math.floor(Math.random() * (max - min) + min);
|
|
||||||
}
|
|
||||||
|
|
||||||
function render(ctx) { // 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);
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateWorld(){
|
|
||||||
let x, y = 0
|
|
||||||
noise.seed(Math.random())
|
|
||||||
for(x = 0; x < gridSize[0]; x++){
|
|
||||||
for(y = 0; y < gridSize[1]; y++){
|
|
||||||
|
|
||||||
var value = (noise.perlin2(x/perlinScale, y/perlinScale))*10;
|
|
||||||
if (value >= -3) {
|
|
||||||
world[x][y].type = 0
|
|
||||||
} else if (value < -3) {
|
|
||||||
world[x][y].type = 1
|
|
||||||
}
|
|
||||||
if (value > 1.4) {
|
|
||||||
world[x][y].type = 2
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (i = 0; i < gridSize[0]*gridSize[1]/15; i){
|
|
||||||
x = randomNumber(0,gridSize[0]);
|
|
||||||
y = randomNumber(0,gridSize[1]);
|
|
||||||
if (world[x][y].type != 1) {
|
|
||||||
i++;
|
|
||||||
world[x][y].structure = 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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!")
|
|
||||||
const tile = world[xu][yu];
|
|
||||||
if (tile.type != 1 && tile.structure != 1 && cash > 10) {
|
|
||||||
tile.structure = 2
|
|
||||||
cash = cash - 10;
|
|
||||||
updateUI();
|
|
||||||
render(document.getElementById('canvas').getContext('2d'))
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 296 B After Width: | Height: | Size: 296 B |
|
Before Width: | Height: | Size: 264 B After Width: | Height: | Size: 264 B |
|
Before Width: | Height: | Size: 358 B After Width: | Height: | Size: 358 B |
23
www/index.html
Normal file
23
www/index.html
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title></title>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="socket.io.js"></script>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Uber Secret Project</h1>
|
||||||
|
<div class="container">
|
||||||
|
<div class="wrapper">
|
||||||
|
<canvas id="canvas" width=0 height=0></canvas>
|
||||||
|
<div class="right">
|
||||||
|
<p>Info</p><br>
|
||||||
|
<p id="cash">$0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script src='script.js'></script>
|
||||||
|
</html>
|
||||||
|
Before Width: | Height: | Size: 292 B After Width: | Height: | Size: 292 B |
125
www/script.js
Normal file
125
www/script.js
Normal file
|
|
@ -0,0 +1,125 @@
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 285 B After Width: | Height: | Size: 285 B |
7
www/socket.io.js
Normal file
7
www/socket.io.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue