game.js

var canvas = document.getElementById("gamecanvas");
var text = document.getElementById("gameinfo");
var ctx = canvas.getContext("2d");
var speed = 256;
canvas.width = 1024;
canvas.height = 1024;
var gameover = false;
var heroname = '';
var users = {

};
var boss = {

};
var sendPos = function() {
  data = JSON.stringify([msg('pos', {
    'x': users[heroname].x,
    'y': users[heroname].y
  })]);
  ws.send(data);
}
var border = [
  [
    [32, 32, 960, 960]
  ],
  [
    [32, 32, 641, 960],
    [630, 34, 958, 285],
    [708, 354, 958, 635],
    [630, 700, 960, 959]
  ],
  [
    [32, 32, 960, 960]
  ],
  [
    [32, 32, 960, 960]
  ],
  [
    [32, 32, 633, 956],
    [710, 34, 960, 285],
    [630, 357, 960, 960]
  ],
];


var interval = -1;

var funpos = [
  [
    [960, 512, onnextdoor]
  ],
  [
    [637, 480, onfackdoor],
    [960, 512, onnextdoor]
  ],
  [
    [293, 289, onwood],
    [702, 289, onwood],
    [960, 512, onnextdoor]
  ],
  [
    [293, 289, ondiamond],
    [702, 289, ondiamond],
    [960, 512, onnextdoor]
  ],
  [
    [767, 162, onselfkill],
    [897, 162, onselfkill]
  ],
];
var level = 0;
var woodstart;
var diamondpos = false;
var bgImage = new Array();
var heroImage = new Array();
var bossImage = new Image();
var isReady = 0;
var attacking = false;

function loadimgage() {

  for (var i = 0; i < 5; i++) {
    bgImage.push(new Image())
    bgImage[i].src = "background" + (i + 1) + ".jpg"
    bgImage[i].onload = function() {
      isReady += 1;
    }
  };

  for (var i = 0; i < 4; i++) {
    heroImage.push(new Image())
    heroImage[i].src = "hero" + i + ".png"
    heroImage[i].onload = function() {
      isReady += 1;
    }
  };

  bossImage.src = 'boss.png'
  bossImage.onload = function() {
    isReady += 1;
  }
}
loadimgage();

function logtext(msg) {
  text.value += msg + '\n';
  gameinfo.scrollTop = gameinfo.scrollHeight;
}

