Posted By

jatkins on 05/26/10


Tagged

game games animation 2d


Versions (?)

JavaScript 2D Game Library


 / Published in: JavaScript
 

  1. /*
  2.  * Created May 26, 2010
  3.  * Licensed under CC-by-2.0
  4. */
  5.  
  6. var newSprite, currentSprite;
  7.  
  8. function get(elmnt) {
  9. return document.getElementById(elmnt);
  10. }
  11.  
  12. function removeUnits(str, unitsLength) {
  13. return parseInt(str.substring(0, str.length-unitsLength));
  14. }
  15.  
  16. function addSprite(spriteName, movable) {
  17. newSprite = document.createElement('img');
  18. newSprite.id = 'sprite'+spriteName;
  19. newSprite.src = 'sprites/'+spriteName+'.png';
  20. newSprite.onclick = function() { currentSprite = this.id.substring(6); };
  21. newSprite.style.left = '0px';
  22. newSprite.style.top = '0px';
  23. newSprite.title = movable;
  24. get('canvas').appendChild(newSprite);
  25. if(!currentSprite) currentSprite = spriteName;
  26. }
  27.  
  28. function moveSprite(spriteName, incrementLeft, incrementTop) {
  29. if(incrementLeft) getSprite(spriteName).style.left = (getSpriteLeft(spriteName) + incrementLeft).toString() + 'px';
  30. if(incrementTop) getSprite(spriteName).style.top = (getSpriteTop(spriteName) + incrementTop).toString() + 'px';
  31. }
  32.  
  33. function getSprite(spriteName) {
  34. return get('sprite'+spriteName);
  35. }
  36.  
  37. function getSpriteLeft(spriteName) {
  38. return removeUnits(getSprite(spriteName).style.left, 2);
  39. }
  40.  
  41. function getSpriteTop(spriteName) {
  42. return removeUnits(getSprite(spriteName).style.top, 2);
  43. }
  44.  
  45. function getSpriteWidth(spriteName) {
  46. return getSprite(spriteName).offsetWidth;
  47. }
  48.  
  49. function getSpriteHeight(spriteName) {
  50. return getSprite(spriteName).offsetHeight;
  51. }
  52.  
  53. function initialize() {
  54. get('canvas').onkeydown = function() {
  55. if(currentSprite&&getSprite(currentSprite).title.split('_')[0]=='true') {
  56. respondToKeyPress(currentSprite, event.keyCode);
  57. if(currentSprite=='person') changeMessage('spriteInside', checkIfSpriteInsideAnother('person', 'house'));
  58. }
  59. };
  60. }
  61.  
  62. function respondToKeyPress(spriteName, key) {
  63. switch(key) {
  64. case 37: // left arrow key
  65. moveSprite(spriteName, -10, 0);
  66. break;
  67. case 38: // up arrow key
  68. moveSprite(spriteName, 0, -10);
  69. break;
  70. case 39: // right arrow key
  71. moveSprite(spriteName, 10, 0);
  72. break;
  73. case 40: // down arrow key
  74. moveSprite(spriteName, 0, 10);
  75. break;
  76. }
  77. }
  78.  
  79. function checkIfSpriteInsideAnother(spriteName, insideSprite) {if(getSpriteLeft(spriteName)<=(getSpriteLeft(insideSprite)+getSpriteWidth(insideSprite))&&getSpriteLeft(spriteName)>=getSpriteLeft(insideSprite)&&getSpriteTop(spriteName)<=(getSpriteTop(insideSprite)+getSpriteHeight(insideSprite))&&getSpriteTop(spriteName)>=getSpriteTop(insideSprite))
  80. return spriteName + ' is inside ' + insideSprite;
  81. else
  82. return '';
  83. }
  84.  
  85. function changeMessage(messageName, newMessage) {
  86. get(messageName).innerHTML = newMessage;
  87. }
  88.  
  89. function animateSprite(spriteName, images, image_id, interval, repeat) {
  90. if(getSprite(spriteName).title.split('_').length==2) clearTimeout(getSprite(spriteName).title.split('_')[1]);
  91. if(image_id==images.length) image_id = 0;
  92. getSprite(spriteName).src = 'sprites/'+images[image_id]+'.png';
  93. image_id++;
  94. if(repeat==true||image_id!=images.length) getSprite(spriteName).title = getSprite(spriteName).title.split('_')[0] + '_' + setTimeout('animateSprite(\''+spriteName+'\', [\''+images.join('\', \'')+'\'], '+image_id+', '+interval+', '+repeat+');', interval);
  95. }

Report this snippet  

You need to login to post a comment.