はてなハイク STAR FIGHTERS

by lieutar 2010-12-30 [2010/12/30 15:12:55]

はてなハイクで実行すると、星を打ちあう簡単な対戦型シューティングが初まる。カーソルキーで移動、Zで星発射。ESCで終了

@@ -129,6 +129,7 @@
     };
   })();
 
+document.addEventListener( 'keypress', function(e){ e.preventDefault();}, false);
 
   window.addEventListener(
     'keydown', function(e){

• /*
   * @title haiku-shoot
   * @description はてなハイクで自アイコンを操作します(つくりかけ。なげだすかも)
   * @include http://h.hatena.ne.jp/*
   * @license MIT License
   * @require 
   */
  
  (function(){
    var Z_INDEX_USER   = 65536;
    var Z_INDEX_BULLET = 65535;
  
    var Bullet = (function(x,y){
      this.x=x;
      this.y=y;
    });
    Bullet.prototype = {
      fire: function(x,y){
        var img = document.createElement('img');
        img.src = 'http://s.hatena.ne.jp/images/star.gif';
        document.body.appendChild(img);
        img.style.position = 'fixed';
        var sx = this.x;
        var sy = this.y;
        setTimeout(function(){
          img.style.top  = (sy - img.clientHeight / 2) + 'px';
          img.style.left = (sx - img.clientWidth / 2) + 'px';
          sx += x;
          sy += y;
          if(sx > 0 && sx < window.innerWidth && sy > 0 && sy < window.innerHeight){
            setTimeout(arguments.callee, 10);
          }else{
            img.parentNode.removeChild(img);
          }
        },10);
      }
    };
  
    var user = (function(){
      var name = document.evaluate('.//p[@class="username"]/a/text()',
                                       document.body,
                                       null,
                                       XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
                                       null).snapshotItem(0).data;
      var img = new Image();
      img.src = (
        'http://www.st-hatena.com/users/' + name.substring(0,2) + '/' + name + '/profile.gif'
      );
      document.body.appendChild(img);
      img.style.zIndex   = String(Z_INDEX_USER);
      img.style.position = 'fixed';
      img.style.top      = (window.innerHeight - img.clientHeight - 10) + 'px';
      img.style.left     = Math.floor((window.innerWidth  - img.clientWidth ) / 2) + 'px';
      return {
        name: name,
        icon: img,
        speed: 5,
        shot: function(){
           var bullet = new Bullet(Math.floor(img.offsetLeft + img.clientWidth /
                                              2),img.offsetTop);
           bullet.fire(0,-20);
        },
        moving: false,
        _move_k: {n:0,s:0,w:0,e:0},
        _move_x: 0,
        _move_y: 0,
        stop: function(){
          if(!this.moving) return;
          clearTimeout(this.moving);
          this.moving = null;
        },
        move: function(dir){
          var _move_k = this._move_k;
          switch(dir){
            case 'n':
              _move_k.n = 1;
              if(_move_k.s > 0) _move_k.s = 2;
              break;
            case 'N':
              _move_k.n = 0;
              if(_move_k.s > 0) _move_k.s = 1;
              break;
            case 's':
              _move_k.s = 1;
              if(_move_k.n > 0) _move_k.n = 2;
              break;
            case 'S':
              _move_k.s = 0;
              if(_move_k.n > 0) _move_k.n = 1;
              break;
            case 'w':
              _move_k.w = 1;
              if(_move_k.e > 0) _move_k.e = 2;
              break;
            case 'W':
              _move_k.w = 0;
              if(_move_k.e > 0) _move_k.e = 1;
              break;
            case 'e':
              _move_k.e = 1;
              if(_move_k.w > 0) _move_k.w = 2;
              break;
            case 'E':
              _move_k.e = 0;
              if(_move_k.w > 0) _move_k.w = 1;
          }
          var x = 0;
          var y = 0;
          if(_move_k.s != _move_k.n){
            y = _move_k.s > _move_k.n ? 1 : -1;
          }
          if(_move_k.w != _move_k.e){
            x = _move_k.e > _move_k.w ? 1 : -1;
          }
          this._move_x = x;
          this._move_y = y;
          if(x == 0 && y == 0){
            this.stop();
            return;
          }
          if(this.moving) return;
          var self = this;
          (function(){
             img.style.top  = (img.offsetTop + self.speed * self._move_y) + 'px';
             img.style.left = (img.offsetLeft + self.speed * self._move_x) + 'px';
             self.moving = setTimeout(arguments.callee, 10);
          })();
        }
      };
    })();
  
  document.addEventListener( 'keypress', function(e){ e.preventDefault();}, false);
  
    window.addEventListener(
      'keydown', function(e){
         e.stopPropagation();
  //       console.log(e.keyCode);
         switch(e.keyCode){
           case 37: //LEFT
             user.move('w');
             break;
           case 38: //UP
             user.move('n');
             break;
           case 39: //RIGHT
             user.move('e');
             break;
           case 40: //DOWN
             user.move('s');
             break;
           case 90: // Z
             user.shot();
         }
      }, true
    );
    window.addEventListener(
      'keyup', function(e){
         e.stopPropagation();
         switch(e.keyCode){
           case 37: //LEFT
             user.move('W');
             break;
           case 38: //UP
             user.move('N');
             break;
           case 39: //RIGHT
             user.move('E');
             break;
           case 40: //DOWN
             user.move('S');
             break;
         }
      }, true
    );
  
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。