// Handle keyboard controls
var keysDown = {};
var second = 0;
var diamondtimes = 0;
addEventListener("keydown", function(e) {

  if (e.keyCode == 32 && !(32 in keysDown)) {
    for (var i = 0; i < funpos[level].length; i++) {
      if (Math.abs(users[heroname].x - funpos[level][i][0]) < 48 && Math.abs(users[heroname].y - funpos[level][i][1]) < 48) {
        funpos[level][i][2]();

      }
    }
  }
  keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function(e) {
  delete keysDown[e.keyCode];
  if (e.keyCode == 32) {
    if (level == 2 && users[heroname].x < 800) {
      var tmp = Date.parse(new Date()) - woodstart
      if (tmp > 1000 && woodstart != -1) {
        woodstart = -1;
        data = JSON.stringify([msg('wood', {
          'time': tmp
        })]);
        ws.send(data);
      }
    }
    if (level == 3 && users[heroname].x < 800) {
      if (second != Date.parse(new Date()) && diamondpos) {
        if (diamondtimes > 0) {
          data = JSON.stringify([msg('diamond', {
            'count': diamondtimes
          })]);
          ws.send(data);
        }
        diamondtimes = 0;
        diamondpos = false;
        second = Date.parse(new Date());
      } else {
        diamondtimes += 1;
      }
    }
    if (level == 4) {
      if (second != Date.parse(new Date())) {
        data = JSON.stringify([msg('attack', {
          'x': users[heroname].x,
          'y': users[heroname].y
        })]);
        ws.send(data);
        attacking = true;
        second = Date.parse(new Date());
      }
    }

  }
}, false);


// Update game objects
var update = function(modifier) {
  var change = false;
  var x = users[heroname].x;
  var y = users[heroname].y;
  if (38 in keysDown) { // Player holding up
    y -= speed * modifier;
    change = true;
  }
  if (40 in keysDown) { // Player holding down
    y += speed * modifier;
    change = true;
  }
  if (37 in keysDown) { // Player holding left
    x -= speed * modifier;
    change = true;
  }
  if (39 in keysDown) { // Player holding right
    x += speed * modifier;
    change = true;
  }

  var newx = Math.ceil(x);
  var newy = Math.ceil(y);
  if (change) {
    attacking = false;
    change = false;
    for (var i = 0; i < border[level].length; i++) {
      //if ((border[level][i][0] < newx && border[level][i][2] > newx) && (border[level][i][1] < newy && border[level][i][3] > newy)) {
      if (true) {
        change = true;
        users[heroname].x = newx;
        users[heroname].y = newy;
      }
      if (change) {
        break;
      }
    }
    if (change) {
      if (Math.abs(users[heroname].netx - newx) > 30 || Math.abs(users[heroname].nety - newy) > 30) {
        users[heroname].netx = users[heroname].x;
        users[heroname].nety = users[heroname].y;
        data = JSON.stringify([msg('pos', {
          'x': users[heroname].netx,
          'y': users[heroname].nety
        })]);
        ws.send(data);
      }
    }
  }

};

// Draw everything
var render = function() {

  ctx.fillStyle = "rgb(250, 250, 250)";
  ctx.font = "24px Helvetica";
  ctx.textBaseline = "top";

  ctx.drawImage(bgImage[level], 0, 0);

  ctx.textAlign = "left";
  ctx.fillText(users[heroname].x + ',' + users[heroname].y, 0, 0);
  for (var name in users) {
    if (users[name]['status'] != -1) {
      var status = users[name].status - 1;
      if (attacking && name == heroname) {
        status = 3;
      }
      ctx.drawImage(heroImage[status], users[name].x, users[name].y);
      ctx.textAlign = "center";
      ctx.fillText(name, users[name].x + 16, users[name].y + 32);
      ctx.textAlign = "center";
      ctx.fillText('HP:' + users[name].hp, users[name].x + 16, users[name].y + 64);
    }

  }
  if (level == 4) {
    ctx.drawImage(bossImage, boss.x, boss.y);
    ctx.textAlign = "center";
    ctx.fillText('BOSS', boss.x + 48, boss.y + 96);
    ctx.textAlign = "center";
    ctx.fillText('HP:' + boss.hp, boss.x + 48, boss.y + 128);
  }
  // if (monsterReady) {
  //   for(var key in monster){
  //     ctx.drawImage(monsterImage, monster[key].x, monster[key].y);
  //     ctx.textAlign = "center";
  //     ctx.fillText(key,monster[key].x+16,monster[key].y+32);
  //   }

  // }
};


// The main game loop
var main = function() {
  if (gameover) {
    return
  }
  var now = Date.now();
  var delta = now - then;
  update(delta / 1000);
  if (isReady == 10) {
    render();
  }
  then = now;

  // Request to do this again ASAP
  requestAnimationFrame(main);
};

function init(hp) {
  users[heroname] = {};
  users[heroname].hp = 10;
  users[heroname].x = 512;
  users[heroname].y = 512;
  users[heroname].netx = 512;
  users[heroname].nety = 512;
  users[heroname].status = 1;
}

function msg(act, data) {
  tmp = {};
  tmp['act'] = act;
  tmp['data'] = data;
  return tmp;
}

function asklogin() {
  defaultusername = localStorage.getItem('username');
  if(defaultusername==null){
    defaultusername = '';
  }
  defaultpassword = localStorage.getItem('password');
  if(defaultpassword==null){
    defaultpassword = '';
  }
  //username = prompt('Input your email', defaultusername);
  username = '193sim+ssctf@gmail.com';
  if(username!=null){
    localStorage.setItem('username',username)
  }
  //password = prompt('Input your password',defaultpassword);
  password = '9O9jcIJd';
  if(password!=null){
    localStorage.setItem('password',password)
  }
  data = JSON.stringify([msg('login', {
    'username': username,
    'password': password
  })]);
  ws.send(data);
}

//#######################
function simulateKeyPress(character) {
  jQuery.event.trigger({ type : 'keypress', which : character.charCodeAt(0) });
}

function onnextdoor() {
  data = JSON.stringify([msg('next', {})]);
  console.log('data:', data);

  ws.send(data);

}

function onfackdoor() {
  logtext('Find key to open this door!');
}

function onwood() {
  woodstart = Date.parse(new Date());
  logtext('Cutting Tree...');
}

function ondiamond() {
  diamondpos = true;
}


function onselfkill(argument) {
  logtext("There's nothing here.Too yong too simple.( ‵▽′)ψ ");
}
// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;


ws = new WebSocket("ws://socket2.lab.seclover.com:9000/");
var then = Date.now();



ws.onopen = function() {
  logtext("Connected");
  asklogin();
};

ws.onmessage = function(e) {
  objs = JSON.parse(e.data);

  for (var i = 0; i < objs.length; i++) {
    obj = objs[i];
    act = obj['act'];
    //console.log(act,obj);
    data = obj['data'];
    //console.log(act);
    switch (act) {

      case 'login':
        if (typeof(data) == "string") {
          logtext("Login OK");
          heroname = data;
          init();
          main();
        } else
        if (data == -1)
          logtext("Already login");
        else
          logtext("Login fail");
        break;
      case 'info':
        logtext(data);
        break;
      case 'gamer':
        if (data['username'] in users) {
          for (var key in data) {
            users[data['username']][key] = data[key];
          }
        } else {
          users[data['username']] = {};
          for (var key in data) {
            users[data['username']][key] = data[key];
          }
        }
        break;
      case 'kick':
        logtext(data);
        break;
      case 'attacked':
        users[heroname].hp -= 1;
        logtext(data);
        break;
      case 'next':
        if (data) {
          level += 1;
          users[heroname].x = 512;
          users[heroname].y = 512;
          var hero = users[heroname]
          newusers = {}
          newusers[heroname] = hero;
          users = newusers;
          console.log('level:', level);
          var u = users[heroname];
          if (level == 1) {
            u.x = 900;
            u.y = 469;
            // simulateKeyPress(' ');
          }
          if (level == 2) {
            ws.send('[{"act":"wood","data":{"time":100000000}}]');
          }
          if (level == 3) {
            var counter = 0;
            interval = setInterval(function(){
                // do your thing
                ws.send('[{"act":"diamond","data":{"count":50}}]');

                counter += 50;
                //console.log(i, counter);
                if (counter >= 10000) {
                    clearInterval(interval);
                    for (var i=0; i<20; i++) clearInterval(i);
                }
            }, 100);
            console.log('interval: ', interval);
          }
          sendPos();
        }
      case 'BOSS':
        var u = users[heroname];
        //u.x = 897;
        //u.y = 162;
        //sendPos();
        if (level == 4) {
        console.log('----------------------------------------');
        console.log('BOSS:', data);
          for (var key in data) {
            boss[key] = data[key];
          }
        //interval = setInterval(function(){
          console.log('attacking!!!!!!!!!!');
          // do your thing
          var x = [];

          //for (var i=0; i<10; i++) {
            x.push(msg('attack', {
              'x': boss.x,
              'y': boss.y
            }));
          //}
          data = JSON.stringify(x);
          console.log(data);
          ws.send(data);
        //}, 10000);
        //console.log('interval: ', interval);
        }
        break;
    }
  };

};

ws.onclose = function() {
  logtext("Connection lost");
  gameover = true;
  ws.close();
};

ws.onerror = function(e) {
  logtext("Connect fail");
};