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

Modular Client (good)

Browse source
This commit is contained in:
Alexander Bass 2022-06-19 17:54:34 -04:00
parent 80a21f626a
commit 1c032c40b2
8 changed files with 152 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
www/index.html
View file

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<title></title> <title></title>
<script src="http://localhost:35729/livereload.js" charset="utf-8"></script>
<script type="text/javascript" src="socket.io.js"></script> <script type="text/javascript" src="socket.io.js"></script>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
@ -42,5 +42,5 @@
<input type="submit" id="submit" value="join"> <input type="submit" id="submit" value="join">
</div> </div>
</body> </body>
<script src='script.js'></script> <script src='scripts/script.js' type="module"></script>
</html> </html>

61
www/scripts/display/draw.js Normal file
View file

@ -0,0 +1,61 @@
import * as main from './../script.js';
import {tileArray} from './tileRenderer.js';
import { cursor } from './../mouse.js';
import { canvas, hud, ctx, hctx } from './html.js';
export function renderTiles(tileSize, gridSize, world) { // 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;
// Draw buildings
switch (world[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;
}
// Draw Structures
switch (world[x][y].structure) {
case (1):
ctx.drawImage(tileArray[4], xu,yu)
break;
case (2):
ctx.drawImage(tileArray[32], xu,yu)
break;
case (3):
ctx.drawImage(tileArray[33], xu,yu)
break;
case (4):
ctx.drawImage(tileArray[34], xu,yu)
break;
}
// Draw Property overlays
if (world[x][y].color != null){
ctx.beginPath();
ctx.fillStyle = world[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 = main.game.tileSize;
hctx.clearRect(cursor.xold*tileSize, cursor.yold*tileSize, tileSize, tileSize)
hctx.drawImage(tileArray[80], x*tileSize,y*tileSize)
}

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

@ -0,0 +1,4 @@
export var canvas = document.getElementById('canvas');
export var ctx = canvas.getContext('2d');
export var hud = document.getElementById('hud');
export var hctx = hud.getContext('2d');

24
www/scripts/display/tileRenderer.js Normal file
View file

@ -0,0 +1,24 @@
export var tileArray = loadSprites();
export function loadSprites() {
var tiles = [];
var spriteJank = document.getElementById('spriteJank');
var ctxj = spriteJank.getContext('2d');
var spriteSheet = new Image();
spriteSheet.src = '/sheet.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)
var tmp = new Image();
tmp.src = spriteJank.toDataURL();
ctxj.clearRect(0, 0, 24, 24);
tiles.push(tmp)
}
}
}
spriteJank.remove();
return tiles;
}

0
www/scripts/game/game.js Normal file
View file

27
www/scripts/mouse.js Normal file
View file

@ -0,0 +1,27 @@
class Cursor {
constructor(){
this.x = 0
this.y = 0
this.xold = 0
this.yold = 0
}
}
export var cursor = new Cursor();
hud.addEventListener('mousemove', e => {
mouseMoved(e)
});
function mouseMoved(event) {
const x = Math.floor(event.offsetX/main.game.tileSize)
const y = Math.floor(event.offsetY/main.game.tileSize)
if (cursor.xold != x || cursor.yold != y) {
cursor.x = x
cursor.y = y
renderHud(x, y)
cursor.xold = x
cursor.yold = y
}
}

1
www/scripts/netcode.js Normal file
View file

@ -0,0 +1 @@
import * as main from './script.js';

148
www/script.js → www/scripts/script.js
View file

