Alexander/MultiplayerMinesweeper
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Good enough for now

Browse source
This commit is contained in:
A Bass 2022-04-20 23:23:51 -04:00
parent ef376178df
commit 9f1bf7eb4d
10 changed files with 287 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
Assets/Sheet.xcf
View file

Binary file not shown.

183
index.js
View file

@ -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})
})

0
net.js Normal file
View file

18
tileinfo.js Normal file
View file

@ -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}

6
util.js
View file

@ -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}

6
worldgen.js
View file

@ -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 };

18
www/index.html
View file

@ -7,22 +7,28 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Uber Secret Project</h1>
<div class="container">
<canvas class="" id="spritejank" width=24 height=24></canvas>
<div class="container" id="container" style="display: none;">
<h1>No Longer Secret Project</h1>
<canvas class="hidden" id="spriteJank" width=24 height=24></canvas>
<div class="wrapper">
<div class="canvasStack">
<canvas class="canvas1" id="canvas" width=0 height=0></canvas>
<canvas class="canvas2" id="hud" width="0" height="0"></canvas>
<canvas oncontextmenu="return false;" class="canvas1" id="canvas" width=0 height=0></canvas>
<canvas oncontextmenu="return false;" class="canvas2" id="hud" width="0" height="0"></canvas>
</div>
</div>
<div class="right">
<p>Info</p><br>
<p id="cash">$0</p>
</div>
</div>
<div class="menu" id="menu">
<form id="form">
<input type="text" id="room" value="room">
<input type="submit" id="join" value="join">
</form>
</div>
</body>
<script src='script.js'></script>

116
www/script.js
View file

@ -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
}
}

BIN
www/sheet.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

9
www/style.css
View file

@ -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;