Minesweeper progress: GUTTED

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

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

View file

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

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"

View file

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

View file

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

BIN
www/mine.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

View file

@ -3,7 +3,6 @@ import {tileArray} from './tileRenderer.js';
import { cursor } from '../interface/game/mouse.js' import { cursor } from '../interface/game/mouse.js'
import { ctx, hctx } from './html.js'; import { ctx, hctx } from './html.js';
import { game } from '../game/game.js' import { game } from '../game/game.js'
import * as animation from './visualLoop.js'
export function render() { export function render() {
renderTiles() renderTiles()
@ -19,17 +18,8 @@ export function renderTiles() { // DRAW THE IMAGE TO THE CANVAS.
const yu = y*tileSize; const yu = y*tileSize;
const tempWorld = game.world; const tempWorld = game.world;
// Draw buildings // Draw buildings
switch (tempWorld[x][y].type) {
case (0): ctx.drawImage(tileArray[tempWorld[x][y].type], xu,yu)
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;
}
// Draw Structures // Draw Structures
switch (tempWorld[x][y].structure) { switch (tempWorld[x][y].structure) {
@ -48,23 +38,14 @@ export function renderTiles() { // DRAW THE IMAGE TO THE CANVAS.
break; 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") console.log("image Rendered")
} }
export function renderHud(x, y) { export function renderHud(x, y) {
const tileSize = game.tileSize; const tileSize = game.tileSize;
hctx.clearRect(cursor.xold*tileSize, cursor.yold*tileSize, tileSize, 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)
} }

View file

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

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

View file

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

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

View file

@ -6,8 +6,8 @@ class Game {
this.status = status; this.status = status;
} }
reset() { 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])

View file

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

View file

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

View file

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

View file

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.3 KiB