jsgame.js

"use strict";

// need: prototype.js


GlobalOption = Class.create();
GlobalOption.prototype = {
        //設定オプション
        initialize:function(){
                this.fps = 24;
                this.canvas_id = "main";
        }, 
        load_json:function(){
                //TODO
        }
}

//Sprite.js
Sprite = Class.create();
Sprite.prototype = {
        //オーバーライド用抽象クラス
        initialize:function(x, y, w, h){
                this.x = x || 0;
                this.y = y || 0;
                this.w = w || 0;
                this.h = h || 0;
        }, 
        render:function(ctx){
                // debug用 オーバーライドする
                ctx.beginPath();
                ctx.fillStyle = "black";
                ctx.fillRect(this.x, this.y, this.w, this.h);
                       
        }
}

ImageSprite = Class.create(Sprite,{
        //画像を扱うスプライト
        initialize:function($super,x,y,src){
                $super(x, y);
                this.image = new Image();
                this.image.src = src;
                this.w = this.image.width;
                this.h = this.image.height;
                this.scale = 1;
        }, 
        render:function(ctx){
                ctx.drawImage(this.image,
                        this.x ,  this.y, this.w, this.h);
        }
});

CharacterSprite = Class.create(ImageSprite,{
        //キャラクター画像を扱うスプライト
        initialize:function($super,x,y,src, size, scale,  dir){
                $super(x,y, src);
                this.size = size ||32;
                this.scale = scale || 1;
                this.dir = dir || 0 ;  
        }, 
        render:function(ctx){
                ctx.drawImage(this.image, 
                        this.size * (this.dir%3)   , this.size *  Math.round(this.dir/3) ,
                        this.size , this.size, 
                        this.x, this.y, this.size, this.size
                );
        }
});

MapObjectSprite = Class.create(ImageSprite, {
        //マップオブジェクト抽象スプライト
        initialize:function(){}
});

TextSprite = Class.create(Sprite,{
        //テキストを扱うスプライト
        initialize:function($super,x,y,text, color){
                $super(x, y);
                this.text = text;
                this.color = color || "black"; 
        }, 
        render:function(ctx){
                ctx.beginPath();
                ctx.font = "18px 'monospace'";
                ctx.fillStyle = this.color ;
                ctx.fillText(this.text, this.x, this.y);
        }
});

GridMatrixSprite = Class.create(Sprite, {
        //グリッドデータを保持するスプライト
        initialize:function(x, y, cell){
                this.x = x ;
                this.y = y ; 
                this.cell = cell || 32 ;
                this.visual = 0;
        }, 
        render:function(ctx){
                if(this.visual){
                        ctx.strokeStyle = "rgba(128, 128, 128, 200)"
                        for(var i=0;i<this.x;i++){
                                ctx.storkeStyle = "rgb(0, 0, 0) ";
                                ctx.beginPath();
                                ctx.moveTo(this.cell * i , 0);
                                ctx.lineTo(this.cell * i , this.cell * this.y);
                                ctx.closePath();
                                ctx.stroke();
                        }
                        for(var i=0;i<this.y;i++){
                                ctx.strokeStyle = "rgba(128, 128, 128, 200)"
                                ctx.beginPath();
                                ctx.moveTo(0 , this.cell * i);
                                ctx.lineTo(this.cell * this.y , this.cell * i);
                                ctx.closePath();
                                ctx.stroke();
                        }
                }
        }
});

//Scene.js
Scene = Class.create();
Scene.prototype = {
        //Scene抽象クラス
        initialize:function(canvas_id){
                this.ctx = document.getElementById(canvas_id).getContext("2d");
                this.sprites = {};
        },
        render:function(){
                this.ctx.clearRect(-10,-10,1000,800);
                this.ctx.save();
                for(var i in this.sprites){
                        this.sprites[i].render(this.ctx);
                }
                this.ctx.restore();
        }, 
        update:function(keys){}
}

