Hatena::Groupgeneration1986

tyoro.g86

86世代と全然絡んでない人の日記
 | 

2008-06-03

ブロックが落ちてくる所まで

16:01

勢いでとりあえずここまで

入力どうするか考えだした所でダレたので、次は入力実装しますー

ブロック落ちてくるヤツ

以下ソース

var GAME_AREA_HIGHT = 440;
var BLOCK_SIZE = 10;
var IMAGE_FILE = "img/block.gif";
var BlockPattern = [
[[[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,0,0,0]],[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]],[[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,0,0,0]],[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]] ],
[[[1,0,0,0],[1,0,0,0],[1,1,0,0],[0,0,0,0]],[[0,0,0,0],[1,1,1,0],[1,0,0,0],[0,0,0,0]],[[1,0,0,0],[1,0,0,0],[1,1,0,0],[0,0,0,0]],[[0,0,0,0],[1,1,1,0],[1,0,0,0],[0,0,0,0]] ],
[[[1,1,0,0],[1,0,0,0],[1,0,0,0],[0,0,0,0]],[[0,0,0,0],[1,1,1,0],[0,0,1,0],[0,0,0,0]],[[1,1,0,0],[1,0,0,0],[1,0,0,0],[0,0,0,0]],[[0,0,0,0],[1,1,1,0],[0,0,1,0],[0,0,0,0]] ],
[[[1,0,0,0],[1,1,0,0],[1,0,0,0],[0,0,0,0]],[[0,0,0,0],[1,1,1,0],[0,1,0,0],[0,0,0,0]],[[1,0,0,0],[1,1,0,0],[1,0,0,0],[0,0,0,0]],[[0,0,0,0],[1,1,1,0],[0,1,0,0],[0,0,0,0]] ],
[[[0,0,0,0],[1,1,0,0],[1,1,0,0],[0,0,0,0]],[[0,0,0,0],[1,1,0,0],[1,1,0,0],[0,0,0,0]],[[0,0,0,0],[1,1,0,0],[1,1,0,0],[0,0,0,0]],[[0,0,0,0],[1,1,0,0],[1,1,0,0],[0,0,0,0]] ],
[[[1,0,0,0],[1,1,0,0],[0,1,0,0],[0,0,0,0]],[[0,0,0,0],[0,1,1,0],[1,1,0,0],[0,0,0,0]],[[1,0,0,0],[1,1,0,0],[0,1,0,0],[0,0,0,0]],[[0,0,0,0],[0,1,1,0],[1,1,0,0],[0,0,0,0]] ],
[[[0,1,0,0],[1,1,0,0],[1,0,0,0],[0,0,0,0]],[[0,0,0,0],[1,1,0,0],[0,1,1,0],[0,0,0,0]],[[0,1,0,0],[1,1,0,0],[1,0,0,0],[0,0,0,0]],[[0,0,0,0],[1,1,0,0],[0,1,1,0],[0,0,0,0]] ]
];

function copy_undef_properties(src, dest)
{
  for (var prop in src) {
    if (typeof(dest[prop]) == "undefined") { 
      dest[prop] = src[prop];
    }
  }
}

function inherit(subClass, superClass) 
{
  copy_undef_properties(superClass.prototype, subClass.prototype);
}

function Window(id,css,pos,parent){
  var buf = $(document.createElement('div'));

  if(id != null && id != '' )
    buf.attr('id',id);
  if(css != null && css != '' )
    buf.attr('style', css );
  buf.attr('class','window');

  if( parent != null ){
    parent.window.append(buf);
      this.parent = parent;
  }else{
    main_area.append(buf);
      this.parent = main_area;
  }

  if( pos != null ){
    buf.css('left', pos.x);
    buf.css('top', pos.y);
  this.pos = pos;
  }else{
    buf.css('left', 0);
    buf.css('top', 0);
  this.pos = {x:0,y:0};
  }
  this.id = id;
  this.window = buf;
}

Window.prototype.deleteWindow = function(){
  this.window.remove();
}
Window.prototype.showWindow = function(){
  this.window.css('display','block');
  return this;
}
Window.prototype.hideWindow = function(){
  this.window.css('display','none');
  return this;
}
Window.prototype.move = function(x,y){
  this.pos.x +=x;
  this.pos.y +=y;
    this.window.css('left', this.pos.x);
    this.window.css('top', this.pos.y);
  return this.pos;
}
Window.prototype.moveTo = function(x,y){
  this.pos.x = x;
  this.pos.y = y;
    this.window.css('left', this.pos.x);
    this.window.css('top', this.pos.y);
  return this.pos;
}

function Sprite(img,id,css,pos,parent){
  this.superclass = Window;
  this.superclass(id,css,pos,parent);
  this.window.attr('class','sprite');

  var buf_img = $(document.createElement('img'));
  buf_img.attr('src',img);
  this.window.append(buf_img);

}

