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

Minesweeper progress: GUTTED

Browse source
This commit is contained in:
Alexander Bass 2022-06-21 10:46:34 -04:00
parent f95b91a64c
commit 004a705f90
19 changed files with 58 additions and 519 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
TODO.md
View file

@ -1,42 +0,0 @@
# Project To Do list
## Short Term
- [] Kill socket when browser closes/inactive.
- [] Make client get textures from single sprite sheet
## Mid Term
- [] Implement Rooms with different games on server
- [] Add room selection menu on client
- [] Implement Players
- [] Player Names
- [] Player Colors
- [] Prevent Duplicate player info
## Long Term
- [] Power and money system for players
- [] Add land ownership
- [] Land Claiming
- [] Difficulty to claim hills and seas
- [] Create bouy flag sprite
- [] Make differentiation between land owned by different players
- [] System to have animated widgets overtop of the canvas.
- [] Explosion
- [] Selection cursor
- [] Color for different land status (claimed/open/unclaimable)
- [] Create spites for classes of buildings for economy.
- [x] Factory
- [x] Farmland/town
- [] Fishing area
- [] Building selection menu
## Longer Term
- [] Add tests to ensure features act as they should
- [] Handle player death/leaving
- [] Dead player's resources go to killer with some tax.
- [] Leaving player's resources go to player
## Finishing Touches
- [] Sounds
- [] Graphics Redo
- [] Fancy webpage decorations
## Maybe
- [] Chat

14
index.js
View file

