gun.sprite.js - sample 3

아래 예제는 건이네에서 작성한 Sprite in gun.sprite.js (mootools 1.2) 에서 사용된 예제입니다.

Sample

press '←','↑','↓','→' key

Code

htm


  <div id="screen">

    <div id="player1"></div>

    <div id="screenDesc">press '←↑↓→' key</div>

  </div>

css


  #screen {position:relative; width:300px; height:300px; border:1px solid black; margin:0 auto; overflow:hidden; }

  #screenDesc {position:absolute; }

  #player1 {position:absolute; top: 120px; left: 140px;}

script


  <script type="text/javascript" src="mootools-1.2-core.js"></script>

  <script type="text/javascript" src="gun.sprite.js"></script>

  <script type="text/javascript">

  var Player = new Class({

    initialize: function() {

      this.player = $('player1');

      this.screen = $('screen');

      this.sprite = new gun.sprite.Sprite(this.player, {sprite: 'url(grace1xx6.jpg)', framesPerMovie:4, movies:{'down':[1,1],'left':[2,1],'right':[3,1],'up':[4,1]}, movie:'down',  frameSize:[32,48], framesPerMovie:4, wrap:true});

      this.savePos();

      this.SPEED = 4;

    },

    savePos: function() {this.pos = this.player.getPosition($('screen'));},

    move: function(movie) {

      var offset = this.SPEED;

      if(movie == 'left' || movie == 'up') offset = -this.SPEED;

      if (movie == 'left' || movie == 'right') this.player.setStyle('left', this.pos.x += offset);

      else this.player.setStyle('top', this.pos.y += offset);

      this.savePos();

      this.sprite.stepFrame();

    }

  });

  var p;

  window.addEvent('domready', function() { p = new Player(); });

  window.addEvent('keydown', function(e) {

    if (['left','right','up','down'].contains(e.key)) {

      p.move(e.key);

      e.stop();

    }

  });

  </script>

Resource

grace1xx6.jpg (출처 : internet 기억안남)