inherit(Sprite,Window);

function Game(){
  this.count = 1;
  this.tasks = Array();
}

Game.prototype.loop = function(){
  if( this.tasks ){
    for( i=0 ; i < this.tasks.length ; i++ ){
      this.tasks[i]();
        }
  }
    this.count++;
}

Game.prototype.begin = function(){
    s = this;
  this.timer_id = setInterval( function(){s.loop();},33 );
}
Game.prototype.end = function(){
  crearInterval(this.timer_id);
}
Game.prototype.add = function(task){
  this.tasks.push(task);
}

function Teto(){
  this.superclass = Game;
  this.superclass();

  win_css = [
        "width:320;",
        "height:440;",
        "background-color:#cccccc; "
        ].join('');
  id_win = 'main_window';

  line_area=new Window(id_win,win_css,{x:20,y:20});
  line_area.showWindow();

  next_css = [
        "width:120;",
        "height:60;",
        "background-color:#cccccc; "
        ].join('');
  id_next = 'next_window';
  next_area=new Window(id_next,next_css,{x:360,y:20});
  next_area.showWindow();

  this.now_block = new Block(line_area);
  this.next_block = new Block(next_area,{x:4,y:2},2);

  s = this;
  this.add(function(){s.now_block.action();});
}
inherit(Teto,Game);

Teto.instance = null;

Teto.getInstance = function(){
  if( !Teto.instance )
    Teto.instance = new Teto();
  return Teto.instance;
}

function Block(area,pos,des,type){

//block種別の決定
  this.type = type ? type : Math.floor( Math.random()*BlockPattern.length);
//初期位置にセット
  this.pos = pos ? pos : {x:5,y:0};
//向き
  this.des = des ? des : 0;


//画像を4つ生成
this.img = new Array();
  for(i=0;i<4;i++){
    this.img[i] = new Sprite(IMAGE_FILE,'','',null,area);
    this.img[i].showWindow();
  }

  Block.prototype.imageReset.apply(this);
}

//落下と一致判定の処理
Block.prototype.action = function(){
  if(!(Teto.getInstance().count % 20)){
    this.down();
  }
}

Block.prototype.down = function(){
  //落ちる事が可能か?
  if(Block.check(0,0,0)){
    //可能な場合は下へ
    this.pos.y++;
    this.imageReset();
  }else{
    //不可能の場合は設置動作
  }
//debug code
if( this.pos.y*BLOCK_SIZE > GAME_AREA_HIGHT){this.pos.y =0;this.imageReset();}
}

Block.prototype.imageReset = function(){
  k=0;
  for(i=0;i<4;i++){
    for(j=0;j<4;j++){
      if(BlockPattern[this.type][this.des][i][j] == 1){
        this.img[k].moveTo((this.pos.x+i)*BLOCK_SIZE,(this.pos.y+j)*BLOCK_SIZE)
        if( ++k >= 4 ){
          i=4;j=4;
        }
      }
    }
  }

}

Block.check = function(type,pos,des){
  return true;
}

var main_area = $("#game_area");

$(function(){Teto.getInstance().begin();t = Teto.getInstance();});

もうちょっと可読性上がるようにまとめますorz

loopの内部とかtaskの扱いとかかなりとりあえず感が漂います。

適切な実装が思い浮かんだら修正します。

正直経過時間とか見ながらフレームスキップ調整しようにも描画しないという選択肢がないので、どうしていいか・・・



・どうでもいい説明

Windowクラスがエリア内にdivのwindow作るためのクラス

SpriteはWindowクラスを継承した画像表示用のクラス

Gameはメインループとかゲーム全体の情報を保持

TetoはGameを継承した各ゲーム固有のクラス

Blockはそのままブロックの表示とか移動を行なうクラス

使うには

<div id="game_area">
</div>

みたいなの用意してmain_areaって変数jQueryオブジェクト化したの置いとく感じで。



後、BlockPattern全部脳内展開しながら書いたので向きどっか間違えてっかも。

間違えてたら回転実装してから気付いて直すー。

SyuuSyuu2012/08/06 14:05I appercaite you taking to time to contribute That's very helpful.

falsdqcecpzfalsdqcecpz2012/08/07 05:11Q7QmR5 <a href="http://deypbbuaemay.com/">deypbbuaemay</a>

jbjseczzsjbjseczzs2012/08/08 10:14eSPtAg <a href="http://xlzrbsatmxma.com/">xlzrbsatmxma</a>

xzjdzczwxzjdzczw2012/08/09 05:11Lawllc , [url=http://swzfrbjqkviv.com/]swzfrbjqkviv[/url], [link=http://njgmgjepwmyq.com/]njgmgjepwmyq[/link], http://grrswgvddgvk.com/

 |