<!DOCTYPE html>
<html lang="en_US">
<meta charset="UTF-8">
<!-- Login -->
<div id="signDiv" style='text-align:center;'>
Username: <input id="signDiv-username" type="text"></input><br>
Password: <input id="signDiv-password" type="password"></input><br>
<button id="signDiv-signIn">Sign In</button>
<button id="signDiv-signUp">Sign Up</button>
<hr>
<div>
<h3 style='color:red;'>Dev-Note:</h3>
ThePixelWorld requires to load some huge map files, in case u have trouble:<br>
Firefox dev tools network inspector truncates responses to 1MB by default.<br>
You can change or disable the limit by navigating to <b>about:config</b><br>
and changing <b>devtools.netmonitor.responseBodyLimit</b>.<br>
To disable the limit, set it to <b>0</b>.
<hr>
<h3>News:</h3>
I have some trouble while parsing tmx maps.<br>
currently we are using just a sprite file as "map" :D<br>
<h3>ToDo</h3>
to much, and to lazy to write it down *blush*
</div>
</div>
<!-- Game -->
<div id="gameDiv" style="display:none;">
<canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>
<div id="chat-text" style="width:500px; height:100px; overflow-y:scroll;"> <!--https://www.sitepoint.com/community/t/auto-scrolling-a-div-with-overflow-scroll-auto/2291--></div>
<form id="chat-form">
<input id="chat-input" type="text" style="width:500px;"></input>
</form>
</div>
<!-- loading socket.io library -->
<script src="https://cdn.socket.io/4.1.3/socket.io.js"></script>
<script src="client/consts.js"></script>
<script src="client/tmxloader.js"></script>
<script>
var socket = io();
var errno = 0;
socket.on('disconnect', function(){
errno = CONNECTION_LOST;
alert("Connection lost..." + err);
});
// Login
var signDiv = document.getElementById("signDiv");
var signDivUsername = document.getElementById("signDiv-username");
var signDivPassword = document.getElementById("signDiv-password");
var signDivSignIn = document.getElementById("signDiv-signIn");
var signDivSignUp = document.getElementById("signDiv-signUp");
signDivSignIn.onclick = function(){
socket.emit('signIn', {username:signDivUsername.value, password:signDivPassword.value})
}
signDivSignUp.onclick = function(){
socket.emit('signUp', {username:signDivUsername.value, password:signDivPassword.value})
}
socket.on('signInResponse', function(data){
if(data.success){
signDiv.style.display = 'none';
gameDiv.style.display = 'inline-block';
}
else
alert("Sign in unsuccessful.");
});
socket.on('signUpResponse', function(data){
if(data.success){
alert("Sign up successful.");
}
else
alert("Sign up unsuccessful.");
});
// Chat
var chatText = document.getElementById("chat-text");
var chatInput = document.getElementById("chat-input");
var chatForm = document.getElementById("chat-form");
socket.on('addToChat', function(data){
chatText.innerHTML += "<div>" + data + "</div>";
});
socket.on('evalAnswer', function(data){
console.log(data);
});
chatForm.onsubmit = function(e){
e.preventDefault();
if (chatInput.value[0] === "/")
socket.emit("evalServer", chatInput.value.slice(1));
else
socket.emit("sendMsgToServer", chatInput.value);
chatInput.value = "";
}
var TMXMap = function(mapId){
var self = new TMXLoader(mapId);
return self;
};
// Game
var Img = {};
Img.player = new Image();
Img.player.src = '/client/assets/sprites/races/human-female.png';
Img.bullet = new Image();
Img.bullet.src = '/client/assets/sprites/blaze.png';
Img.map = new Image();
Img.map.src = '/client/assets/sprites/races/human-female.png';
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';
var Player = function(initPack){
var self = {};
self.id = initPack.id;
self.number = initPack.number;
self.x = initPack.x;
self.y = initPack.y;
self.map = initPack.map;
self.hp = initPack.hp;
self.hpMax = initPack.hpMax;
self.score = initPack.score;
self.draw = function(){
var x = self.x - Player.list[selfId].x + WIDTH/2;
var y = self.y - Player.list[selfId].y + HEIGHT/2;
var hpWidth = 30 * self.hp / self.hpMax;
// hp-bar
ctx.fillStyle="rgba(255,0,0,0.8)";
ctx.fillRect(x - hpWidth/2, y - 40, hpWidth, 4);
// 'player'
var width = 64;
var height = 64;
ctx.drawImage(Img.player,
0,0,
width, height,
x-width/2, y-height/2,
width, height);
}
Player.list[self.id] = self;
return self;
};
Player.list = {};
var Bullet = function(initPack){
var self = {};
self.id = initPack.id;
self.number = initPack.number;
self.x = initPack.x;
self.y = initPack.y;
self.map = initPack.map;
self.draw = function(){
var width = Img.bullet.width;
var height = Img.bullet.height;
var x = self.x - Player.list[selfId].x + WIDTH/2;
var y = self.y - Player.list[selfId].y + HEIGHT/2;
ctx.drawImage(Img.bullet,
0,0,
width, height,
x-width/2, y-height/2,
width, height);
}
Bullet.list[self.id] = self;
return self;
};
Bullet.list = {};
// init (all)
var selfId = null;
socket.on('init', function(data){
for(var i = 0; i < data.player.length; i++){
new Player(data.player[i]);
}
for(var i = 0; i < data.bullet.length; i++){
new Bullet(data.bullet[i]);
}
if(data.selfId){
selfId = data.selfId;
new TMXMap(Player.list[selfId].map);
}
});
// update (diff)
socket.on('update', function(data){
for(var i = 0; i < data.player.length; i++){
var pack = data.player[i];
var p = Player.list[pack.id];
if(p){
if(pack.x !== undefined)
p.x = pack.x;
if(pack.y !== undefined)
p.y = pack.y;
if(pack.hp !== undefined)
p.hp = pack.hp;
if(pack.score !== undefined)
p.score = pack.score;
}
}
for(var i = 0; i < data.bullet.length; i++){
var pack = data.bullet[i];
var b = Bullet.list[pack.id];
if(b){
if(pack.x !== undefined)
b.x = pack.x;
if(pack.y !== undefined)
b.y = pack.y;
}
}
});
// remove
socket.on('remove', function(data){
for(var i = 0; i < data.player.length; i++){
delete Player.list[data.player[i]];
}
for(var i = 0; i < data.bullet.length; i++){
delete Bullet.list[data.bullet[i]];
}
});
setInterval(function(){
if(!selfId)
return;
ctx.clearRect(0,0,500,500);
drawMap();
//drawScore();
for(var i in Player.list){
Player.list[i].draw();
}
for(var i in Bullet.list){
Bullet.list[i].draw();
}
}, 1000/25);
var drawMap = function(){
var x = WIDTH/2 - Player.list[selfId].x;
var y= HEIGHT/2 - Player.list[selfId].y;
ctx.drawImage(Img.map,x,y);
}
var drawScore = function(){
ctx.fillStyle = 'green';
ctx.fillText(Player.list[selfId].score, 0, 30);
}
document.onkeydown = function(event){
//console.log(event.keyCode);
if(event.keyCode === 68 || event.keyCode === 39) // d
socket.emit('keyPress',{inputId: 'right', state: true});
else if(event.keyCode === 65 || event.keyCode === 37) // a
socket.emit('keyPress',{inputId: 'left', state: true});
else if(event.keyCode === 83 || event.keyCode === 40) // s
socket.emit('keyPress',{inputId: 'down', state: true});
else if(event.keyCode === 87 || event.keyCode === 38) // w
socket.emit('keyPress',{inputId: 'up', state: true});
}
document.onkeyup = function(event){
if(event.keyCode === 68 || event.keyCode === 39) // d
socket.emit('keyPress',{inputId: 'right', state: false});
else if(event.keyCode === 65 || event.keyCode === 37) // a
socket.emit('keyPress',{inputId: 'left', state: false});
else if(event.keyCode === 83 || event.keyCode === 40) // s
socket.emit('keyPress',{inputId: 'down', state: false});
else if(event.keyCode === 87 || event.keyCode === 38) // w
socket.emit('keyPress',{inputId: 'up', state: false});
}
document.onmousedown = function(event){
socket.emit('keyPress',{inputId: 'attack', state: true});
}
document.onmouseup = function(event){
socket.emit('keyPress',{inputId: 'attack', state: false});
}
document.onmousemove = function(event){
var x = -250 + event.clientX - 8;
var y = -250 + event.clientY - 8;
var angle = Math.atan2(y, x) / Math.PI * 180;
socket.emit('keyPress',{inputId: 'mouseAngle', state: angle});
}
</script>
</html>