OpeningScene = Class.create(Scene,{
        //Opening & debug
        initialize:function($super,selecter){
                $super(selecter);
                this.sprites = { 
                        "grid":new GridMatrixSprite(100, 100),  
                        "op_mes":new TextSprite(100, 20, "mizchi's game framework"), 
                        "key_state": new TextSprite(100, 40, "keystate"), 
                        "obj1" : new CharacterSprite(32*8,32*8,"img/ch0.png")
                };
        }, 
        update:function(keys){
                //this.sprites["op_mes"].text = ~~(new Date);
                //debug
                this.sprites["grid"].visual = 1;
                this.sprites["key_state"].text =
                        "left:" +keys["left"]+
                        " up:"+keys["up"]+
                        " right:" +keys["right"]+
                        " down:"+keys["down"];
                //Walking
                var stride = 8;
                if(keys["down"]) {
                        this.sprites["obj1"].y += stride; 
                        this.sprites["obj1"].dir = 1;
                }
                if(keys["left"]) {
                        this.sprites["obj1"].x -= stride; 
                        this.sprites["obj1"].dir = 4;
                }
                if(keys["right"]) {
                        this.sprites["obj1"].x += stride; 
                        this.sprites["obj1"].dir = 7;
                }
                if(keys["up"]){ 
                        this.sprites["obj1"].y -= stride;
                        this.sprites["obj1"].dir = 10;
                } 
                return "op" ;//Sequence
        } 
}); 

//System.js
System = Class.create();
System.prototype = {
        //ゲームシステム管理クラス
        initialize:function(option){
                this.scenes = {"op":new OpeningScene(option.canvas_id)};
                this.current_scene = "op";
        },
        get_keys:function(){
                return g_keys;
        }, 
        loop:function(){
                keys = this.get_keys();
                this.current_scene = this.scenes[this.current_scene].update(keys);
                this.scenes[this.current_scene].render();
        } 
}

// Key_manager
var g_keys = {
        //input key manager
        "left":0 , 
        "right":0 , 
        "up": 0, 
        "down": 0, 
        "SPC":0
}

function changeKey(which, to){
        //keychange capture
        switch (which){
        case 65:case 37: g_keys["left"]=to; break; // left
        case 87: case 38: g_keys["up"]=to; break; // up
        case 68: case 39: g_keys["right"]=to; break; // right
        case 83: case 40: g_keys["down"]=to; break;// down
        case 32: key["SPC"]=to; break; // space bar;
        }
}
document.onkeydown=function(e){changeKey((e||window.event).keyCode, 1);}
document.onkeyup=function(e){changeKey((e||window.event).keyCode, 0);}

// init

function init(){
        //初期化
        var fps = 24;
        sys = new System(new GlobalOption());
        var g_timer= setInterval("sys.loop()", 1000/fps);
}


window.onload = function(){
        init();
        dctx = document.getElementById("main").getContext("2d");
        //debug_func();
}


//for debug
var dctx = "";//document.getElementById(selecter).getContext("main"); 
debug_func = function(){
        obj1 = new CharacterSprite(100,50,"img/ch0.png");
        obj2 = new CharacterSprite(150,100,"img/ch0.png");
        obj2.dir = 5;
        scene = new Scene("main");
        scene.sprites = {item1:obj1, item2:obj2};
        scene.render();
};

function range(start, end, step) {
  return (
    (start === undefined) ?
      new Error('range expected at least 1 arguments, got 0') :
    (typeof start !== 'number') ?
      new Error('range() integer start argument expected, got ' + typeof start) :
    (end !== undefined && typeof end !== 'number') ?
      new Error('range() integer end argument expected, got ' + typeof end) :
    (step !== undefined && typeof step !== 'number') ?
      new Error('range() integer step argument expected, got ' + typeof step) :
    (step === 0) ?
      new Error('range() step argument must not be zero') :
    (arguments[3]) ?
      new Error('range expected at most 3 arguments, got ' + arguments.length) :

    (function(start, end, step, list) {
      return (
        (step > 0 && start < end || step < 0 && start > end) ?
          arguments.callee(start+step, end, step, list.concat(start)) :
        list
      );
    })(end === undefined ? 0 : start, end === undefined ? start : end, step === undefined ? 1 : step ,[])
  );
}