diff --git a/Assets/Sheet.xcf b/Assets/Sheet.xcf index a2aa245..f1a8c0e 100644 Binary files a/Assets/Sheet.xcf and b/Assets/Sheet.xcf differ diff --git a/index.js b/index.js index f55f727..8878882 100644 --- a/index.js +++ b/index.js @@ -1,24 +1,153 @@ var express = require('express'); const worldgen = require("./worldgen.js") +const data = require("./tileinfo.js") const util = require("./util.js") -const gridSize = [18, 18]; const perlinScale = 3; class Player { - constructor(id, color) { + constructor(id, color, name) { + this.name = name this.id = id; this.color = color; + this.buildings = [0,0,0,0,0,0,0,0,0,0,0,0,0] + this.gold = 100 + this.power = 100 + util.randomNumber(2,50) } + + kill(client) { + if(game.players.length < 2){ + for(let x = 0; x < game.gridSize[0]; x++) { + for(let y = 0; y < game.gridSize[1]; y++) { + if (game.world.map[x][y].owner == this.id) { + game.world.map[x][y].owner = null + game.world.map[x][y].color = null + } + } + } + } else { + console.log("KILL") + let playerList = game.players.filter(obj => obj.id != this.id); + while (playerList > 1) { + for (let i = 1; i < playerList.length-1; i++) { + if (playerList[util.randomNumber(0,i)].gold < playerList[i].gold) { + delete playerList[i]; + } + } + playerlist = playerList.filter(obj => obj != null) + } + var player2 = playerList[0] + this.transfer(player2) + } + sendMap(client) + game.removePlayer(this.id); + } + + transfer(player2) { + player2.gold += this.gold + player2.power += this.power + for(let x = 0; x < game.gridSize[0]; x++) { + for(let y = 0; y < game.gridSize[1]; y++) { + if (game.world.map[x][y].owner == this.id) { + game.world.map[x][y].owner = player2.id + game.world.map[x][y].color = player2.color + } + } + } + + for (i = 0; i < this.buildings.length; i++) { + player2.buildings[i] += this.buildings[i] + } + + } + + + +} +class World { + constructor(gridSize, perlinScale) { + console.log(gridSize) + this.map = worldgen.generateWorld(gridSize, perlinScale) + } + + // Determine what method of clicking is to be used by player + click(structure, x, y, client){ + const player = game.getPlayerByID(client.id); + //Build Mode + if (this.map[x][y].owner == player.id) { + this.placeStructure(structure, x, y, player, client) + } + //Claim Mode + if (this.map[x][y].owner == null) { + this.claimLand(x, y, player, client) + } + + if (this.map[x][y].owner != null && this.map[x][y].owner != player.id) { + //Attack Mode + } + } + + // Function for placing buildings on land + placeStructure(structure, x, y, player, client) { + // Get info for the structure desired to be built from databank + const strucInfo = data.structureTypes[structure] + // Get the tile object the structure is to be built upon + const tileOfInterest = this.map[x][y]; + // get info for the tile the structure is to be built upon from databank + const tileInfo = data.tileTypes[tileOfInterest.type] + const cost = strucInfo.buildPrice + tileInfo.buildPrice; + + if ( + // Check if the structure is valid to be built + strucInfo.buildable == true + // Check if player is still under building limit for structure + && player.buildings[structure] < strucInfo.maxQuantity + // Ensure no other builings are already built in this tile + && tileOfInterest.structure == 0 + // Check to see if the structure can be built on the type of tile + && strucInfo.buildableOn.includes(tileOfInterest.type) + // Check if player has enough gold to build this + && player.gold > cost + ) { + // Update tile on map + this.map[x][y].structure = structure + + // Increment building count for this structure + player.buildings[structure] ++; + + // Charge player for cost of structure + player.gold -= cost; + + sendMap(client) + } + } + + claimLand(x, y, player, client) { + const tileOfInterest = this.map[x][y]; + + if (data.structureTypes[tileOfInterest.structure].claimable == true) { + this.map[x][y].owner = player.id + this.map[x][y].color = player.color + sendMap(client) + } + } + + +} + +function sendMap(client) { + client.broadcast.emit('sync',{world: game.world.map}) + client.emit('sync',{world: game.world.map}) } class Game { - constructor() { + constructor(gridSize) { this.players = []; - this.world = worldgen.generateWorld(gridSize, perlinScale); + this.world = new World(gridSize, perlinScale); + this.gridSize = gridSize } - addPlayer(id) { + addPlayer(id, name) { var color switch(util.randomNumber(1,4)) { case 1: @@ -37,8 +166,9 @@ class Game { color = "yellow"; break; } - const player = new Player(id, color); + const player = new Player(id, color, name); this.players.push(player); + console.log(player.name) } removePlayer(id) { @@ -47,14 +177,12 @@ class Game { } getPlayerByID(id) { - console.log(this.players) - console.log(id) const player = this.players.filter(obj => obj.id == id)[0] return player } } -var game = new Game(); +var game = new Game([18, 18]); var app = express() //Static resources server @@ -66,35 +194,38 @@ app.use(express.static(__dirname + '/www/'));var server = app.listen(8082, funct var io = require('socket.io')(server);/* Connection events */ io.on('connection', function(client) { console.log('User connected'); + client.emit('gameVars', {gridSize: game.gridSize, world: game.world.map}) + + client.on('disconnect', function(){ console.log(client.id + ' disconnected.') - game.removePlayer(client.id) - client.broadcast.emit('playerList', game.players) + game.getPlayerByID(client.id).kill(client) + // client.broadcast.emit('playerList', game.players) }) - client.on('joinGame', function(tank){ - game.addPlayer(client.id); + client.on('joinGame', function(data){ + console.log(game.players) console.log(client.id + ' joined the game'); - client.emit('gameVars', {gridSize: gridSize, world: game.world}) - client.broadcast.emit('playerList', game.players) - client.emit('playerList', game.players) + game.addPlayer(client.id, data.name); + // client.broadcast.emit('playerList', game.players) + // client.emit('playerList', game.players) }) client.on('leaveGame', function(tank){ console.log(client.id + ' disconnected.') - game.removePlayer(client.id) - client.broadcast.emit('playerList', game.players) + // game.getPlayerByID(cliend.id).kill() + game.getPlayerByID(client.id).kill(client) + // client.broadcast.emit('playerList', game.players) }) client.on('clickCanvas', function(data){ - const xu = data.tilePosition[0] - const yu = data.tilePosition[1] - game.world[xu][yu].structure = data.structure - game.world[xu][yu].owner = game.getPlayerByID(client.id).color; - // console.log(world[xu][yu].owner = game.getPlayerbyID(client.id)) - - client.broadcast.emit('sync',{world: game.world}) - client.emit('sync',{world: game.world}) + const xu = util.clamp(data.tilePosition[0], 0, game.gridSize[0]) + const yu = util.clamp(data.tilePosition[1], 0, game.gridSize[1]) + // game.world.map[xu][yu].structure = data.structure + game.world.click(data.structure, xu, yu, client) + // game.world.map[xu][yu].owner = game.getPlayerByID(client.id).color; + // client.broadcast.emit('sync',{world: game.world.map}) + // client.emit('sync',{world: game.world.map}) }) diff --git a/net.js b/net.js new file mode 100644 index 0000000..e69de29 diff --git a/tileinfo.js b/tileinfo.js new file mode 100644 index 0000000..d59a2fd --- /dev/null +++ b/tileinfo.js @@ -0,0 +1,18 @@ +const tileTypes = +[ +{name: "Grass", textureID: 0, buildPrice: 20, capturePrice:10, capturePower: 10, captureTime: 2, sellPrice:5, recapturePrice: 15, recapturePower: 100, recaptureTime: 10}, +{name: "Hills", textureID: 1, buildPrice: 20, capturePrice:10, capturePower: 10, captureTime: 2, sellPrice:5, recapturePrice: 15, recapturePower: 100, recaptureTime: 10}, +{name: "Sea", textureID: 2, buildPrice: 20, capturePrice:10, capturePower: 10, captureTime: 2, sellPrice:5, recapturePrice: 15, recapturePower: 100, recaptureTime: 10} +]; + +const structureTypes = +[ +{name: "Air", textureID:null, claimable: true, buildable: false, destroyable: false, maxQuantity:null, buildPrice: null, sellPrice: null, buildableOn: null}, +{name: "Rock", textureID:4, claimable: false, buildable: false, destroyable: false, maxQuantity:null, buildPrice: null, sellPrice: null, buildableOn: [0,1]}, +{name: "Town", textureID:32, claimable: false, buildable: true, destroyable: true, maxQuantity:10, buildPrice: 10, sellPrice: 5, buildableOn: [0,2]}, +{name: "City", textureID:33, claimable: false, buildable: true, destroyable: true, maxQuantity:10, buildPrice: 20, sellPrice: 10, buildableOn: [0,2]}, +{name: "Capitol", textureID:34, claimable: false, buildable: true, destroyable: false, maxQuantity:1, buildPrice: 30, sellPrice: 20, buildableOn: [0,2]}, +] + + +module.exports = {tileTypes, structureTypes} diff --git a/util.js b/util.js index b3f9e1a..102b476 100644 --- a/util.js +++ b/util.js @@ -1,5 +1,7 @@ function randomNumber(min, max) { return Math.floor(Math.random() * (max - min) + min); } - -module.exports = {randomNumber} +function clamp(number, min, max) { + return Math.max(min, Math.min(number, max)); +} +module.exports = {randomNumber, clamp} diff --git a/worldgen.js b/worldgen.js index e41ef1e..e53581b 100644 --- a/worldgen.js +++ b/worldgen.js @@ -7,7 +7,7 @@ function generateWorld(gridSize, perlinScale){ 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, owner: null} + tempWorld[x][y] = {type: 0, structure: 0, color: null, owner: null} } } @@ -32,9 +32,9 @@ function generateWorld(gridSize, perlinScale){ y = util.randomNumber(0,gridSize[1]); if (tempWorld[x][y].type != 1) { i++; - tempWorld[x][y].structure = 1 - } + tempWorld[x][y].structure = util.randomNumber(1,4) } +} return tempWorld; } module.exports = { generateWorld }; diff --git a/www/index.html b/www/index.html index 7bf2e98..1369abb 100644 --- a/www/index.html +++ b/www/index.html @@ -7,22 +7,28 @@ -

Uber Secret Project

-
- + + + diff --git a/www/script.js b/www/script.js index 80a780b..c5c45a9 100644 --- a/www/script.js +++ b/www/script.js @@ -3,19 +3,34 @@ const tileSize = 24; var gridSize; var cash = 99; var world +var tiles = [] + var canvas = document.getElementById('canvas'); var hud = document.getElementById('hud'); var ctx = canvas.getContext('2d'); var hctx = hud.getContext('2d'); var socket = io.connect('http://127.0.0.1:8082/'); -function joinGame(socket){ - socket.emit('joinGame', {}); +function joinGame(socket, room, nick){ + socket.emit('joinGame', {room, nick}); } function leaveGame(socket){ socket.emit('leaveGame', {}); } -joinGame(socket); + + + + +class Cursor { + constructor(){ + this.x = 0 + this.y = 0 + this.xold = 0 + this.yold = 0 + } + +} +var cursor = new Cursor(); window.onbeforeunload = function(){ socket.disconnect(); @@ -38,20 +53,43 @@ socket.on('sync', function (sync){ render() }) -window.onload = function () { +function loadSprites(){ + var spriteJank = document.getElementById('spriteJank'); + var ctxj = spriteJank.getContext('2d'); + var spriteSheet = new Image(); - // GET THE IMAGE. - var city = new Image(); - city.src = 'img/city.png'; - var rock = new Image(); - rock.src = 'img/rock.png'; - var grass = new Image(); - grass.src = 'img/grass.png' - var sea = new Image(); - sea.src = 'img/sea.png' - var hills = new Image(); - hills.src = 'img/hills.png' - tiles = [grass,hills,sea,rock,city]; + 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"}) +} + + + +window.onload = function () { + const form = document.getElementById('form'); + + form.addEventListener('submit', submit); + +loadSprites() @@ -59,7 +97,9 @@ window.onload = function () { function fill_canvas() { // CREATE CANVAS CONTEXT. - + hud.addEventListener('mousemove', e => { + mouseMoved(e) + }); hud.addEventListener("mousedown", function(e) { getMousePosition(canvas, e); @@ -70,7 +110,6 @@ function fill_canvas() { hud.height = canvas.height - render() updateUI(); } @@ -103,22 +142,26 @@ function render() { // DRAW THE IMAGE TO THE CANVAS. // Draw Structures switch (world[x][y].structure) { case (1): - ctx.drawImage(tiles[3], xu,yu) + ctx.drawImage(tiles[4], xu,yu) break; - case (2): - ctx.drawImage(tiles[4], xu,yu) + ctx.drawImage(tiles[32], xu,yu) + break; + case (3): + ctx.drawImage(tiles[33], xu,yu) + break; + case (4): + ctx.drawImage(tiles[34], xu,yu) break; - } // Draw Property overlays - if (world[x][y].owner != null){ + if (world[x][y].color != null){ ctx.beginPath(); - ctx.fillStyle = world[x][y].owner; + ctx.fillStyle = world[x][y].color; ctx.rect(xu, yu, tileSize, tileSize) - ctx.globalAlpha = 0.5; + ctx.globalAlpha = 0.6; ctx.fill() ctx.globalAlpha = 1; } @@ -136,18 +179,27 @@ function getMousePosition(canvas, event) { 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) + // const xu = Math.floor(x/tileSize) + // const yu = Math.floor(y/tileSize) + const xu = cursor.x + const yu = cursor.y // Convert canvas coordinates to usable coordinates within the coordinate system console.log("Click!") console.log(xu,yu) socket.emit('clickCanvas', {tilePosition: [xu,yu], structure: 2}); - // if (tile.type != 1 && tile.structure != 1 && cash > 10) { - // tile.structure = 2 - // cash = cash - 10; - - // } } +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 +} +} diff --git a/www/sheet.png b/www/sheet.png index 36a0791..d014407 100644 Binary files a/www/sheet.png and b/www/sheet.png differ diff --git a/www/style.css b/www/style.css index b388347..cef1b3d 100644 --- a/www/style.css +++ b/www/style.css @@ -1,4 +1,9 @@ canvas { + -webkit-user-select: none; /* Chrome all / Safari all */ + -moz-user-select: none; /* Firefox all */ + -ms-user-select: none; /* IE 10+ */ + -o-user-select: none; + user-select: none; image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; @@ -9,6 +14,10 @@ canvas { /* margin: auto; */ } +.hidden { + display: none; +} + .canvas1{ z-index: 0; position: fixed;