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>
<head>
<title></title>
<script src="http://localhost:35729/livereload.js" charset="utf-8"></script>
<script type="text/javascript" src="socket.io.js"></script>
<link rel="stylesheet" href="style.css">
</head>
@ -42,5 +42,5 @@
<input type="submit" id="submit" value="join">
</div>
</body>
<script src='script.js'></script>
<script src='scripts/script.js' type="module"></script>
</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 IP_ADDRESS = 'http://127.0.0.1:8082/'
const IP_ADDRESS = 'http://localhost:8082/'
var SERVER_CONNECTION = "disconnected"
var IN_GAME = false
const tileSize = 24;
const gridSize = [18, 18];
var world
var tiles = []
var button
var canvas = document.getElementById('canvas');
var hud = document.getElementById('hud');
var ctx = canvas.getContext('2d');
var hctx = hud.getContext('2d');
class Game {
constructor(tileSize, gridSize, world) {
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);
function joinGame(socket, 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(){
socket.disconnect();
world = []
game.world = []
}
socket.on('playerList', function(data){
@ -91,13 +98,14 @@ socket.on('inGame', function(data){
})
socket.on('sync', function (sync){
world = sync.world;
game.world = sync.world;
render()
})
function changeScene() {
document.getElementById('menu').style = "display: none;"
document.getElementById('container').style = ""
for(i=0;i < 5;i++) {
for(let i=0;i < 5;i++) {
let span = document.createElement('span')
span.className = "button"
let n;
@ -117,7 +125,7 @@ function changeScene() {
default:
n = 5
}
span.appendChild(tiles[n]);
span.appendChild(tileArray[n]);
document.getElementById("buttonBar").appendChild(span);
span.no = i;
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) {
const room = document.getElementById("room").value
const name = document.getElementById("name").value
@ -171,16 +155,13 @@ function clickSelector(e) {
}
window.onload = function () {
document.getElementById("submit").addEventListener("click", e => {
submit(e)
});
hud.addEventListener('mousemove', e => {
mouseMoved(e)
});
hud.addEventListener("mousedown", function(e)
{
@ -188,70 +169,19 @@ document.getElementById("submit").addEventListener("click", e => {
});
//Set canvases to be ready
canvas.width = tileSize*gridSize[0];
canvas.height = tileSize*gridSize[1];
canvas.width = game.tileSize*game.gridSize[0];
canvas.height = game.tileSize*game.gridSize[1];
hud.width = canvas.width
hud.height = canvas.height
//Load all sprites into memory
loadSprites()
}
function randomNumber(min, max) {
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) {
// Get mouse position on canvas
@ -270,15 +200,3 @@ function getMousePosition(canvas, event) {
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
}
}