@ -1,18 +1,35 @@
import * as draw from './display/draw.js';
import { cursor } from './mouse.js'
import { tileArray } from './display/tileRenderer.js'
// const perlinScale = 3; // const perlinScale = 3;
const IP_ADDRESS = 'http://127.0.0.1:8082/' const IP_ADDRESS = 'http://localhost:8082/'
var SERVER_CONNECTION = "disconnected" var SERVER_CONNECTION = "disconnected"
var IN_GAME = false var IN_GAME = false
const tileSize = 24;
const gridSize = [18, 18];
var world var world
var tiles = []
var button var button
var canvas = document.getElementById('canvas');
var hud = document.getElementById('hud'); class Game {
var ctx = canvas.getContext('2d'); constructor(tileSize, gridSize, world) {
var hctx = hud.getContext('2d'); this.tileSize = tileSize;
this.gridSize = gridSize;
this.world = world;
}
}
export var game = new Game(24, [18, 18])
function render() {
draw.renderTiles(game.tileSize, game.gridSize, game.world)
}
var socket = io.connect(IP_ADDRESS); var socket = io.connect(IP_ADDRESS);
function joinGame(socket, data){ function joinGame(socket, data){
socket.emit('joinGame', data); socket.emit('joinGame', data);
@ -65,20 +82,10 @@ function updateConnectionStatus() {
} }
} }
class Cursor {
constructor(){
this.x = 0
this.y = 0
this.xold = 0
this.yold = 0
}
}
var cursor = new Cursor();
window.onbeforeunload = function(){ window.onbeforeunload = function(){
socket.disconnect(); socket.disconnect();
world = [] game.world = []
} }
socket.on('playerList', function(data){ socket.on('playerList', function(data){
@ -91,13 +98,14 @@ socket.on('inGame', function(data){
}) })
socket.on('sync', function (sync){ socket.on('sync', function (sync){
world = sync.world; game.world = sync.world;
render() render()
}) })
function changeScene() { function changeScene() {
document.getElementById('menu').style = "display: none;" document.getElementById('menu').style = "display: none;"
document.getElementById('container').style = "" document.getElementById('container').style = ""
for(i=0;i < 5;i++) { for(let i=0;i < 5;i++) {
let span = document.createElement('span') let span = document.createElement('span')
span.className = "button" span.className = "button"
let n; let n;
@ -117,7 +125,7 @@ function changeScene() {
default: default:
n = 5 n = 5
} }
span.appendChild(tiles[n]); span.appendChild(tileArray[n]);
document.getElementById("buttonBar").appendChild(span); document.getElementById("buttonBar").appendChild(span);
span.no = i; span.no = i;
span.addEventListener('click', e => { span.addEventListener('click', e => {
@ -128,30 +136,6 @@ function changeScene() {
function loadSprites() {
var spriteJank = document.getElementById('spriteJank');
var ctxj = spriteJank.getContext('2d');
var spriteSheet = new Image();
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)
}
}
}
spriteJank.remove();
}
function submit(event) { function submit(event) {
const room = document.getElementById("room").value const room = document.getElementById("room").value
const name = document.getElementById("name").value const name = document.getElementById("name").value
@ -171,16 +155,13 @@ function clickSelector(e) {
} }
window.onload = function () { window.onload = function () {
document.getElementById("submit").addEventListener("click", e => { document.getElementById("submit").addEventListener("click", e => {
submit(e) submit(e)
}); });
hud.addEventListener('mousemove', e => {
mouseMoved(e)
});
hud.addEventListener("mousedown", function(e) hud.addEventListener("mousedown", function(e)
{ {
@ -188,70 +169,19 @@ document.getElementById("submit").addEventListener("click", e => {
}); });
//Set canvases to be ready //Set canvases to be ready
canvas.width = tileSize*gridSize[0]; canvas.width = game.tileSize*game.gridSize[0];
canvas.height = tileSize*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
//Load all sprites into memory //Load all sprites into memory
loadSprites()
} }
function randomNumber(min, max) { function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min) + min); 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;
// Draw buildings
switch (world[x][y].type) {
case (0):
ctx.drawImage(tiles[0], xu,yu)
break;
case (1):
ctx.drawImage(tiles[2], xu,yu)
break;
case (2):
ctx.drawImage(tiles[1], xu,yu)
break;
}
// Draw Structures
switch (world[x][y].structure) {
case (1):
ctx.drawImage(tiles[4], xu,yu)
break;
case (2):
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].color != null){
ctx.beginPath();
ctx.fillStyle = world[x][y].color;
ctx.rect(xu, yu, tileSize, tileSize)
ctx.globalAlpha = 0.6;
ctx.fill()
ctx.globalAlpha = 1;
}
}
}
console.log("image Rendered")
}
function getMousePosition(canvas, event) { function getMousePosition(canvas, event) {
// Get mouse position on canvas // Get mouse position on canvas
@ -270,15 +200,3 @@ function getMousePosition(canvas, event) {
socket.emit('clickCanvas', {tilePosition: [xu,yu], structure: button*1}); socket.emit('clickCanvas', {tilePosition: [xu,yu], structure: button*1});
} }
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
}
}