Hatena::Groupgeneration1986

tyoro.g86

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

2008-06-04

継承関数

03:15

昨日のソース書かないといけないと思ってた事書くの忘れてた。

継承を自前でやるのが面倒だったのでinheritって関数はこちらから拝借した。

JavaScriptによるオブジェクト指向プログラミング

(ってかこれ9年前の記事か!古っ!

それ以前にos0xさんの記事からprototypeにあるような(ってかYUIに近い?)extendって関数を拝借してたんだけど、これには問題があった。

JavaScript継承パターンまとめ - Thousand Years

function extend(s, c)
{
	function f(){};
	f.prototype = s.prototype;
	c.prototype = new f();
	c.prototype.superclass = s.prototype;
        c.prototype.superclass.constructor = s;
	c.prototype.constructor = c;
	return c;
};

Sprite = extend(Window, function(img,id,css,pos,parent)
{
    this.superclass.constructor(id,css,pos,parent);

    //hogehoge

});

ちゃんと検証してないので確証は無いけど、この実装のままだと、Windowのコンストラクタ内でthis使ってた時に、生成したSpriteクラス全てでthisの内容を共有する羽目になるっぽい?

2個Sprite作って先に作った方のaction読んでるのに、後から登録した方が移動するという珍現象とぶつかって、原因解明大変だった。

これに気付くのに一番時間かかった。

楽しようとするとダメね。


せっかくサイ本読書会もprototypeの範囲越えたし、継承に利用する関数について一回ちゃんと検証した方が良さそう。

自分への宿題。

検証した

21:38

function A(ob){
    this.ob = ob;
}
B= extend(A, function()
{
    this.superclass.constructor(this);
});

a = new Array();
a = new B(1);
b = new B(2);
console.debug(a.ob == b.ob);//true
console.debug(a == b);//false
console.debug(a.ob == b);//true
console.debug(a.ob == b);//true

どう見てもthis共有してます。

ってか親コンストラクタのthisはsuperclassのthisになんのかな?

とりあえず呼び出しを

this.superclass.constructor.apply(this,[this]);

って形にしたら全部falseが帰ってくるようになりますた。


inheritで実装してる方もapply使うとスマートになるだろうから、どっち使っても変わらん気もするけど、継承先のclassのコンストラクタ内で継承元のclassの関数名を書かねばならいあたり、inheritの方が冗長な気がするので、次の実装ではextendに戻すかな。

ただ、extendってJScriptでは将来的な予約語になってるらしいので、関数名変えた方が良さそう。

os0xos0x2008/06/18 13:42だいぶ反応遅いけど、
this.superclass.constructor(this);

this.superclass.constructor.apply(this,arguments);
にすると良い感じかも。

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全部脳内展開しながら書いたので向きどっか間違えてっかも。

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

ダイヤリーデザインについて追記

16:04

このデザイン、ソースみにくっwww

カラーは好きなんだけどなぁ。

ソース部分のcssって書き換えられるんだろうか。

追記:編集出来ますた。

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/

2008-06-02

風邪ひいとりました

14:20

風邪引いちゃって日曜日のお食事会、ギリギリ滑りこませてもらったのにご迷惑をかけてしまった(n'ω'`)

関係者の方、その節はすいませんでした(n'ω'`)

次回は参加しとう思います。

いきなりこんな感じですが今後ともよろしくです。

Cが読めない

14:20

id:yaottiの日記でC言語の習作が上げられてて、全然読めなくてびっくりした。

元々C++ライクなC言語を通すようなあまあまなコンパイラでC言語勉強したから厳格なC書けないんだけど、それ以前の問題だわ。

後、問題の解決案としてchar型の配列に終端文字セットして明示的に長さ渡さなくてもいいじゃん的な事言ったけど、これはあからさまに最近やってる言語の影響受けまくってるだけで、C/C++の慣例的な書きかたを無視してるよなぁ。

(そもそも慣例的な書き方ってどんなだっけ( ´-`)

昔の感覚だと、C言語のこの手の関数ってメモリの長さチェック自体行なわない傾向にある気がするけど、どうだったかなぁ。


久しぶりにC触ってみるかなーとVS起動しようと思ったら、今使ってるのMacだと思い出して悲しい事に。。。

早くWin機に電源付けないとなぁ。

ゲームの事

14:20

ゲームの事書くって言ってたけどプレイはほとんどしてないので設計的な事書こうかと思ったけど、実際そこまで書けるような知識も無いのよねぇ。

こないだCRPGの歴史を語る上で重要なRPGは?

みたいな話があったので、その影響を受けて色々書いてはみてたんだけど、やってないゲーム多すぎるわ。

って事で、ここではJavaScriptでゲーム作る事にしました。

まずはリハビリがてらテトリスでも書こうか。

EmanEman2012/08/05 08:41This website makes tnhigs hella easy.

ouwoodlouwoodl2012/08/05 16:55LpA90J <a href="http://ofzpfuvcmwbl.com/">ofzpfuvcmwbl</a>

cyajfvvbcyajfvvb2012/08/06 13:15PdDrmA , [url=http://eykxetsesduz.com/]eykxetsesduz[/url], [link=http://kxmddgqkdyuo.com/]kxmddgqkdyuo[/link], http://wbhrwndmrjec.com/

uwfavpquwfavpq2012/08/07 13:59k4q1SE <a href="http://fnuramfnkvbz.com/">fnuramfnkvbz</a>

eljbroleljbrol2012/08/08 12:59oCXlxF , [url=http://dbzxmypppafv.com/]dbzxmypppafv[/url], [link=http://ouunorjycjvw.com/]ouunorjycjvw[/link], http://honzrcvcpfbg.com/

2008-05-30

何も書いてなかったので自己紹介とか

13:14

別所にブログがあると、こーゆーグループの所に何書いていいか分かりませんね。

どうもtyoroです。

85の12月産なので、+1ヶ月で86な感じです。

普段twitterでばっかりしてるので、こーゆーグループとかで全然活動してなくてg86に絡めてなくて少し寂しいっすね。

せっかくなので最初のエントリとして自己紹介的な事でも書いてみます。

と思ったけど、なんかmixiっぽいなこーゆーの、やめだやめ。



勉強内容とかの記事が多いのかなここ。

切磋琢磨してる感があっていいけど、どう絡んでいったものか。

一応blog2つに日記とプログラム関連の事書きわけてて、はてダも使ってないし、グループ3~4つ入ってるけど、そこまで分散化してどうすんだって感じだったりもしますが。

何かかきたいねここ。

プログラマの端くれですがゲームに興味が強いので、ゲームの事でも書こうかな。

なんかここでは異端な感じがするけど。

まぁなるようにしかならないので。


さて、サイ本の読書会の懇親会でお食事会に誘われたけど行っていいのものかどうか。

集る事を目的としては意味がないって理念があるようなので、集まってばっかりの俺はLTとか出来るようになるまで待つかなー。

ukstudioukstudio2008/05/30 14:07よっ!
あんまり難しく考えず、気楽にいけばいいと思うよー。

tyoro1210tyoro12102008/05/30 19:00やっ!
こっちでもよろすくよろすく。

気楽にまったりがんばるよー。

VoQnVoQn2008/05/30 22:38ゆっ!

くり
して
いっ
てね!!

yaottiyaotti2008/05/30 23:11お食事会ぜひ来てくださいー!!
たぶん、LTバリバリできる人ばかりじゃないです(俺とか

tyoro1210tyoro12102008/05/31 02:46ありがとうありがとう>、<
ゆっくりしていってねアワー見ながらガンバル!

お食事会がギリギリすぎる>、<

AidahAidah2012/08/04 16:16I have been so bweldieerd in the past but now it all makes sense!

rwyywrxsrwyywrxs2012/08/07 19:02tTEk6A , [url=http://zeklexikpawp.com/]zeklexikpawp[/url], [link=http://mtxlygcupdtt.com/]mtxlygcupdtt[/link], http://bvrpjxofjryi.com/