Modular Client (good)
This commit is contained in:
parent
80a21f626a
commit
1c032c40b2
|
@ -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
61
www/scripts/display/draw.js
Normal 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
4
www/scripts/display/html.js
Normal 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
24
www/scripts/display/tileRenderer.js
Normal 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
0
www/scripts/game/game.js
Normal file
27
www/scripts/mouse.js
Normal file
27
www/scripts/mouse.js
Normal 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
1
www/scripts/netcode.js
Normal file
|
@ -0,0 +1 @@
|
||||||
|
import * as main from './script.js';
|
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in a new issue