raphael/pirate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add moving guy and fix some bugs

Browse Source
This commit is contained in:
rofl256 2017-06-30 02:19:44 +02:00
parent c31da4be28
commit d4bdf73a2d
3 changed files with 126 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
css/main.css
View File

@ -49,6 +49,102 @@
transform-origin: 0;
}
.guy1-0-0 {
background: url(../img/guy_sprite.png) 0px 0px;
}
.guy1-0-1 {
background: url(../img/guy_sprite.png) -32px 0px;
}
.guy1-0-2 {
background: url(../img/guy_sprite.png) -64px 0px;
}
.guy0--1-0 {
background: url(../img/guy_sprite.png) 0px -32px;
}
.guy0--1-1 {
background: url(../img/guy_sprite.png) -32px -32px;
}
.guy0--1-2 {
background: url(../img/guy_sprite.png) -64px -32px;
}
.guy0-1-0 {
background: url(../img/guy_sprite.png) 0px 192px;
}
.guy0-1-1 {
background: url(../img/guy_sprite.png) -32px 192px;
}
.guy0-1-2 {
background: url(../img/guy_sprite.png) -64px 192px;
}
.guy-1-0-0 {
background: url(../img/guy_sprite.png) 0px 160px;
}
.guy-1-0-1 {
background: url(../img/guy_sprite.png) -32px 160px;
}
.guy-1-0-2 {
background: url(../img/guy_sprite.png) -64px 160px;
}
.guy-1--1-0 {
background: url(../img/guy_sprite.png) -96px 224px;
}
.guy-1--1-1 {
background: url(../img/guy_sprite.png) -128px 224px;
}
.guy-1--1-2 {
background: url(../img/guy_sprite.png) -160px 224px;
}
.guy-1-1-0 {
background: url(../img/guy_sprite.png) -96px 160px;
}
.guy-1-1-1 {
background: url(../img/guy_sprite.png) -128px 160px;
}
.guy-1-1-2 {
background: url(../img/guy_sprite.png) -160px 160px;
}
.guy1-1-0 {
background: url(../img/guy_sprite.png) -96px -64px;
}
.guy1-1-1 {
background: url(../img/guy_sprite.png) -128px -64px;
}
.guy1-1-2 {
background: url(../img/guy_sprite.png) -160px -64px;
}
.guy1--1-0 {
background: url(../img/guy_sprite.png) -96px 0px;
}
.guy1--1-1 {
background: url(../img/guy_sprite.png) -128px 0px;
}
.guy1--1-2 {
background: url(../img/guy_sprite.png) -160px 0px;
}
html {
-webkit-transform: scale(1.5);
transform: scale(2);

33
js/main.js
View File

@ -47,23 +47,35 @@ socket.on('getmap', function (conent) {
});
function addNewPlayer(player, id) {
if($("#"+id).length==0)
$("body").append('<div class="player" id="'+id+'" style="position:absolute; top:'+player["y"]+'px; left:'+player["x"]+'px; width:7px; height:7px; z-index:100;"><img class="default_ship" src="./img/default_ship.png"></div>');
if($("#"+id).length==0) {
var modeClass = "default_ship";
var modeImg = "./img/default_ship.png";
if(player["mode"]==1) {
var modeClass = "guy";
var modeImg = "./img/plain.png";
}
$("body").append('<div class="player" id="'+id+'" style="position:absolute; top:'+player["y"]+'px; left:'+player["x"]+'px; width:7px; height:7px; z-index:100;"><img class="'+modeClass+'" src="'+modeImg+'"></div>');
}
}
var oldmapX = null;
var oldmapY = null;
var picStep = 0;
var cnt = 0;
socket.on('setpos', function (allPlayers) {
window.requestAnimationFrame(function() {
for(var id in allPlayers) {
var player = allPlayers[id];
var playerElement = $("#"+id);
var playerImg = playerElement.find("img");
for(var i in player["special"]) {
if(i == "modechange") {
if(player["mode"] == 0) { //ship
playerElement.find("img").attr("src","./img/default_ship.png");
playerImg.removeClass (function (index, className) {
return (className.match (/(^|\s)guy\S+/g) || []).join(' ');
});
playerElement.find("img").removeClass("guy");
playerElement.find("img").addClass("default_ship");
} else { //land
@ -138,8 +150,21 @@ socket.on('setpos', function (allPlayers) {
left2right = 1;
}
var angle = 0;
if(player["mode"] == 0) {
if(player["mode"] == 0) { //ship
var angle = Math.atan2(top2Btn, left2right);
} else { //land
cnt++;
if(cnt%3==0)
picStep++;
if(picStep >= 3)
picStep = 0;
console.log(top2Btn+"-"+left2right)
if(!playerImg.hasClass("guy"+top2Btn+"-"+left2right+"-"+picStep)) {
playerImg.removeClass (function (index, className) {
return (className.match (/(^|\s)guy\S+/g) || []).join(' ');
});
playerImg.addClass("guy"+top2Btn+"-"+left2right+"-"+picStep);
}
}
playerElement.css({"top":player["y"],"left":player["x"], "-webkit-transform" : "rotate("+angle+"rad)"});
}

2
server.js
View File

@ -64,7 +64,7 @@ io.on('connection', function(socket){
socket.on('actionKey', function (key) {
var groundUnder = getGroundUnderPlayer(player["x"], player["y"]);
if(player["mode"] == 0) { //ship
if(groundUnder>=0) { //its nearly land
if(groundUnder>=1) { //its nearly land
player["mode"] = 1;
player["special"]["modechange"] = true;
}