player.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. function Player(game, camera) {
  2. this.id = 0;
  3. this.position = {x: 0, y: 0};
  4. this.targetPosition = {x: 0, y: 0};
  5. this.velocity = {x: 0.0, y: 0.0};
  6. this.acceleration = {x: 0, y: 0, speed: 0.08};
  7. this.width = 32;
  8. this.height = 32;
  9. this.maxSpeed = 2;
  10. this.turnRate = Math.PI / 64;
  11. this.targetAngle = 0;
  12. this.angleRadians = 0;
  13. this.color = "crimson";
  14. this.name = "Player";
  15. this.spriteCanvas = null;
  16. this.spriteContext = null;
  17. this.isAccelerating = false;
  18. this.sprite = "human1";
  19. this.isDead = false;
  20. this.health = 5;
  21. this.maxHealth = 5;
  22. this.seen = [];
  23. this.waitHere = false;
  24. this.mousePosition = {x: 0, y: 0};
  25. this.init = function() {
  26. this.color = "crimson";
  27. this.respawn();
  28. var joinAction = {action: "join",
  29. data: {
  30. //name: this.name,
  31. position: this.position,
  32. targetPosition: this.targetPosition
  33. }
  34. };
  35. system.theater.socketSend(joinAction);
  36. }
  37. this.update = function(delta) {
  38. if(this.isDead) {
  39. return;
  40. }
  41. if(this.health <= 0) {
  42. this.die();
  43. return;
  44. }
  45. this.angleRadians = system.angleTo(this.position, this.targetPosition);
  46. if(this.waitHere) {
  47. return;
  48. }
  49. if(this.targetPosition.x != this.position.x) {
  50. if(Math.abs(this.position.x - this.targetPosition.x) < this.maxSpeed) {
  51. this.position.x = this.targetPosition.x;
  52. this.targetAngle = this.angleRadians;
  53. } else {
  54. this.targetAngle = this.angleRadians;
  55. this.position.x += this.maxSpeed * Math.cos(this.angleRadians) * delta;
  56. }
  57. }
  58. if(this.targetPosition.y != this.position.y) {
  59. if(Math.abs(this.position.y - this.targetPosition.y) < this.maxSpeed) {
  60. this.position.y = this.targetPosition.y;
  61. this.targetAngle = this.angleRadians;
  62. } else {
  63. this.targetAngle = this.angleRadians;
  64. this.position.y += (this.maxSpeed) * Math.sin(this.angleRadians) * delta;
  65. }
  66. }
  67. }
  68. this.control = function(input) {
  69. /*if(system.keyboard.isDown(Keys.Up) || system.keyboard.isDown(Keys.W)) {
  70. this.walkUp();
  71. }
  72. if(system.keyboard.isDown(Keys.Down) || system.keyboard.isDown(Keys.S)) {
  73. this.walkDown();
  74. }
  75. if(system.keyboard.isDown(Keys.Left)|| system.keyboard.isDown(Keys.A)) {
  76. this.walkLeft();
  77. }
  78. if(system.keyboard.isDown(Keys.Right)|| system.keyboard.isDown(Keys.D)) {
  79. this.walkRight();
  80. }
  81. if(system.keyboard.isPressed(Keys.Space)) {
  82. this.jump();
  83. }*/
  84. }
  85. this.respawn = function() {
  86. this.position.x = parseInt(200 * Math.random() - 100);
  87. this.position.y = parseInt(200 * Math.random() - 100);
  88. this.targetPosition.x = this.position.x;
  89. this.targetPosition.y = this.position.y;
  90. }
  91. this.die = function() {
  92. this.health = 0;
  93. if(!this.isDead) {
  94. var player = this;
  95. setTimeout(function() {player.respawn();}, 3000);
  96. this.isDead = true;
  97. system.theater.socketSend({action: "die", playerid:this.id, data:{}});
  98. }
  99. }
  100. this.syncData = function() {
  101. system.theater.socketSend({action: "sync",
  102. playerid: this.id,
  103. data: this
  104. });
  105. this.spriteCanvas = document.createElement("canvas");
  106. this.spriteCanvas.width = this.width;
  107. this.spriteCanvas.height = this.height;
  108. this.spriteContext = this.spriteCanvas.getContext("2d");
  109. this.preRender(this.spriteContext);
  110. }
  111. this.walkUp = function() {
  112. this.targetPosition.y = this.position.y - this.maxSpeed;
  113. }
  114. this.walkDown = function() {
  115. this.targetPosition.y = this.position.y + this.maxSpeed;
  116. }
  117. this.walkLeft = function() {
  118. this.targetPosition.x = this.position.x - this.maxSpeed;
  119. }
  120. this.walkRight = function() {
  121. this.targetPosition.x = this.position.x + this.maxSpeed;
  122. }
  123. this.walkTowards = function(newPosition) {
  124. this.targetPosition.x = parseInt(newPosition.x);
  125. this.targetPosition.y = parseInt(newPosition.y);
  126. var moveAction = {action: "move", playerid:this.id, data:{position: this.position, targetPosition: this.targetPosition}};
  127. system.theater.socketSend(moveAction);
  128. }
  129. this.jump = function() {
  130. console.log("jump");
  131. }
  132. this.preRender = function(context, angle) {
  133. if(angle == null) {
  134. angle = 0;
  135. }
  136. context.fillStyle = this.color;
  137. context.strokeStyle = this.color;
  138. context.lineWidth = 4;
  139. context.save();
  140. context.translate(0.5, 0.5);
  141. //context.rotate(angle);
  142. /*context.fillStyle = "rgba(0,0,0,0.1)";
  143. system.ellipse(context, 0, 8, 16, 4);
  144. context.fill();*/
  145. context.drawImage(system.assets.getSprite(this.sprite), 0, 0, 16, 16, 0, 0, this.width, this.height);
  146. /*context.beginPath();
  147. context.moveTo(this.width / 2, 0);
  148. context.lineTo(-(this.width / 2), -(this.height / 3));
  149. context.lineTo(-(this.width / 2), this.height / 3);
  150. context.lineTo(this.width / 2, 0);
  151. context.fill();*/
  152. context.restore();
  153. }
  154. this.draw = function(context) {
  155. if(this.spriteContext == null) {
  156. this.spriteCanvas = document.createElement("canvas");
  157. this.spriteCanvas.width = this.width;
  158. this.spriteCanvas.height = this.height;
  159. this.spriteContext = this.spriteCanvas.getContext("2d");
  160. this.preRender(this.spriteContext);
  161. }
  162. if(this.isDead) {
  163. return;
  164. }
  165. context.save();
  166. context.translate(this.position.x - (this.width / 2), this.position.y - (this.height / 2));
  167. //context.rotate(this.targetAngle);
  168. if(this.isAccelerating) {
  169. context.fillStyle = "#7777FF";
  170. context.beginPath();
  171. context.moveTo(-this.width - 5, 0);
  172. context.lineTo(-this.width / 2, 3);
  173. context.lineTo(-this.width / 2, -3);
  174. context.lineTo(-this.width - 5, 0);
  175. context.fill();
  176. }
  177. context.drawImage(this.spriteCanvas, 0, 0);
  178. //bounds box
  179. /*context.strokeStyle = "#FF7733";
  180. context.beginPath();
  181. context.moveTo(0, 0);
  182. context.lineTo(this.width, 0);
  183. context.lineTo(this.width, this.height);
  184. context.lineTo(0, this.height);
  185. context.lineTo(0, 0);
  186. context.stroke();*/
  187. context.strokeStyle = "#00FF00";
  188. if(this.isTakingDamage) {
  189. context.strokeStyle = "#FF0000";
  190. this.isTakingDamage = false;
  191. }
  192. context.restore();
  193. context.save();
  194. context.translate(this.position.x, this.position.y);
  195. context.font = "16px sans-serif";
  196. context.textAlign = "center";
  197. context.textBaseline = "middle";
  198. context.fillStyle = "#DDDDDD";
  199. context.strokeStyle = "#182208";
  200. context.lineWidth = 2;
  201. var textMetrics = context.measureText(this.name);
  202. var textWidth = textMetrics.width;
  203. context.strokeText(this.name, 0, -this.height);
  204. context.fillText(this.name, 0, -this.height);
  205. context.restore();
  206. }
  207. this.trigger = function(eventId) {
  208. if(this.seen.indexOf(eventId) == -1) {
  209. this.seen.push(eventId);
  210. return true;
  211. }
  212. return false;
  213. }
  214. this.inConversation = function() {
  215. this.waitHere = true;
  216. this.targetPosition.x = this.position.x;
  217. this.targetPosition.y = this.position.y;
  218. }
  219. this.endConversation = function() {
  220. this.waitHere = false;
  221. }
  222. this.mouseMove = function(camera, x, y) {
  223. this.mousePosition.x = x - camera.position.x;
  224. this.mousePosition.y = y - camera.position.y;
  225. this.targetAngle = system.angleTo(this.position, this.mousePosition);
  226. }
  227. this.mouseDown = function(camera, button, x, y) {
  228. this.mouseMove(camera, x, y);
  229. if(button == 2) {
  230. //TODO: determine if an item or mobile is clicked on
  231. this.walkTowards(this.mousePosition);
  232. }
  233. }
  234. this.mouseUp = function(camera, button, x, y) {
  235. };
  236. this.touchStart = function(camera, x, y) {
  237. this.touchMove(camera, x, y);
  238. //TODO: determine if an item or mobile is clicked on
  239. this.walkTowards(this.mousePosition);
  240. };
  241. this.touchMove = function(camera, x, y) {
  242. this.mousePosition.x = x - camera.position.x;
  243. this.mousePosition.y = y - camera.position.y;
  244. this.targetAngle = system.angleTo(this.position, this.mousePosition);
  245. };
  246. this.touchEnd = function(camera, x, y) {
  247. };
  248. this.contextMenu = function() {
  249. };
  250. };