JAVASCRIPT   105

common.js

Guest on 27th July 2021 08:34:25 AM

  1. // >> common.js <<
  2. // functions for common purposes
  3. //
  4. //  taken from the book:
  5. //  Kenichiro Matsuura, Tsukasa Yuki  "Game Algorithm Recipe for JavaScript".
  6. //
  7. //   typed by T.Kawabata.
  8. //   Last Modified:  Oct 25,
  9.  
  10.  
  11.  
  12. /// GLOBAL VARIABLES
  13.  
  14. var CELL_SIZE   = 48;   /* (pixel) */
  15. var CELL_XCOUNT = 22;   /* (cell)  */
  16. var CELL_YCOUNT = 11;   /* (cell)  */
  17. var XMAX = CELL_XCOUNT - 1;  /* (cell) */
  18. var YMAX = CELL_YCOUNT - 1;  /* (cell) */
  19. var FIELD_WIDTH  = CELL_SIZE * CELL_XCOUNT;  /* (pixel) */
  20. var FIELD_HEIGHT = CELL_SIZE * CELL_YCOUNT;  /* (pixel) */
  21. var FIELD_COLOR = "white";
  22. var BORDER_SIZE  = 5;       /* (pixel): line width of BORDER */
  23. var BORDER_COLOR = "black";  
  24. var SCORE_HEIGHT = 40; /* (pixell) */
  25. var SCORE_FONT_FAMILY = "Impact, sans-serif";
  26. var SCORE_FONT_SIZE="24pt";
  27. var IMGDIR = "../amino_images/IMGR_48x48/";
  28. var UPDATE_INTERVAL = 50;
  29. //  KEY CODEs
  30. var KEY_LEFT  = 37;  /* cursor <- */
  31. var KEY_RIGHT = 39;  /* cursor -> */
  32. var KEY_UP    = 38;  /* cursor ^  */
  33. var KEY_DOWN  = 40;  /* cursor |/ */
  34. var KEY_SPACE = 32;  /* space key */
  35. var KEY_ENTER = 13;  /* enter key */
  36. var KEY_ESC   = 27;  /* escape key */
  37. var KEY_COUNT = 256; /* length of array for key status */
  38.  
  39.  
  40. /// Definition of basic "random" functions ///
  41.  
  42. function randFloat2(from, to) {
  43.   return Math.random()*(to-from)+from;
  44. }
  45. function randFloat(to) {
  46.   return randFloat2(0, to);
  47. }
  48. function randInt2(from, to) {
  49.   return Math.floor(randFloat2(from, to));
  50. }
  51. function randInt(to) {
  52.   return randInt2(0, to);
  53. }
  54. function randSign() {
  55.   return randInt(2)*2-1;
  56. }
  57.  
  58. ////////////////////////////////////
  59. // Definition of OBJECT 'Sprite'  //
  60. ////////////////////////////////////
  61.  
  62. function Sprite(div,zIndex){
  63.   /* div:    division (region) for drawing the Sprite */
  64.   /* zindex: order for image overlapping  */
  65.  
  66.   var obj = this;
  67.   var style;
  68.  
  69.   // >> Explanation of member variable <
  70.   // obj.x      : x position (cell)  
  71.   // obj.y      : y position (cell)  
  72.   // obj.viewX  : ? (cell)  
  73.   // obj.viewY  : ? (cell)  
  74.   // obj.img    : image variable
  75.   // obj.img.style.left  : (pixel)
  76.   // obj.img.style.top   : (pixel)
  77.   // obj.img.style.width : (pixel)
  78.   // obj.img.style.height: (pixel)
  79.  
  80.   obj.img = document.createElement("img")
  81.   div.appendChild(obj.img);
  82.   obj.img.src = IMGDIR + "R.png";
  83.  
  84.   style=obj.img.style;
  85.   style.position = "absolute";
  86.   style.zIndex = zIndex;
  87.   obj.updated = false;
  88.   obj.viewX = 0;
  89.   obj.viewY = 0;
  90.  
  91.   //method: onUpdate()
  92.   obj.onUpdate=function(){ }
  93.  
  94.   //method: update(viewX,viewY)
  95.  
  96.   obj.update = function(viewX,viewY){
  97.     if (obj.updated && viewX==obj.viewX && viewY==obj.viewY) return;
  98.     obj.updated = true;
  99.     obj.viewX = viewX;
  100.     obj.viewY = viewY;
  101.  
  102.     var style = obj.img.style;
  103.     //style.left   = Math.floor((obj.x-viewX)*CELL_SIZE) + "px";
  104.     //style.top    = Math.floor((obj.y-viewY)*CELL_SIZE) + "px";
  105.     //style.width  = Math.floor(obj.xSize*CELL_SIZE) + "px";
  106.     //style.height = Math.floor(obj.ySize*CELL_SIZE) + "px";
  107.     style.left   = Math.ceil((obj.x-viewX)*CELL_SIZE) + "px";
  108.     style.top    = Math.ceil((obj.y-viewY)*CELL_SIZE) + "px";
  109.     style.width  = Math.ceil(obj.xSize*CELL_SIZE) + "px";
  110.     style.height = Math.ceil(obj.ySize*CELL_SIZE) + "px";
  111.     obj.img.src  = IMGDIR + obj.animImage[obj.animIndex];
  112.   }
  113.  
  114.   // method:setXY(x,y)
  115.   obj.setXY=function(x,y){
  116.     obj.updated = false;
  117.     obj.x = x;
  118.     obj.y = y;
  119.   }
  120.   // method:getX()
  121.   obj.getX=function(){
  122.     return(obj.x);
  123.   }
  124.   // method:getY()
  125.   obj.getY=function(){
  126.     return(obj.y);
  127.   }
  128.  
  129.   obj.setXY(0,0);
  130.  
  131.  
  132.   //method:setSize(xSize,ySize)
  133.   obj.setSize=function(xSize,ySize){
  134.     obj.updated = false;
  135.     obj.xSize = xSize;
  136.     obj.ySize = ySize;
  137.   }
  138.  
  139.   //method:getXSize()
  140.   obj.getXsize=function(){
  141.     return(obj.xSize);
  142.   }
  143.   //method:getYSize()
  144.   obj.getYsize=function(){
  145.     return(obj.ySize);
  146.   }
  147.  
  148.   obj.setSize(1,1);
  149.  
  150.   //Animation
  151.   //method:initAnim(array)
  152.   obj.initAnim=function(array){
  153.     obj.updated = false;
  154.     obj.animImage=array;
  155.     obj.animIndex = 0;
  156.     obj.animOver=false;
  157.   }
  158.  //method:stepAnim()
  159.  obj.stepAnim=function(){
  160.    obj.updated = false;
  161.    obj.animIndex += 1;
  162.    if (obj.animIndex>=obj.animImage.length){
  163.      obj.animIndex = 0;
  164.      obj.animOver = true;
  165.    }
  166.  }
  167.  
  168.   //method:isAnimOver()
  169.   obj.isAnimOver=function(){
  170.     return(obj.animOver);
  171.   }
  172.  
  173.   obj.initAnim(new Array("R.png"));
  174.  
  175.  
  176.   // Hit Checking
  177.   obj.onHitSprite=function(focus_spr) {};
  178.  
  179.   obj.hit = new Array(0,0,1,1);
  180.  
  181.   //* if you set obj.hit = new Array(0.25,0.25,0.75,0.75),
  182.   //  then, hit decision becomes more loose.
  183.  
  184.   obj.testHitSprite=function(focus_spr) {
  185.     var a=obj.hit, b=focus_spr.hit;
  186.     //    at           bt
  187.     // al a  ar     bl b  br
  188.     //    ab           bb
  189.     var a = obj.hit;
  190.     var b = focus_spr.hit;
  191.     var al= a[0] + obj.x, ar= a[2] + obj.x;
  192.     var at= a[1] + obj.y, ab= a[3] + obj.y;
  193.     var bl= b[0] + focus_spr.x, br= b[2] + focus_spr.x;
  194.     var bt= b[1] + focus_spr.y, bb= b[3] + focus_spr.y;
  195.     if (al<br && bl<ar && at<bb && bt<ab) {
  196.             obj.onHitSprite(focus_spr);
  197.             return true;
  198.      }
  199.      return false;
  200.   }
  201. }
  202.  
  203.  
  204.  
  205.  
  206. ////////////////////////////////////
  207. // Definition of OBJECT 'Game '   //
  208. ////////////////////////////////////
  209.  
  210.  
  211. function Game(){
  212.  var obj = this;
  213.  
  214.  var style;
  215.  var i;
  216.  
  217.  // Definition of "Base" division (which has "Field" + "ScoreRegion", as its children )
  218.  obj.divBase = document.createElement("div");  
  219.  document.body.appendChild(obj.divBase);
  220.  style = obj.divBase.style;
  221.  style.position = "absolute";
  222.  style.backgroundColor = BORDER_COLOR;
  223.  style.left = 0 + "px";  /* "px" = "pixel" */
  224.  style.top  = 0 + "px";  /* "px" = "pixel" */
  225.  style.width  = FIELD_WIDTH + BORDER_SIZE*2 + "px";
  226.  style.height = FIELD_HEIGHT + SCORE_HEIGHT + BORDER_SIZE*3 + "px";
  227.  
  228.  // Definition of "Field" division
  229.  obj.divField = document.createElement("div");
  230.  obj.divBase.appendChild(obj.divField);
  231.  style = obj.divField.style;
  232.  style.overflow = "hidden";
  233.  style.position = "absolute";
  234.  style.backgroundColor = FIELD_COLOR;
  235.  style.left   = BORDER_SIZE  + "px";
  236.  style.top    = BORDER_SIZE  + "px";
  237.  style.width  = FIELD_WIDTH  + "px";
  238.  style.height = FIELD_HEIGHT + "px";
  239.  
  240.  // Definition of "Score" division
  241.  obj.divScore = document.createElement("div")
  242.  obj.divBase.appendChild(obj.divScore)
  243.  style = obj.divScore.style;
  244.  style.overflow = "hidden"
  245.  style.position = "absolute"
  246.  style.backgroundColor = FIELD_COLOR;
  247.  style.left   = BORDER_SIZE + "px";
  248.  style.top    = FIELD_HEIGHT + BORDER_SIZE*2 + "px";
  249.  style.width  = FIELD_WIDTH/2 + "px";
  250.  style.height = SCORE_HEIGHT + "px";
  251.  style.fontFamily = SCORE_FONT_FAMILY;
  252.  style.fontSize   = SCORE_FONT_SIZE;
  253.  
  254.  // Definition of "HighScore" division
  255.  obj.divHighScore = document.createElement("div")
  256.  obj.divBase.appendChild(obj.divHighScore)
  257.  style = obj.divHighScore.style;
  258.  style.overflow = "hidden"
  259.  style.position = "absolute"
  260.  style.backgroundColor = FIELD_COLOR;
  261.  style.left   = BORDER_SIZE + FIELD_WIDTH/2 + "px";
  262.  style.top    = FIELD_HEIGHT + BORDER_SIZE*2 + "px";
  263.  style.width  = FIELD_WIDTH/2 + "px";
  264.  style.height = SCORE_HEIGHT + "px";
  265.  style.fontFamily = SCORE_FONT_FAMILY;
  266.  style.fontSize   = SCORE_FONT_SIZE;
  267.  
  268.  //method: clear() : Clear display
  269.  obj.clear = function(){
  270.    obj.divField.innerHTML = ''
  271.    obj.sprite = new Array();
  272.    obj.field  = new Array();
  273.    obj.zIndex = 0;
  274.  }
  275.  
  276.  
  277.  obj.clear();
  278.  
  279.  
  280.  //method: createSprite()
  281.  obj.createSprite=function(){
  282.    var s = new Sprite(obj.divField, obj.zIndex++ );
  283.    obj.sprite.push(s)
  284.    return(s);
  285.  }
  286.  
  287.  //method: setViewXY(x,y)
  288.   obj.setViewXY=function(x, y) {
  289.      obj.viewX=x;
  290.      obj.viewY=y;
  291.     }
  292.  
  293.  //method: getViewX()
  294.    obj.getViewX=function() {
  295.    return obj.viewX;
  296.     }
  297.  
  298.  //method: getViewY()
  299.     obj.getViewY=function() {
  300.          return obj.viewY;
  301.      }
  302.   obj.setViewXY(0, 0);
  303.  
  304.  
  305.  // KEYBOARD
  306.  // initialize key[] = false  
  307.  obj.key = new Array();
  308.  for (i=0;i<KEY_COUNT;++i){obj.key[i] = false}
  309.  
  310.  // Event for keydown
  311.  document.onkeydown = function(e){
  312.    // firefox
  313.    if (e) { obj.key[e.which] = true;}
  314.    // Internet Explorer
  315.    else   { obj.key[event.keyCode] = true;}
  316.  }
  317.  
  318.  // Event for keyup
  319.  document.onkeyup = function(e){
  320.    // firefox
  321.    if (e) { obj.key[e.which] = false;}
  322.    // Internet Explorer
  323.    else   { obj.key[event.keyCode] = false;}
  324.  }
  325.  
  326.  //method: isKey(code)
  327.  obj.isKey=function(code){ return obj.key[code]; }
  328.  
  329.  
  330.  // Checking  Hit of focused_sprites
  331.  obj.testHitSprite=function(focus_spr) {
  332.    var hit=false;
  333.    var i;
  334.    for (i=0; i<obj.sprite.length; i++) {
  335.      if (focus_spr!=obj.sprite[i]){
  336.        if (focus_spr.testHitSprite(obj.sprite[i])) {hit=true;}
  337.      }
  338.    }
  339.    return hit;
  340.  }
  341.  
  342.  // Checking Hitted with NonSpiderAmino
  343.  obj.testHitNonSnakeAminoNum=function(focus_spr) {
  344.    var i;
  345.    var hit_num;
  346.  
  347.    hit_num = -1;
  348.    for (i=1; i<obj.sprite.length; i++) {
  349.      a = i-1;
  350.      if ((focus_spr!=obj.sprite[i]) && (a>=0)){
  351.        if ((focus_spr.testHitSprite(obj.sprite[i]))&&(obj.amino[a].snake_num==-1))  {hit_num = a;}
  352.      }
  353.    }
  354.    return(hit_num);
  355.  }
  356.  
  357.  
  358.  //method: onUpdate()
  359.  obj.onUpdate=function(){
  360.    /* user describe his own procedure here!! */
  361.  }
  362.  
  363.  //method: update()
  364.  obj.update = function(){
  365.    obj.onUpdate();
  366.    var i;
  367.    for (i=0;i<obj.field.length;++i){
  368.      obj.field[i].onUpdate();
  369.    }
  370.    for (i=0;i<obj.sprite.length;++i){
  371.      obj.sprite[i].onUpdate();
  372.    }
  373.  
  374.    for (i=0;i<obj.field.length;++i){
  375.      obj.field[i].update(obj.viewX, obj.viewY);
  376.    }
  377.  
  378.    for (i=0;i<obj.sprite.length;++i){
  379.       obj.sprite[i].update(obj.viewX, obj.viewY);
  380.    }
  381.  
  382.  }
  383.  
  384.   obj.getScore=function(){
  385.     return(obj.score);
  386.   }
  387.  
  388.   obj.setScore=function(score){
  389.     obj.score = score;
  390.     obj.divScore.innerHTML = "Score:" + obj.score;
  391.   }
  392.  
  393.   obj.setScore("woops");
  394.   setInterval(obj.update, UPDATE_INTERVAL);
  395.  
  396. }

Raw Paste


Login or Register to edit or fork this paste. It's free.