加入进度条

game/character.js

@@ -1,8 +1,3 @@
-module.exports = function(map) {
-  return new character(map)
-}
-
-var constants = require('./constants')
 /*
   character
     存放角色的数据
@@ -10,17 +5,22 @@ var constants = require('./constants')
     map
       角色所在地图
 */
-var character = function(map) {
+var constants = require('./constants')
+var Position = require('./model/position')
+var CharacterAttr = require("./model/characterAttr")
+
+var Character = function(map) {
   // public
   this.position = map.generatePosition()
+  map.set(this.position, this)
   this.status = "idle"
   this.moveTarget = null
   this.attackTarget = null
-  this.process = null
-  this.processMax = null
+  this.progress = null
+  this.progressMax = null
 
   // character data
-  this.attr = require('./characterAttr')()
+  this.attr = new CharacterAttr()
   this.hp = this.attr.hpMax
 
   // private
@@ -28,18 +28,18 @@ var character = function(map) {
   this.fn = []
 }
 
-character.prototype.on = function(event, callback) {
+Character.prototype.on = function(event, callback) {
   this.fn[event] = callback
 }
 
-character.prototype.call = function(event, data) {
+Character.prototype.call = function(event, data) {
   if(!this.fn[event]) {
     this.fn[event] = function(){}
   }
   this.fn[event](data)
 }
 
-character.prototype.move = function(direction, distance) {
+Character.prototype.move = function(direction, distance) {
   switch(direction) {
     case 'left':
       this.moveTarget = this.position.left()
@@ -59,20 +59,20 @@ character.prototype.move = function(direction, distance) {
     return
   }
   this.setStatus("moving")
-  this.process = 0
-  this.processMax = distance
+  this.progress = 0
+  this.progressMax = distance
 }
 
-character.prototype.moveUpdate = function() {
+Character.prototype.moveUpdate = function() {
   if(this.map.get(this.moveTarget)) {
     this.setStatus("idle")
     this.call('log', "该位置已被人占领")
     return
   }
 
-  this.process += this.attr.spd / constants.fps
-  if(this.process >= this.processMax) {
-    this.process = this.processMax
+  this.progress += this.attr.spd / constants.fps
+  if(this.progress >= this.progressMax) {
+    this.progress = this.progressMax
 
     this.map.remove(this.position)
     this.map.set(this.moveTarget, this)
@@ -87,7 +87,7 @@ character.prototype.moveUpdate = function() {
   }
 }
 
-character.prototype.attack = function() {
+Character.prototype.attack = function() {
   if(!this.attackTarget) {
     this.call('log', "我需要一个目标")
     return
@@ -95,14 +95,14 @@ character.prototype.attack = function() {
 
   // attack init
   this.setStatus("attacking")
-  this.process = 0
-  this.processMax = this.attr.atkCost
+  this.progress = 0
+  this.progressMax = this.attr.atkCost
 }
 
-character.prototype.attackUpdate = function() {
-  this.process += this.attr.atkSpd / constants.fps
-  if(this.process >= this.processMax) {
-    this.process = this.processMax
+Character.prototype.attackUpdate = function() {
+  this.progress += this.attr.atkSpd / constants.fps
+  if(this.progress >= this.progressMax) {
+    this.progress = this.progressMax
 
     var victim = this.map.get(this.attackTarget)
     if(victim) {
@@ -117,7 +117,7 @@ character.prototype.attackUpdate = function() {
   }
 }
 
-character.prototype.damage = function(dmg) {
+Character.prototype.damage = function(dmg) {
   this.hp -= dmg
   this.call('log', "受到 " + dmg + " 点伤害")
   if(this.hp <= 0) {
@@ -129,8 +129,8 @@ character.prototype.damage = function(dmg) {
   }
 }
 
-character.prototype.setTarget = function(x, y) {
-  var targetPosition = require('./model/position')(x, y)
+Character.prototype.setTarget = function(x, y) {
+  var targetPosition = new Position(x, y)
   if(!this.attackTarget || !this.attackTarget.equals(targetPosition)) {
     this.attackTarget = targetPosition
     this.call('log', "选择 " + targetPosition.toString() + " 为目标")
@@ -141,7 +141,7 @@ character.prototype.setTarget = function(x, y) {
   }
 }
 
-character.prototype.setStatus = function(status) {
+Character.prototype.setStatus = function(status) {
   if(this.status == status) {
     return
   }
@@ -150,7 +150,11 @@ character.prototype.setStatus = function(status) {
   this.call('log', "status set to `" + status + "`")
 }
 
-character.prototype.getStatusData = function() {
+Character.prototype.getProgressData = function() {
+  return Math.floor(this.progress / this.progressMax * 100)
+}
+
+Character.prototype.getStatusData = function() {
   var result = {}
   switch(this.status) {
     case 'idle':
@@ -171,7 +175,7 @@ character.prototype.getStatusData = function() {
   return result
 }
 
-character.prototype.update = function() {
+Character.prototype.update = function() {
   if(this.hp < this.attr.hpMax) {
     this.hp += this.attr.hpRegen / constants.fps
     if(this.hp > this.attr.hpMax) {
@@ -187,3 +191,5 @@ character.prototype.update = function() {
       break
   }
 }
+
+module.exports = Character

game/map.js

@@ -7,10 +7,9 @@
     ymax
       y坐标最大值
 */
-module.exports  = function(xmax, ymax) {
-  return new map(xmax, ymax)
-}
-var map = function(xmax, ymax) {
+var Position = require("./model/position")
+
+var Map = function(xmax, ymax) {
   if(!xmax || !ymax) {
     console.log("map.js : Alert - not enough parameters")
   }
@@ -19,25 +18,32 @@ var map = function(xmax, ymax) {
   this.ymax = ymax
 }
 
-map.prototype.get = function(position) {
+Map.prototype.get = function(position) {
   var key = position.toString()
   return this.data[key]
 }
 
-map.prototype.set = function(position, player) {
+Map.prototype.set = function(position, player) {
   var key = position.toString()
   if(!this.data[key]) {
     this.data[key] = player
   }
 }
 
-map.prototype.remove = function(position) {
+Map.prototype.reset = function(position) {
   var key = position.toString()
   this.data[key] = null
 }
 
-map.prototype.generatePosition = function() {
+Map.prototype.generatePosition = function() {
   var x = Math.floor(Math.random() * this.xmax)
   var y = Math.floor(Math.random() * this.ymax)
-  return require('./model/position')(x, y)
+  var result = new Position(x, y)
+  while(this.data[result.toString()]) {
+    result.x = Math.floor(Math.random() * this.xmax)
+    result.y = Math.floor(Math.random() * this.ymax)
+  }
+  return result
 }
+
+module.exports  = Map

game/model/characterAttr.js

@@ -1,8 +1,4 @@
-module.exports = function() {
-  return new characterAttr()
-}
-
-var characterAttr = function() {
+var CharacterAttr = function() {
   this.atk = 10
   this.atkSpd = 30
   this.atkCost = 50
@@ -12,3 +8,5 @@ var characterAttr = function() {
   this.hpMax = 100
   this.hpRegen = 1
 }
+
+module.exports = CharacterAttr

game/model/position.js

@@ -1,39 +1,38 @@
-module.exports = function(x, y) {
-  return new position(x, y)
-}
 
-var position = function(x, y) {
+var Position = function(x, y) {
   this.x = x
   this.y = y
 }
 
-position.prototype.left = function(){
-  return new position(this.x-1, this.y)
+Position.prototype.left = function(){
+  return new Position(this.x-1, this.y)
 }
 
-position.prototype.right = function() {
-  return new position(this.x+1, this.y)
+Position.prototype.right = function() {
+  return new Position(this.x+1, this.y)
 }
 
-position.prototype.up = function() {
-  return new position(this.x, this.y+1)
+Position.prototype.up = function() {
+  return new Position(this.x, this.y+1)
 }
 
-position.prototype.down = function() {
-  return new position(this.x, this.y-1)
+Position.prototype.down = function() {
+  return new Position(this.x, this.y-1)
 }
 
-position.prototype.equals = function(position) {
+Position.prototype.equals = function(position) {
   return this.toString() == position.toString()
 }
 
-position.prototype.toString = function() {
+Position.prototype.toString = function() {
   return "x" + this.x + "y" + this.y
 }
 
-position.prototype.toJSON = function() {
+Position.prototype.toJSON = function() {
   return {
     x: this.x,
     y: this.y
   }
 }
+
+module.exports = Position

public/js/game.js

@@ -28,7 +28,7 @@ $(function() {
   var targetUp = $('#target-up')
   var targetDown = $('#target-down')
   var targetRight = $('#target-right')
-  var processTable = $('#process-table')
+  var progressTable = $('#progress-table')
   targetLeft.click(function() {
     if(position) {
       socket.emit('target', {x: position.x-1, y: position.y})
@@ -59,7 +59,7 @@ $(function() {
     socket.emit('attack')
   })
 
-  processTable.hide()
+  progressTable.hide()
 
   // socket listeners
   socket.on('network', function(data) {
@@ -70,8 +70,10 @@ $(function() {
   socket.on('update', function(data) {
     $('#hp').html(data.hp)
 
-    if(data.process) {
-      $('#action-process').html(data.process + '%')
+    if(data.progress) {
+      var width = data.progress + '%'
+      $('#progress-bar').css("width", width)
+      $('#progress-bar').html(width)
     }
   })
 
@@ -85,7 +87,6 @@ $(function() {
   })
 
   socket.on('positionChange', function(data) {
-    console.log(data)
     position = data
     $('#x').html(position.x)
     $('#y').html(position.y)
@@ -94,11 +95,12 @@ $(function() {
   socket.on('statusChange', function(data) {
     if(data.action) {
       $('#action-detail').html(data.detail)
-      $('#process-block').show()
-      $('#action-process').html('0%')
+      $('#progress-block').show()
+      $('#progress-bar').css("width", "0%")
+      $('#progress-bar').html('0%')
     }
     else {
-      $('#process-block').hide()
+      $('#progress-block').hide()
       $('#action-detail').html('无')
     }
   })

socket-server.js

@@ -1,6 +1,8 @@
 var constants = require('./game/constants')
+var Map = require('./game/map')
+var Character = require("./game/character")
+var map = new Map(5, 5)
 var distance = 100
-var map = require('./game/map')(5, 5)
 
 var onlineNumber = 0
 
@@ -8,7 +10,7 @@ var socketServer = function(server) {
   var io = require('socket.io')(server)
   io.on('connection', function(socket) {
     onlineNumber++
-    var player = require('./game/character')(map)
+    var player = new Character(map)
     var gameOn = true
 
     socket.emit('attrChange', player.attr)
@@ -34,6 +36,7 @@ var socketServer = function(server) {
 
     // client event
     socket.on('disconnect', function() {
+      map.reset(player.position)
       onlineNumber--
       gameOn = false
     })
@@ -80,7 +83,7 @@ var socketServer = function(server) {
         hp: Math.floor(player.hp)
       }
       if(player.status != 'idle' && player.status != 'dead') {
-        data.process = Math.floor(player.process / player.processMax * 100)
+        data.progress = player.getProgressData()
       }
       socket.emit('update', data)
 

views/index.jade

@@ -9,8 +9,12 @@ block script
 
 block content
   div.container
-    include ./panels/net-panel
-    include ./panels/character-panel
-    include ./panels/position-panel
-    include ./panels/process-panel
-    include ./panels/action-panel
+    div.row
+      div.col-sm-3
+        include ./panels/net-panel
+        include ./panels/character-panel
+        include ./panels/position-panel
+    div.row
+      div.col-sm-12
+        include ./panels/progress-panel
+        include ./panels/action-panel

views/panels/action-panel.jade

@@ -1,17 +1,17 @@
 div(id = 'action-panel').panel.panel-primary
   div.panel-body
-    div
+    div.col-sm-4
       | 移动:
       button(id="move-left") 左
       button(id="move-up") 上
       button(id="move-down") 下
       button(id="move-right") 右
-    div
+    div.col-sm-4
       | 选择:
       button(id="target-left") 左      
       button(id="target-up") 上
       button(id="target-down") 下
       button(id="target-right") 右
-    div
+    div.col-sm-4
       | 行动:
       button(id='action-attack') 攻击

views/panels/process-panel.jade

@@ -1,8 +0,0 @@
-div(id='process-panel').panel.panel-primary
-  div.panel-body
-    div.col-sm-6
-      | 当前动作: 
-      span(id='action-detail')
-    div(id='process-block', style='display: none').col-sm-6
-      | 动作进度: 
-      span(id='action-process')

views/panels/progress-panel.jade

@@ -0,0 +1,8 @@
+div(id='progress-panel').panel.panel-primary
+  div.panel-body
+    div.col-sm-4
+      div 当前动作: 
+      div(id='action-detail')
+    div(id='progress-block', style='display: none').col-sm-8
+      div 动作进度: 
+      div(id="progress-bar", style="border:none; text-align: center; padding: 0;margin-bottom: 0").alert.alert-info