@ -2,9 +2,8 @@ const worldgen = require("./worldgen.js")
const util = require("./util.js")
const log = require("./log.js")
const {performance} = require('perf_hooks');
const gridSize = [18, 18];
const gridSize = [32, 32];
const perlinScale = 4;
const startTime = performance.now()
var express = require('express');
log.setMode(0);
process.title = "Server"
@ -83,7 +82,7 @@ class Game {
constructor(name) {
this.name = name;
this.players = [];
this.world = worldgen.generateWorld(gridSize, perlinScale);
this.world = worldgen.generateWorld(gridSize);
}
addPlayer(id, name) {
@ -109,14 +108,14 @@ class Game {
getAllIDs() {
let ids = []
for (i = 0; i < this.players.length; i++) {
for (let i = 0; i < this.players.length; i++) {
ids.push(this.players[i].id)
}
return ids
}
getAllNames() {
let names = []
for (i = 0; i < this.players.length; i++) {
for (let i = 0; i < this.players.length; i++) {
names.push(this.players[i].name)
}
return names
@ -154,7 +153,7 @@ io.on('connection', function(client) {
log.log(`${client.id} joined the game as ${data.name} requesting to join room: ${data.room}`, 'FgMagenta');
client.emit('inGame', true)
})
client.on('leaveGame', function(tank){
client.on('leaveGame', function(data){
log.log(client.id + ' disconnected.')
client.game.removePlayer(client.id)
io.to(client.game.name).emit('playerList', client.game.players)
@ -163,16 +162,13 @@ io.on('connection', function(client) {
client.on('clickCanvas', function(data){
if (!server.getAllIDs().includes(client.id)) return client.illegalAction(1)
const room = client.game.name
const xu = util.clamp(data.tilePosition[0], 0, gridSize[0])
const yu = util.clamp(data.tilePosition[1], 0, gridSize[1])
if (!Number.isInteger(xu) || !Number.isInteger(yu)) return client.illegalAction(23)
client.game.world[xu][yu].structure = data.structure
client.game.world[xu][yu].owner = client.game.getPlayerByID(client.id).color;
io.to(client.game.name).emit('sync',{world: client.game.world})
// client.emit('sync',{world: client.game.world})
})

311
perlin.js
View file

@ -1,311 +0,0 @@
/*
* A speed-improved perlin and simplex noise algorithms for 2D.
*
* Based on example code by Stefan Gustavson (stegu@itn.liu.se).
* Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
* Better rank ordering method by Stefan Gustavson in 2012.
* Converted to Javascript by Joseph Gentle.
* Converted to NPM Package by Jacob Schneider
*
* Version 2012-03-09
*
* This code was placed in the public domain by its original author,
* Stefan Gustavson. You may use it as you see fit, but
* attribution is appreciated.
*
*/
module.exports = (function(global){
var functions = global.noise = {};
function Grad(x, y, z) {
this.x = x; this.y = y; this.z = z;
}
Grad.prototype.dot2 = function(x, y) {
return this.x*x + this.y*y;
};
Grad.prototype.dot3 = function(x, y, z) {
return this.x*x + this.y*y + this.z*z;
};
var grad3 = [new Grad(1,1,0),new Grad(-1,1,0),new Grad(1,-1,0),new Grad(-1,-1,0),
new Grad(1,0,1),new Grad(-1,0,1),new Grad(1,0,-1),new Grad(-1,0,-1),
new Grad(0,1,1),new Grad(0,-1,1),new Grad(0,1,-1),new Grad(0,-1,-1)];
var p = [151,160,137,91,90,15,
131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,
190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,
88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,
77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,
102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,
135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,
5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,
223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9,
129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228,
251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107,
49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254,
138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
// To remove the need for index wrapping, double the permutation table length
var perm = new Array(512);
var gradP = new Array(512);
// This isn't a very good seeding function, but it works ok. It supports 2^16
// different seed values. Write something better if you need more seeds.
functions.seed = function(seed) {
if(seed > 0 && seed < 1) {
// Scale the seed out
seed *= 65536;
}
seed = Math.floor(seed);
if(seed < 256) {
seed |= seed << 8;
}
for(var i = 0; i < 256; i++) {
var v;
if (i & 1) {
v = p[i] ^ (seed & 255);
} else {
v = p[i] ^ ((seed>>8) & 255);
}
perm[i] = perm[i + 256] = v;
gradP[i] = gradP[i + 256] = grad3[v % 12];
}
};
functions.seed(0);
/*
for(var i=0; i<256; i++) {
perm[i] = perm[i + 256] = p[i];
gradP[i] = gradP[i + 256] = grad3[perm[i] % 12];
}*/
// Skewing and unskewing factors for 2, 3, and 4 dimensions
var F2 = 0.5*(Math.sqrt(3)-1);
var G2 = (3-Math.sqrt(3))/6;
var F3 = 1/3;
var G3 = 1/6;
// 2D simplex noise
functions.simplex2 = function(xin, yin) {
var n0, n1, n2; // Noise contributions from the three corners
// Skew the input space to determine which simplex cell we're in
var s = (xin+yin)*F2; // Hairy factor for 2D
var i = Math.floor(xin+s);
var j = Math.floor(yin+s);
var t = (i+j)*G2;
var x0 = xin-i+t; // The x,y distances from the cell origin, unskewed.
var y0 = yin-j+t;
// For the 2D case, the simplex shape is an equilateral triangle.
// Determine which simplex we are in.
var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
if(x0>y0) { // lower triangle, XY order: (0,0)->(1,0)->(1,1)
i1=1; j1=0;
} else { // upper triangle, YX order: (0,0)->(0,1)->(1,1)
i1=0; j1=1;
}
// A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
// a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
// c = (3-sqrt(3))/6
var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
var y1 = y0 - j1 + G2;
var x2 = x0 - 1 + 2 * G2; // Offsets for last corner in (x,y) unskewed coords
var y2 = y0 - 1 + 2 * G2;
// Work out the hashed gradient indices of the three simplex corners
i &= 255;
j &= 255;
var gi0 = gradP[i+perm[j]];
var gi1 = gradP[i+i1+perm[j+j1]];
var gi2 = gradP[i+1+perm[j+1]];
// Calculate the contribution from the three corners
var t0 = 0.5 - x0*x0-y0*y0;
if(t0<0) {
n0 = 0;
} else {
t0 *= t0;
n0 = t0 * t0 * gi0.dot2(x0, y0); // (x,y) of grad3 used for 2D gradient
}
var t1 = 0.5 - x1*x1-y1*y1;
if(t1<0) {
n1 = 0;
} else {
t1 *= t1;
n1 = t1 * t1 * gi1.dot2(x1, y1);
}
var t2 = 0.5 - x2*x2-y2*y2;
if(t2<0) {
n2 = 0;
} else {
t2 *= t2;
n2 = t2 * t2 * gi2.dot2(x2, y2);
}
// Add contributions from each corner to get the final noise value.
// The result is scaled to return values in the interval [-1,1].
return 70 * (n0 + n1 + n2);
};
// 3D simplex noise
functions.simplex3 = function(xin, yin, zin) {
var n0, n1, n2, n3; // Noise contributions from the four corners
// Skew the input space to determine which simplex cell we're in
var s = (xin+yin+zin)*F3; // Hairy factor for 2D
var i = Math.floor(xin+s);
var j = Math.floor(yin+s);
var k = Math.floor(zin+s);
var t = (i+j+k)*G3;
var x0 = xin-i+t; // The x,y distances from the cell origin, unskewed.
var y0 = yin-j+t;
var z0 = zin-k+t;
// For the 3D case, the simplex shape is a slightly irregular tetrahedron.
// Determine which simplex we are in.
var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
if(x0 >= y0) {
if(y0 >= z0) { i1=1; j1=0; k1=0; i2=1; j2=1; k2=0; }
else if(x0 >= z0) { i1=1; j1=0; k1=0; i2=1; j2=0; k2=1; }
else { i1=0; j1=0; k1=1; i2=1; j2=0; k2=1; }
} else {
if(y0 < z0) { i1=0; j1=0; k1=1; i2=0; j2=1; k2=1; }
else if(x0 < z0) { i1=0; j1=1; k1=0; i2=0; j2=1; k2=1; }
else { i1=0; j1=1; k1=0; i2=1; j2=1; k2=0; }
}
// A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
// a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
// a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
// c = 1/6.
var x1 = x0 - i1 + G3; // Offsets for second corner
var y1 = y0 - j1 + G3;
var z1 = z0 - k1 + G3;
var x2 = x0 - i2 + 2 * G3; // Offsets for third corner
var y2 = y0 - j2 + 2 * G3;
var z2 = z0 - k2 + 2 * G3;
var x3 = x0 - 1 + 3 * G3; // Offsets for fourth corner
var y3 = y0 - 1 + 3 * G3;
var z3 = z0 - 1 + 3 * G3;
// Work out the hashed gradient indices of the four simplex corners
i &= 255;
j &= 255;
k &= 255;
var gi0 = gradP[i+ perm[j+ perm[k ]]];
var gi1 = gradP[i+i1+perm[j+j1+perm[k+k1]]];
var gi2 = gradP[i+i2+perm[j+j2+perm[k+k2]]];
var gi3 = gradP[i+ 1+perm[j+ 1+perm[k+ 1]]];
// Calculate the contribution from the four corners
var t0 = 0.6 - x0*x0 - y0*y0 - z0*z0;
if(t0<0) {
n0 = 0;
} else {
t0 *= t0;
n0 = t0 * t0 * gi0.dot3(x0, y0, z0); // (x,y) of grad3 used for 2D gradient
}
var t1 = 0.6 - x1*x1 - y1*y1 - z1*z1;
if(t1<0) {
n1 = 0;
} else {
t1 *= t1;
n1 = t1 * t1 * gi1.dot3(x1, y1, z1);
}
var t2 = 0.6 - x2*x2 - y2*y2 - z2*z2;
if(t2<0) {
n2 = 0;
} else {
t2 *= t2;
n2 = t2 * t2 * gi2.dot3(x2, y2, z2);
}
var t3 = 0.6 - x3*x3 - y3*y3 - z3*z3;
if(t3<0) {
n3 = 0;
} else {
t3 *= t3;
n3 = t3 * t3 * gi3.dot3(x3, y3, z3);
}
// Add contributions from each corner to get the final noise value.
// The result is scaled to return values in the interval [-1,1].
return 32 * (n0 + n1 + n2 + n3);
};
// ##### Perlin noise stuff
function fade(t) {
return t*t*t*(t*(t*6-15)+10);
}
function lerp(a, b, t) {
return (1-t)*a + t*b;
}
// 2D Perlin Noise
functions.perlin2 = function(x, y) {
// Find unit grid cell containing point
var X = Math.floor(x), Y = Math.floor(y);
// Get relative xy coordinates of point within that cell
x = x - X; y = y - Y;
// Wrap the integer cells at 255 (smaller integer period can be introduced here)
X = X & 255; Y = Y & 255;
// Calculate noise contributions from each of the four corners
var n00 = gradP[X+perm[Y]].dot2(x, y);
var n01 = gradP[X+perm[Y+1]].dot2(x, y-1);
var n10 = gradP[X+1+perm[Y]].dot2(x-1, y);
var n11 = gradP[X+1+perm[Y+1]].dot2(x-1, y-1);
// Compute the fade curve value for x
var u = fade(x);
// Interpolate the four results
return lerp(
lerp(n00, n10, u),
lerp(n01, n11, u),
fade(y));
};
// 3D Perlin Noise
functions.perlin3 = function(x, y, z) {
// Find unit grid cell containing point
var X = Math.floor(x), Y = Math.floor(y), Z = Math.floor(z);
// Get relative xyz coordinates of point within that cell
x = x - X; y = y - Y; z = z - Z;
// Wrap the integer cells at 255 (smaller integer period can be introduced here)
X = X & 255; Y = Y & 255; Z = Z & 255;
// Calculate noise contributions from each of the eight corners
var n000 = gradP[X+ perm[Y+ perm[Z ]]].dot3(x, y, z);
var n001 = gradP[X+ perm[Y+ perm[Z+1]]].dot3(x, y, z-1);
var n010 = gradP[X+ perm[Y+1+perm[Z ]]].dot3(x, y-1, z);
var n011 = gradP[X+ perm[Y+1+perm[Z+1]]].dot3(x, y-1, z-1);
var n100 = gradP[X+1+perm[Y+ perm[Z ]]].dot3(x-1, y, z);
var n101 = gradP[X+1+perm[Y+ perm[Z+1]]].dot3(x-1, y, z-1);
var n110 = gradP[X+1+perm[Y+1+perm[Z ]]].dot3(x-1, y-1, z);
var n111 = gradP[X+1+perm[Y+1+perm[Z+1]]].dot3(x-1, y-1, z-1);
// Compute the fade curve value for x, y, z
var u = fade(x);
var v = fade(y);
var w = fade(z);
// Interpolate
return lerp(
lerp(
lerp(n000, n100, u),
lerp(n001, n101, u), w),
lerp(
lerp(n010, n110, u),
lerp(n011, n111, u), w),
v);
};
return functions;
})(this);

18
tileinfo.js
View file

@ -1,18 +0,0 @@
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}

10
tt.js
View file

@ -1,10 +0,0 @@
let os = require('os');
var i = 0;
var j = 0;
var jh = 0
process.stdout.write('Hello World' + os.EOL);
console.log(Boolean(process.stdout.isTTY))
process.title = "Server"

39
worldgen.js
View file

@ -1,5 +1,5 @@
var noise = require('./perlin.js');
const util = require("./util.js")
const log = require("./log.js")
function generateWorld(gridSize, perlinScale){
let x, y = 0
@ -7,34 +7,35 @@ 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, color: null, owner: null}
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++){
const value = util.randomNumber(0, 3);
var n;
switch (value) {
case 1:
n = 0
break;
case 2:
n = 6
break;
case 1:
n = 0
break;
default:
log.log("OTHER")
n = 7
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
}
tempWorld[x][y].type = n
}
}
for (i = 0; i < gridSize[0]*gridSize[1]/15; i){
x = util.randomNumber(0,gridSize[0]);
y = util.randomNumber(0,gridSize[1]);
if (tempWorld[x][y].type != 1) {
i++;
tempWorld[x][y].structure = util.randomNumber(1,4)
}
}
return tempWorld;
}
module.exports = { generateWorld };

15
www/index.html
View file

@ -13,25 +13,24 @@
<h1>Project</h1>
<div class="wrapper" id="wrapper">
<div class="top">
<!-- <div class="top"> -->
<h4 id="status">Connection Status</h4>
</div>
<span class ="left"><p>left</p></span>
<!-- </div> -->
<!-- <span class ="left"><p>left</p></span> -->
<span class="canvasStack">
<canvas oncontextmenu="return false;" class="canvas1" id="canvas" width=0 height=0></canvas>
<canvas oncontextmenu="return false;" class="canvas2" id="parti" width=0 height=0></canvas>
<canvas oncontextmenu="return false;" class="canvas3" id="hud" width="0" height="0"></canvas>
</span>
<span class ="right"><p>right</p></span>
<!-- <span class ="right"><p>right</p></span> -->
<div class="bottom">
<div class="buttonBar" id="buttonBar">
<!-- <div class="bottom"> -->
<!-- <div class="buttonBar" id="buttonBar"> -->
<!-- <span class="button" no="1"></span>
<span class="button" no="2"></span>
<span class="button" no="3"></span>
<span class="button" no="4"></span>
<span class="button" no="null"></span> -->
</div>
<!-- </div> -->
</div>
</div>

BIN
www/mine.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 64 KiB

27
www/scripts/display/draw.js
View file

@ -3,7 +3,6 @@ import {tileArray} from './tileRenderer.js';
import { cursor } from '../interface/game/mouse.js'
import { ctx, hctx } from './html.js';
import { game } from '../game/game.js'
import * as animation from './visualLoop.js'
export function render() {
renderTiles()
@ -19,17 +18,8 @@ export function renderTiles() { // DRAW THE IMAGE TO THE CANVAS.
const yu = y*tileSize;
const tempWorld = game.world;
// Draw buildings
switch (tempWorld[x][y].type) {
case (0):
ctx.drawImage(tileArray[0], xu,yu)
break;
case (1):
ctx.drawImage(tileArray[2], xu,yu)
break;
case (2):
ctx.drawImage(tileArray[1], xu,yu)
break;
}
ctx.drawImage(tileArray[tempWorld[x][y].type], xu,yu)
// Draw Structures
switch (tempWorld[x][y].structure) {
@ -48,23 +38,14 @@ export function renderTiles() { // DRAW THE IMAGE TO THE CANVAS.
break;
}
// Draw Property overlays
if (tempWorld[x][y].color != null){
ctx.beginPath();
ctx.fillStyle = tempWorld[x][y].color;
ctx.rect(xu, yu, tileSize, tileSize)
ctx.globalAlpha = 0.6;
ctx.fill()
ctx.globalAlpha = 1;
}
}
}
console.log("image Rendered")
}
export function renderHud(x, y) {
const tileSize = game.tileSize;
hctx.clearRect(cursor.xold*tileSize, cursor.yold*tileSize, tileSize, tileSize)
hctx.drawImage(tileArray[80], x*tileSize,y*tileSize)
hctx.drawImage(tileArray[4], x*tileSize,y*tileSize)
}

4
www/scripts/display/html.js
View file

@ -4,12 +4,8 @@ export var canvas = document.getElementById('canvas');
export var ctx = canvas.getContext('2d');
export var hud = document.getElementById('hud');
export var hctx = hud.getContext('2d');
export var parti = document.getElementById('parti');
export var pctx = parti.getContext('2d');
canvas.width = game.tileSize*game.gridSize[0];
canvas.height = game.tileSize*game.gridSize[1];
hud.width = canvas.width;
hud.height = canvas.height;
parti.width = canvas.width;
parti.height = canvas.height;

26
www/scripts/display/particle.js
View file

@ -1,26 +0,0 @@
class particleHandler {
constructor() {
}
new(type, location) {
const id;
return id;
}
destroy(id) {
}
}
class particle {
constructor(id, type, location, timeout = 6) {
this.id = id;
this.type = type;
this.location = location;
this.timeout = timeout;
}
}

16
www/scripts/display/tileRenderer.js
View file

@ -1,20 +1,24 @@
import {game} from "/scripts/game/game.js"
export var tileArray = loadSprites();
export function loadSprites() {
var tiles = [];
var spriteJank = document.getElementById('spriteJank');
spriteJank.width = game.tileSize;
spriteJank.height = game.tileSize;
var ctxj = spriteJank.getContext('2d');
var spriteSheet = new Image();
spriteSheet.src = '/sheet.png'
spriteSheet.src = '/mine.png'
spriteSheet.onload = function() {
for (let y = 0; y < 16; y++) {
for (let x = 0; x < 16; x++) {
ctxj.drawImage(spriteSheet, -x*24,-y*24)
const tileSize = game.tileSize;
for (let y = 0; y < 8; y++) {
for (let x = 0; x < 8; x++) {
ctxj.drawImage(spriteSheet, -x*tileSize,-y*tileSize)
var tmp = new Image();
tmp.src = spriteJank.toDataURL();
ctxj.clearRect(0, 0, 24, 24);
ctxj.clearRect(0, 0, tileSize, tileSize);
tiles.push(tmp)
}
}

30
www/scripts/display/visualLoop.js
View file

@ -1,30 +0,0 @@
import {render } from "./draw.js"
var RUNNING = false;
var animationStage = 0;
export function start() {
if (!RUNNING) {
RUNNING = true;
loop();
}
}
export function stop() {
RUNNING = false
}
export function get() {
return animationStage
}
async function loop() {
if (RUNNING === true)
setTimeout(function(){
if (animationStage < 6) {
animationStage = animationStage + 1;
} else {
animationStage = 0;
}
render()
loop();
}, (250));
}

4
www/scripts/game/game.js
View file

@ -6,8 +6,8 @@ class Game {
this.status = status;
}
reset() {
game = new Game(24, [18, 18], null, false);
game = new Game(16, [32, 32], null, false);
}
}
export var game = new Game(24, [18, 18])
export var game = new Game(16, [32, 32])

7
www/scripts/interface/game/mouse.js
View file

@ -24,12 +24,13 @@ hud.addEventListener("mousedown", function(e)
});
function mouseMoved(event) {
const x = Math.floor(event.offsetX/game.tileSize)
const y = Math.floor(event.offsetY/game.tileSize)
const tileSize = game.tileSize
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
renderHud(x, y)
// renderHud(x, y)
cursor.xold = x
cursor.yold = y
}

8
www/scripts/interface/game/picker.js
View file

@ -18,16 +18,16 @@ for(let i=0;i < 5;i++) {
let n;
switch (i) {
case (1):
n = 4
n = 1
break;
case (2):
n = 32
n = 2
break;
case (3):
n = 33
n = 3
break;
case (4):
n = 34
n = 4
break;
default:
n = 5

4
www/scripts/interface/scene.js
View file

@ -4,11 +4,11 @@ export function changeScene(scene) {
if (scene == "game") {
document.getElementById('menu').style = "display: none;"
document.getElementById('container').style = ""
picker.create();
// picker.create();
}
if (scene == "mainmenu") {
document.getElementById('menu').style = ""
document.getElementById('container').style = "display: none;"
picker.destroy();
// picker.destroy();
}
};

2
www/scripts/net/netcode.js
View file

@ -4,7 +4,6 @@ import {game} from "/scripts/game/game.js"
import {render} from "/scripts/display/draw.js"
import { changeScene } from "/scripts/interface/scene.js"
import { illegalAction } from "/scripts/interface/common/illegalaction.js"
import * as animation from '../display/visualLoop.js'
export var socket = io.connect(env.IP_ADDRESS);
@ -49,7 +48,6 @@ socket.on('playerList', function(data){
socket.on('inGame', function(data){
if (!game.status) {changeScene("game")}
game.status = true;
animation.start();
})
socket.on('sync', function (sync){

BIN
www/sheet.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.3 KiB