Forked from: phi's template - tmlib.js 0.1.7 View Diff (492)

縦STG for tmlib.js 0.1.7

alkaid_72th

2014-02-24 19:39:29

License: MIT License

Fork: 1

Fav: 2

View: 2740

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 510 lines
HTML 2 lines
CSS 3 lines

-概要-

大学ゼミでゲーム制作合宿(2013/07/13 ~ 2013/07/14)にて

tmlib.js で縦シューティングゲームを作ろう！ってことで作ってます。

※現在、ゲームではなく、自機の動きを確認できるデモです。

(更新日時　2013/07/14/18:37)

-操作説明-

タイトル画面で「GameStart」をタッチ(クリック)するとゲーム画面へ遷移します。

タイトル画面で「HowToPlay」と「Config」をタッチ（クリック）するとそれぞれの画面(未実装)へ遷移します。

再度、画面をタッチ（クリック）するとタイトル画面へ遷移します。

※現在、「Config」をタッチするとゲームオーバー画面へ遷移します。

画面を触る(クリックする)と、自機の攻撃ができます。

画面上で指を動かす(ドラックする)と、指の向きと移動量に沿って自機が動き続けます。

画面から指を離す(クリックしてない)と、自機はその場に止まります。

(更新日時　2013/07/20/23:18)

-動作検証-

動作する

iPhone4s ： Safari,　Chrome
iPhone5 : Chrome

動かない

※（ゲーム画面へ遷移しない）

ELUGA X P-02E : Chrome
GALAXY S III α SC-03E : Chrome, 標準ブラウザ
Xperia ray SO-03C : 標準ブラウザ
GALAXY SIII Progre SCL21 : Chrome, 標準ブラウザ

(更新日時　2013/07/14/18:37)

-更新履歴-

ローディング画面が表示される位置を修正(2013/07/20/23:38)
ゲームオーバー画面とスコアのTweet機能の実装(2013/07/20/23:18)
自機の軌跡を修正(2013/07/14/18:37)
合宿終了と共に公開(2013/07/14/18:37)

-Issue-

敵の実装(表示, 行動ルーチン, 衝突判定, 出現パターン, アニメーション)
アイテムの実装(表示、衝突判定, 効果適用, 出現条件)
ボム(取得, ストック, 発動,　アニメーション)
操作説明の挿入
コンフィグの実装(BGM：On/Off, 音量, ボム:Auto/Manual, 難易度選択)

(更新日時　2013/07/20/23:38)

-懸案事項-

Assertion failed: Sprite の第一引数はテクスチャもしくはテクスチャ名に変わりました tmlib.js:11243 がconsoleへ出力される。
Androidの端末でタイトル画面からゲーム画面へ遷移しない。

(更新日時　2013/07/20/23:38)

-連絡先-

動作確認の報告や、感想、質問などは下記のTwitter垢へ連絡を貰えると嬉しいです。 Twitter_ID：alkaid_72th

メールアドレス:b040184@cuc.ac.jp

縦STG for tmlib.js 0.1.7

/*
 * 画像を連想配列で定義
 * @title:タイトル画面の画像
 * @player:自機の画像
 */
var ASSETS = {
    "title": "http://jsrun.it/assets/q/m/g/C/qmgCV.png",
    "player": "http://jsrun.it/assets/f/L/f/5/fLf5s.gif"
};

/*
 * 定数
 */
var SCREEN_WIDTH = 320;
var SCREEN_HEIGHT = 320;
var　ITEM_SIZE = 16;

/*
 * グローバル変数
 */
var app;
var game_UI, p_Bullet_img, i_PowerUp_img;
var player;
var score;
var get_Item_Flag = false;

/*
 * プリロード
 *　canvas要素で描画したものを先に読み込んでおく
 */
tm.preload(function(){
    //メニュー描画
    var img0 = tm.graphics.Canvas();
    img0.resize(SCREEN_WIDTH / 4, SCREEN_HEIGHT);
    img0.fillStyle = "hsl({0}, 80%, 50%)".format(360 / 30 * 18);
    img0.roundRect(0, 0, SCREEN_WIDTH / 4, SCREEN_HEIGHT, 3);
    img0.alpha = 0.1;
    game_UI = img0;
    //自弾の描画
    var img1 = tm.graphics.Canvas();
    img1.resize(12, 16);
    img1.fillStyle = "hsl({0}, 80%, 50%)".format(360 / 30 * 18);
    img1.fillTriangle(6, 0, 6, 8, 0, 16);
    img1.fillTriangle(6, 0, 6, 8, 12, 16);
    p_Bullet_img = img1;
    //パワーアップの描画
    var img2 = tm.graphics.Canvas();
    img2.resize(ITEM_SIZE, ITEM_SIZE);
    img2.fillStyle = "hsl({0}, 80%, 50%)".format(360 / 30 * 11);
    img2.alpha = 0.9
    img2.fillCircle(ITEM_SIZE / 8 * 4, ITEM_SIZE / 8 * 4, ITEM_SIZE / 8 * 1);
    img2.fillTriangle(
        ITEM_SIZE / 8 * 4,//ｘ１
        ITEM_SIZE / 8 * 0,//y1
        ITEM_SIZE / 8 * 3,//x2
        ITEM_SIZE / 8 * 2,//y2
        ITEM_SIZE / 8 * 5,//x3
        ITEM_SIZE / 8 * 2//y3
    );
     img2.fillTriangle(
        ITEM_SIZE / 8 * 0,//ｘ１
        ITEM_SIZE / 8 * 4,//y1
        ITEM_SIZE / 8 * 2,//x2
        ITEM_SIZE / 8 * 5,//y2
        ITEM_SIZE / 8 * 2,//x3
        ITEM_SIZE / 8 * 3//y3
    );
     img2.fillTriangle(
        ITEM_SIZE / 8 * 4,//ｘ１
        ITEM_SIZE / 8 * 8,//y1
        ITEM_SIZE / 8 * 5,//x2
        ITEM_SIZE / 8 * 6,//y2
        ITEM_SIZE / 8 * 3,//x3
        ITEM_SIZE / 8 * 6//y3
    );
    img2.fillTriangle(
        ITEM_SIZE / 8 * 8,//ｘ１
        ITEM_SIZE / 8 * 4,//y1
        ITEM_SIZE / 8 * 6,//x2
        ITEM_SIZE / 8 * 3,//y2
        ITEM_SIZE / 8 * 6,//x3
        ITEM_SIZE / 8 * 5//y3
    );
    i_PowerUp_img = img2;
});

/*
 * main
 */
tm.main(function(){
    app = tm.app.CanvasApp("#world");
    app.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
    app.fitWindow();
    //ローディング画面を定義する
    var loading = tm.app.LoadingScene({
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT, 
        assets: ASSETS,
        nextScene: TitleScene,
    });
    app.replaceScene(loading);//ローディング画面呼び出し
    app.run();//実行
});

/*
 * タイトル画面
 */
var TitleScene = tm.createClass({
    superClass: tm.app.Scene,
    init: function(){
        this.superInit();
        //タイトル画面を生成
        var image = tm.app.Sprite("title", SCREEN_WIDTH, SCREEN_HEIGHT).addChildTo(this);
        image.originX = 0;//x座標値を変更
        image.originY = 0;//ｙ座標値を変更
        //メニューボタンを生成
        for(var i = 0; i < 3; i++){
            this.menu = MenuButton(i, 160, i).addChildTo(this);
        }
    }
});

/*
 * メニューボタン
 * 引数 : メニューの番号, 描画するｘ座標, 描画するｙ座標
 * onpointingend : 押し終わったら実行する
 */
var MenuButton = tm.createClass({
    superClass: tm.app.LabelButton,
    init: function(menu_num, x, y){
        if(menu_num === 0){
            this.superInit("GameStart");
        }else if(menu_num === 1){
            this.superInit("HowToPlay");
        }else if(menu_num === 2){
            this.superInit("Config");
        }else if(menu_num === 3){
            this.superInit("Tweet");
        }else if(menu_num === 4){
            this.superInit("Title");
        }else{
            alert("MenuButton_init error");
            this.superInit("null");
        }
        this.menu_num = menu_num;
        this.width = SCREEN_WIDTH;
        this.height = 40;
        this.fontSize = 30;
        this.x = x;
        this.y = SCREEN_HEIGHT / 12 * 8 + (this.height + 2) * y;
    },
    onpointingend: function(){
        if(this.menu_num === 0){
            app.replaceScene(GameScene());
        }else if(this.menu_num === 1){
            app.replaceScene(HowToPlayScene());
        }else if(this.menu_num === 2){
            //app.replaceScene(ConfigScene());
            app.replaceScene(GameOverScene());
        }else if(this.menu_num === 3){
            //tweetする内容を記述する
            var twitterURL = tm.social.Twitter.createURL({
                type : "tweet",
                text : "@alkaid_72th \n tmlib.js 0.1.7で作ったシューティングゲームです. SCORE:" + score + "\n",
                hashtags : "tmlib",
                url : "http://jsdo.it/alkaid_72th/stg_02",
            });
            window,open(twitterURL);
        }else if(this.menu_num === 4){
            app.replaceScene(TitleScene());
        }
    }
});

/*
 * 操作説明画面
 */
var HowToPlayScene = tm.createClass({
    superClass: tm.app.Scene,
    init: function(){
        this.superInit();
        var label = tm.app.Label("HowToPlayScene-未実装-");
        label.setPosition(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
        label.setAlign("center").setBaseline("middle");
        this.addChild(label);
    },
    onpointingend: function(){app.replaceScene(TitleScene());}
});

/*
 * コンフィグ画面
 */
var ConfigScene = tm.createClass({
    superClass: tm.app.Scene,
    init: function(){
        this.superInit();
        var label = tm.app.Label("Config-未実装-");
        label.setPosition(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
        label.setAlign("center").setBaseline("middle");
        this.addChild(label);
    },
    onpointingend: function(){app.replaceScene(TitleScene());}
});

/*
 * ゲームオーバー画面
 */
var GameOverScene = tm.createClass({
    superClass: tm.app.Scene,
    init: function(){
        this.superInit();
        var label = tm.app.Label("GAME OVER");
        label.setPosition(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
        label.setAlign("center").setBaseline("middle");
        this.addChild(label);
         //メニューボタンを生成
        for(var i = 3; i < 5; i++){
            this.menu = MenuButton(i, 160, i - 3).addChildTo(this);
        }
    }
});

/*
 * ゲーム本体
 */
var GameScene = tm.createClass({
    superClass: tm.app.Scene,
    init: function(){
        this.superInit();
        //ステータス
        this.gameIU = tm.app.Sprite(game_UI, SCREEN_WIDTH / 4, SCREEN_HEIGHT);
        this.gameIU.setPosition(0, 0);
        this.addChild(this.gameIU);
        //自機を生成
        player = Player().addChildTo(this);
        //ゲームの更新回数を初期化
        this.tick = 0;
        //スコアを生成する
        score = 0;
        this.scoreLabel = tm.app.Label("", 16);
        this.scoreLabel.setPosition(60, 10);
        this.scoreLabel.setAlign("center").setBaseline("middle");
        this.addChild(this.scoreLabel);
    },
    displayScore: function(num){
        //スコア表示メソッド
        var len = String(num).length;//スコアの文字数
        var str　= "0";//文字列
        for(var i = 0; i < 5 - len; i++){str = str + "0";}//桁が足りない分だけ０で桁を埋める
        this.scoreLabel.text = (num < 1000000)? "SCORE:" + str + num : "SCORE:999999";//スコアを実際に表示する
        score += (this.tick % 20 === 0)? 10 : 0;//一定時間毎にスコアを加算
    },
    appearItem: function(){
        //アイテム出現メソッド
        if(this.tick % 100 === 0){
            this.item = ItemPowerUp().addChildTo(this);
            var x = Math.floor(Math.random() * 320);
            var y = Math.floor(Math.random() * 320);
            this.item.setPosition(x, y);
        }
    },
    update: function(){
        //定期更新メソッド
        this.displayScore(score);//スコア表示メソッドを呼び出す
        this.appearItem();//アイテム生成メソッド
        this.tick++;
    }
});

/*
 * 自機クラス
 * move : 移動メソッド
 * update : 定期更新メソッド
 */
var Player = tm.createClass({
    superClass: tm.app.AnimationSprite,
    init: function(){
        //アニメーションを作成する
        this.ss = tm.asset.SpriteSheet({
            "image": "player",
            "frame": {
                "width": 34,
                "height": 32,
                "count":6
            },
            "animations": {
                 "stop": {
                    frames: [0,0],
                    next: "stop",
                    frequency: 4,
                },
                "moveRight1": {
                    frames: [0, 2, 2, 3],
                    next: "moveRight2",
                    frequency: 4,
                },
                "moveRight2": {
                    frames: [3, 3, 3, 3],
                    next: "moveRight2",
                    frequency: 4,
                },
                "moveLeft1": {
                    frames: [0, 4, 4, 5],
                    next: "moveLeft2",
                    frequency: 4,
                },
                "moveLeft2": {
                    frames: [5, 5, 5, 5],
                    next: "moveLeft2",
                    frequency: 4,
                },
            }
        });
        this.superInit(this.ss, 34, 32);
        this.position.set(160, 160);//初期位置
        this.power = 1;//パワー
        this.tick = 0;//更新回数
    },
    move: function(first_X, first_Y, second_X, second_Y){
        //タッチスライドの大きさから仮の移動量を算出
        this.fx = (second_X - first_X) / 15;
        this.fy = (second_Y - first_Y) / 10;
        //移動量を是正する
        if(this.x + this.fx < this.width / 2 || this.x + this.fx > SCREEN_WIDTH - this.width / 2){
            this.fx = 0;
        }
        if(this.y + this.fy < this.height / 2 || this.y + this.fy > SCREEN_HEIGHT - this.height / 2){
            this.fy = 0;
        }
        //移動アニメーション
        if(this.direction === 0 || this.direction * this.fx < 0){
            //もし止まっている or this.directionとthis.fxの符号が違うなら
            if(this.fx > 0){
                this.direction = 1;
                this.gotoAndPlay("moveRight1");
            }else if(this.fx < 0){
                this.direction = -1;
                this.gotoAndPlay("moveLeft1");
            }else{
                this.gotoAndPlay("stop");
            }
        }else{
            if(this.fx > 0){
                this.gotoAndPlay("moveRight2");
            }else{
                this.gotoAndPlay("moveLeft2");
            }
        }
        //移動量を実際の座標に加算する
        this.x += this.fx;
        this.y += this.fy;
        if(this.fy <= 0){
            //自機の軌跡を描画する
        }
    },
    powerUp: function(){
        if(get_Item_Flag != false){
            if(get_Item_Flag === 1){
                (this.power < 7)? this.power += 2 : this.power += 0;
                get_Item_Flag = false;
            }
        }
    },
    update: function(app){
        this.powerUp();//衝突判定
        var p = app.pointing;//タッチされている座標の取得
        if(p.getPointingStart()){
            //画面がタッチされ始めた時、タッチスライドを始めた座標を記録する
            this.init_X = p.x;
            this.init_Y = p.y;
        }else if(p.getPointing()){
            //画面がタッチされ続けている時
            //引数（タッチスライドを始めたx座標とy座標, 現在タッチしているｘ座標とy座標)
            this.move(this.init_X, this.init_Y, p.x, p.y);//移動する
            if(this.tick % 10 === 0){
                //自機の更新が10回される毎に
                //引数（x座標, y座標, 発射角度, 発射角度範囲, 角速度, 速度, 加速度, 弾数)
                nWayPlyerBullet(
                    this.x,//x座標
                    (this.y - this.height / 2),//y座標
                    0,//発射角度
                    20,//発射角度範囲
                    0,//角速度
                    5,//速度
                    0.1,//加速度
                    this.power//n-Way弾を打つ関数(弾数は奇数で)
                );
            }
        }else{
            //画面がタッチされていない時
            this.direction = 0;//移動してる方向
            this.gotoAndPlay("stop");//実行するアニメーションの種類を指定
        }
        this.tick++;//更新回数をカウントする
    }
});

/*
 * 自機の弾クラス-改良ver.-
 * move : 移動メソッド
 * hitTest : 衝突判定メソッド
 * extinction : 消滅メソッド
 * update : 定期更新メソッド
 */
var PlayerBullet = tm.createClass({
    superClass: tm.app.Sprite,
    init: function(angle, angle_rate, speed, speed_rate){
        //コンストラクタ(引数：角度, 角速度, 速度, 加速度)
        this.superInit(p_Bullet_img, 12, 16);
        this.blendMode = "lighter";
        //プロパティ
        this.rotation = angle;//角度
        this.angle_rate = angle_rate;//角速度
        this.speed = speed;//速度
        this.speed_rate = speed_rate;//加速度
    },
    move: function(){
        this.rad = this.rotation * (Math.PI / 180);//角度を変換(度 → ラジアン)
        this.x -= this.speed * Math.sin(this.rad);//x座標を増減させる
        this.y -= this.speed * Math.cos(this.rad);//y座標を増減させる
        this.rotation += this.angle_rate;//角度を増減させる
        this.speed += this.speed_rate;//速度を増減させる
    },
    hitTest: function(){
        var width_max = SCREEN_WIDTH - this.width  / 2;//右端
        var height_max =  SCREEN_HEIGHT - this.height  / 2;//左端
        if(this.x < 0 || this.x > width_max || this.y < 0 || this.y > height_max){
            //ゲーム画面外を出たら
            this.extinction();
        }
    },
    extinction: function(){
        this.remove();
    },
    update: function(){
        this.hitTest();//衝突判定
        this.move();//移動処理
    }
});

/*
 * N-Way弾を生成する関数
 * 引数 : x座標, y座標, 発射角度, 発射角度範囲, 角速度, 速度, 加速度, 弾数
 */
function nWayPlyerBullet(x, y, angle, angle_range, angle_rate, speed, speed_rate, count){
    if(count > 1){
        //弾数1以上の場合
        for(var i=0; i < count; i++){
            var angles = angle  + angle_range * (i / (count - 1) - 0.5);//角度を変化させる
            //引数（発射角度, 角速度, 速度, 加速度)
            var nWay_P_B = PlayerBullet(angles, angle_rate, speed, speed_rate);//自機の弾を生成
            nWay_P_B.setPosition(x, y);//座標を設定
            app.currentScene.addChild(nWay_P_B);
        }
    }else if(count === 1){
        //弾数1の場合
        var nWay_P_B = PlayerBullet(angle , angle_rate, speed, speed_rate);//自機の弾を生成(引数 :発射角度, 角速度, 速度, 加速度)
        nWay_P_B.setPosition(x, y);//座標を設定
        app.currentScene.addChild(nWay_P_B);
    }
}

/*
 * パワーアップアイテムクラス
 */
var ItemPowerUp = tm.createClass({
    superClass: tm.app.Sprite,
    init: function(){
        this.superInit(i_PowerUp_img, ITEM_SIZE, ITEM_SIZE);
        this.blendMode = "lighter";
    },
    hitTest: function(){
        if(this.isHitElement(player)){
            get_Item_Flag = 1;
            score += 1000;
            this.remove();
        }
    },
    update: function(){
        this.hitTest();
        this.rotation += 2;
    }
});

縦STG for tmlib.js 0.1.7

#-概要- 大学ゼミでゲーム制作合宿(2013/07/13 ~ 2013/07/14)にて [tmlib.js](http://tmlife.net/tag/tmlib-js "Tmlib.js | TM Life") で縦シューティングゲームを作ろう！ってことで作ってます。 ※現在、ゲームではなく、自機の動きを確認できるデモです。 (更新日時　2013/07/14/18:37) #-操作説明- タイトル画面で「GameStart」をタッチ(クリック)するとゲーム画面へ遷移します。タイトル画面で「HowToPlay」と「Config」をタッチ（クリック）するとそれぞれの画面(未実装)へ遷移します。再度、画面をタッチ（クリック）するとタイトル画面へ遷移します。 ※現在、「Config」をタッチするとゲームオーバー画面へ遷移します。画面を触る(クリックする)と、自機の攻撃ができます。画面上で指を動かす(ドラックする)と、指の向きと移動量に沿って自機が動き続けます。画面から指を離す(クリックしてない)と、自機はその場に止まります。 (更新日時　2013/07/20/23:18) #-動作検証- ##動作する * iPhone4s ： Safari,　Chrome * iPhone5 : Chrome ##動かない ###※（ゲーム画面へ遷移しない） * [ELUGA X P-02E](http://panasonic.jp/mobile/docomo/p02e/ "p-02e") : Chrome * [GALAXY S III α SC-03E](http://www.samsung.com/jp/consumer/mobilephone/mobilephone/smartphone/SGH-N035OKNDCM "sc-03e") : Chrome, 標準ブラウザ * [Xperia ray SO-03C](https://www.mydocomo.com/onlineshop/products/smart_phone/SO03C.html "so-03c") : 標準ブラウザ * [GALAXY SIII Progre SCL21](http://www.au.kddi.com/mobile/product/smartphone/scl21/ "SCL21") : Chrome, 標準ブラウザ (更新日時　2013/07/14/18:37) #-更新履歴- * ローディング画面が表示される位置を修正(2013/07/20/23:38) * ゲームオーバー画面とスコアのTweet機能の実装(2013/07/20/23:18) * 自機の軌跡を修正(2013/07/14/18:37) * 合宿終了と共に公開(2013/07/14/18:37) #-Issue- * 敵の実装(表示, 行動ルーチン, 衝突判定, 出現パターン, アニメーション) * アイテムの実装(表示、衝突判定, 効果適用, 出現条件) * ボム(取得, ストック, 発動,　アニメーション) * 操作説明の挿入 * コンフィグの実装(BGM：On/Off, 音量, ボム:Auto/Manual, 難易度選択) (更新日時　2013/07/20/23:38) #-懸案事項- * Assertion failed: Sprite の第一引数はテクスチャもしくはテクスチャ名に変わりました tmlib.js:11243 がconsoleへ出力される。 * Androidの端末でタイトル画面からゲーム画面へ遷移しない。 (更新日時　2013/07/20/23:38) #-連絡先- 動作確認の報告や、感想、質問などは下記のTwitter垢へ連絡を貰えると嬉しいです。 [Twitter_ID：alkaid_72th](https://twitter.com/alkaid_72th "Twitter") [メールアドレス:b040184@cuc.ac.jp](b040184@cuc.ac.jp)/* * 画像を連想配列で定義 * @title:タイトル画面の画像 * @player:自機の画像 */ var ASSETS = { "title": "http://jsrun.it/assets/q/m/g/C/qmgCV.png", "player": "http://jsrun.it/assets/f/L/f/5/fLf5s.gif" }; /* * 定数 */ var SCREEN_WIDTH = 320; var SCREEN_HEIGHT = 320; var　ITEM_SIZE = 16; /* * グローバル変数 */ var app; var game_UI, p_Bullet_img, i_PowerUp_img; var player; var score; var get_Item_Flag = false; /* * プリロード *　canvas要素で描画したものを先に読み込んでおく */ tm.preload(function(){ //メニュー描画 var img0 = tm.graphics.Canvas(); img0.resize(SCREEN_WIDTH / 4, SCREEN_HEIGHT); img0.fillStyle = "hsl({0}, 80%, 50%)".format(360 / 30 * 18); img0.roundRect(0, 0, SCREEN_WIDTH / 4, SCREEN_HEIGHT, 3); img0.alpha = 0.1; game_UI = img0; //自弾の描画 var img1 = tm.graphics.Canvas(); img1.resize(12, 16); img1.fillStyle = "hsl({0}, 80%, 50%)".format(360 / 30 * 18); img1.fillTriangle(6, 0, 6, 8, 0, 16); img1.fillTriangle(6, 0, 6, 8, 12, 16); p_Bullet_img = img1; //パワーアップの描画 var img2 = tm.graphics.Canvas(); img2.resize(ITEM_SIZE, ITEM_SIZE); img2.fillStyle = "hsl({0}, 80%, 50%)".format(360 / 30 * 11); img2.alpha = 0.9 img2.fillCircle(ITEM_SIZE / 8 * 4, ITEM_SIZE / 8 * 4, ITEM_SIZE / 8 * 1); img2.fillTriangle( ITEM_SIZE / 8 * 4,//ｘ１ ITEM_SIZE / 8 * 0,//y1 ITEM_SIZE / 8 * 3,//x2 ITEM_SIZE / 8 * 2,//y2 ITEM_SIZE / 8 * 5,//x3 ITEM_SIZE / 8 * 2//y3 ); img2.fillTriangle( ITEM_SIZE / 8 * 0,//ｘ１ ITEM_SIZE / 8 * 4,//y1 ITEM_SIZE / 8 * 2,//x2 ITEM_SIZE / 8 * 5,//y2 ITEM_SIZE / 8 * 2,//x3 ITEM_SIZE / 8 * 3//y3 ); img2.fillTriangle( ITEM_SIZE / 8 * 4,//ｘ１ ITEM_SIZE / 8 * 8,//y1 ITEM_SIZE / 8 * 5,//x2 ITEM_SIZE / 8 * 6,//y2 ITEM_SIZE / 8 * 3,//x3 ITEM_SIZE / 8 * 6//y3 ); img2.fillTriangle( ITEM_SIZE / 8 * 8,//ｘ１ ITEM_SIZE / 8 * 4,//y1 ITEM_SIZE / 8 * 6,//x2 ITEM_SIZE / 8 * 3,//y2 ITEM_SIZE / 8 * 6,//x3 ITEM_SIZE / 8 * 5//y3 ); i_PowerUp_img = img2; }); /* * main */ tm.main(function(){ app = tm.app.CanvasApp("#world"); app.resize(SCREEN_WIDTH, SCREEN_HEIGHT); app.fitWindow(); //ローディング画面を定義する var loading = tm.app.LoadingScene({ width: SCREEN_WIDTH, height: SCREEN_HEIGHT, assets: ASSETS, nextScene: TitleScene, }); app.replaceScene(loading);//ローディング画面呼び出し app.run();//実行 }); /* * タイトル画面 */ var TitleScene = tm.createClass({ superClass: tm.app.Scene, init: function(){ this.superInit(); //タイトル画面を生成 var image = tm.app.Sprite("title", SCREEN_WIDTH, SCREEN_HEIGHT).addChildTo(this); image.originX = 0;//x座標値を変更 image.originY = 0;//ｙ座標値を変更 //メニューボタンを生成 for(var i = 0; i < 3; i++){ this.menu = MenuButton(i, 160, i).addChildTo(this); } } }); /* * メニューボタン * 引数 : メニューの番号, 描画するｘ座標, 描画するｙ座標 * onpointingend : 押し終わったら実行する */ var MenuButton = tm.createClass({ superClass: tm.app.LabelButton, init: function(menu_num, x, y){ if(menu_num === 0){ this.superInit("GameStart"); }else if(menu_num === 1){ this.superInit("HowToPlay"); }else if(menu_num === 2){ this.superInit("Config"); }else if(menu_num === 3){ this.superInit("Tweet"); }else if(menu_num === 4){ this.superInit("Title"); }else{ alert("MenuButton_init error"); this.superInit("null"); } this.menu_num = menu_num; this.width = SCREEN_WIDTH; this.height = 40; this.fontSize = 30; this.x = x; this.y = SCREEN_HEIGHT / 12 * 8 + (this.height + 2) * y; }, onpointingend: function(){ if(this.menu_num === 0){ app.replaceScene(GameScene()); }else if(this.menu_num === 1){ app.replaceScene(HowToPlayScene()); }else if(this.menu_num === 2){ //app.replaceScene(ConfigScene()); app.replaceScene(GameOverScene()); }else if(this.menu_num === 3){ //tweetする内容を記述する var twitterURL = tm.social.Twitter.createURL({ type : "tweet", text : "@alkaid_72th \n tmlib.js 0.1.7で作ったシューティングゲームです. SCORE:" + score + "\n", hashtags : "tmlib", url : "http://jsdo.it/alkaid_72th/stg_02", }); window,open(twitterURL); }else if(this.menu_num === 4){ app.replaceScene(TitleScene()); } } }); /* * 操作説明画面 */ var HowToPlayScene = tm.createClass({ superClass: tm.app.Scene, init: function(){ this.superInit(); var label = tm.app.Label("HowToPlayScene-未実装-"); label.setPosition(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2); label.setAlign("center").setBaseline("middle"); this.addChild(label); }, onpointingend: function(){app.replaceScene(TitleScene());} }); /* * コンフィグ画面 */ var ConfigScene = tm.createClass({ superClass: tm.app.Scene, init: function(){ this.superInit(); var label = tm.app.Label("Config-未実装-"); label.setPosition(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2); label.setAlign("center").setBaseline("middle"); this.addChild(label); }, onpointingend: function(){app.replaceScene(TitleScene());} }); /* * ゲームオーバー画面 */ var GameOverScene = tm.createClass({ superClass: tm.app.Scene, init: function(){ this.superInit(); var label = tm.app.Label("GAME OVER"); label.setPosition(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2); label.setAlign("center").setBaseline("middle"); this.addChild(label); //メニューボタンを生成 for(var i = 3; i < 5; i++){ this.menu = MenuButton(i, 160, i - 3).addChildTo(this); } } }); /* * ゲーム本体 */ var GameScene = tm.createClass({ superClass: tm.app.Scene, init: function(){ this.superInit(); //ステータス this.gameIU = tm.app.Sprite(game_UI, SCREEN_WIDTH / 4, SCREEN_HEIGHT); this.gameIU.setPosition(0, 0); this.addChild(this.gameIU); //自機を生成 player = Player().addChildTo(this); //ゲームの更新回数を初期化 this.tick = 0; //スコアを生成する score = 0; this.scoreLabel = tm.app.Label("", 16); this.scoreLabel.setPosition(60, 10); this.scoreLabel.setAlign("center").setBaseline("middle"); this.addChild(this.scoreLabel); }, displayScore: function(num){ //スコア表示メソッド var len = String(num).length;//スコアの文字数 var str　= "0";//文字列 for(var i = 0; i < 5 - len; i++){str = str + "0";}//桁が足りない分だけ０で桁を埋める this.scoreLabel.text = (num < 1000000)? "SCORE:" + str + num : "SCORE:999999";//スコアを実際に表示する score += (this.tick % 20 === 0)? 10 : 0;//一定時間毎にスコアを加算 }, appearItem: function(){ //アイテム出現メソッド if(this.tick % 100 === 0){ this.item = ItemPowerUp().addChildTo(this); var x = Math.floor(Math.random() * 320); var y = Math.floor(Math.random() * 320); this.item.setPosition(x, y); } }, update: function(){ //定期更新メソッド this.displayScore(score);//スコア表示メソッドを呼び出す this.appearItem();//アイテム生成メソッド this.tick++; } }); /* * 自機クラス * move : 移動メソッド * update : 定期更新メソッド */ var Player = tm.createClass({ superClass: tm.app.AnimationSprite, init: function(){ //アニメーションを作成する this.ss = tm.asset.SpriteSheet({ "image": "player", "frame": { "width": 34, "height": 32, "count":6 }, "animations": { "stop": { frames: [0,0], next: "stop", frequency: 4, }, "moveRight1": { frames: [0, 2, 2, 3], next: "moveRight2", frequency: 4, }, "moveRight2": { frames: [3, 3, 3, 3], next: "moveRight2", frequency: 4, }, "moveLeft1": { frames: [0, 4, 4, 5], next: "moveLeft2", frequency: 4, }, "moveLeft2": { frames: [5, 5, 5, 5], next: "moveLeft2", frequency: 4, }, } }); this.superInit(this.ss, 34, 32); this.position.set(160, 160);//初期位置 this.power = 1;//パワー this.tick = 0;//更新回数 }, move: function(first_X, first_Y, second_X, second_Y){ //タッチスライドの大きさから仮の移動量を算出 this.fx = (second_X - first_X) / 15; this.fy = (second_Y - first_Y) / 10; //移動量を是正する if(this.x + this.fx < this.width / 2 || this.x + this.fx > SCREEN_WIDTH - this.width / 2){ this.fx = 0; } if(this.y + this.fy < this.height / 2 || this.y + this.fy > SCREEN_HEIGHT - this.height / 2){ this.fy = 0; } //移動アニメーション if(this.direction === 0 || this.direction * this.fx < 0){ //もし止まっている or this.directionとthis.fxの符号が違うなら if(this.fx > 0){ this.direction = 1; this.gotoAndPlay("moveRight1"); }else if(this.fx < 0){ this.direction = -1; this.gotoAndPlay("moveLeft1"); }else{ this.gotoAndPlay("stop"); } }else{ if(this.fx > 0){ this.gotoAndPlay("moveRight2"); }else{ this.gotoAndPlay("moveLeft2"); } } //移動量を実際の座標に加算する this.x += this.fx; this.y += this.fy; if(this.fy <= 0){ //自機の軌跡を描画する } }, powerUp: function(){ if(get_Item_Flag != false){ if(get_Item_Flag === 1){ (this.power < 7)? this.power += 2 : this.power += 0; get_Item_Flag = false; } } }, update: function(app){ this.powerUp();//衝突判定 var p = app.pointing;//タッチされている座標の取得 if(p.getPointingStart()){ //画面がタッチされ始めた時、タッチスライドを始めた座標を記録する this.init_X = p.x; this.init_Y = p.y; }else if(p.getPointing()){ //画面がタッチされ続けている時 //引数（タッチスライドを始めたx座標とy座標, 現在タッチしているｘ座標とy座標) this.move(this.init_X, this.init_Y, p.x, p.y);//移動する if(this.tick % 10 === 0){ //自機の更新が10回される毎に //引数（x座標, y座標, 発射角度, 発射角度範囲, 角速度, 速度, 加速度, 弾数) nWayPlyerBullet( this.x,//x座標 (this.y - this.height / 2),//y座標 0,//発射角度 20,//発射角度範囲 0,//角速度 5,//速度 0.1,//加速度 this.power//n-Way弾を打つ関数(弾数は奇数で) ); } }else{ //画面がタッチされていない時 this.direction = 0;//移動してる方向 this.gotoAndPlay("stop");//実行するアニメーションの種類を指定 } this.tick++;//更新回数をカウントする } }); /* * 自機の弾クラス-改良ver.- * move : 移動メソッド * hitTest : 衝突判定メソッド * extinction : 消滅メソッド * update : 定期更新メソッド */ var PlayerBullet = tm.createClass({ superClass: tm.app.Sprite, init: function(angle, angle_rate, speed, speed_rate){ //コンストラクタ(引数：角度, 角速度, 速度, 加速度) this.superInit(p_Bullet_img, 12, 16); this.blendMode = "lighter"; //プロパティ this.rotation = angle;//角度 this.angle_rate = angle_rate;//角速度 this.speed = speed;//速度 this.speed_rate = speed_rate;//加速度 }, move: function(){ this.rad = this.rotation * (Math.PI / 180);//角度を変換(度 → ラジアン) this.x -= this.speed * Math.sin(this.rad);//x座標を増減させる this.y -= this.speed * Math.cos(this.rad);//y座標を増減させる this.rotation += this.angle_rate;//角度を増減させる this.speed += this.speed_rate;//速度を増減させる }, hitTest: function(){ var width_max = SCREEN_WIDTH - this.width / 2;//右端 var height_max = SCREEN_HEIGHT - this.height / 2;//左端 if(this.x < 0 || this.x > width_max || this.y < 0 || this.y > height_max){ //ゲーム画面外を出たら this.extinction(); } }, extinction: function(){ this.remove(); }, update: function(){ this.hitTest();//衝突判定 this.move();//移動処理 } }); /* * N-Way弾を生成する関数 * 引数 : x座標, y座標, 発射角度, 発射角度範囲, 角速度, 速度, 加速度, 弾数 */ function nWayPlyerBullet(x, y, angle, angle_range, angle_rate, speed, speed_rate, count){ if(count > 1){ //弾数1以上の場合 for(var i=0; i < count; i++){ var angles = angle + angle_range * (i / (count - 1) - 0.5);//角度を変化させる //引数（発射角度, 角速度, 速度, 加速度) var nWay_P_B = PlayerBullet(angles, angle_rate, speed, speed_rate);//自機の弾を生成 nWay_P_B.setPosition(x, y);//座標を設定 app.currentScene.addChild(nWay_P_B); } }else if(count === 1){ //弾数1の場合 var nWay_P_B = PlayerBullet(angle , angle_rate, speed, speed_rate);//自機の弾を生成(引数 :発射角度, 角速度, 速度, 加速度) nWay_P_B.setPosition(x, y);//座標を設定 app.currentScene.addChild(nWay_P_B); } } /* * パワーアップアイテムクラス */ var ItemPowerUp = tm.createClass({ superClass: tm.app.Sprite, init: function(){ this.superInit(i_PowerUp_img, ITEM_SIZE, ITEM_SIZE); this.blendMode = "lighter"; }, hitTest: function(){ if(this.isHitElement(player)){ get_Item_Flag = 1; score += 1000; this.remove(); } }, update: function(){ this.hitTest(); this.rotation += 2; } });<script src="http://rawgithub.com/phi-jp/tmlib.js/0.1.7/build/tmlib.js"></script> <canvas id="world"></canvas>canvas { box-shadow: 0px 0px 4px 0px #aaa; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

#-概要-
大学ゼミでゲーム制作合宿(2013/07/13 ~ 2013/07/14)にて

[tmlib.js](http://tmlife.net/tag/tmlib-js "Tmlib.js | TM Life")
で縦シューティングゲームを作ろう！ってことで作ってます。

※現在、ゲームではなく、自機の動きを確認できるデモです。

(更新日時　2013/07/14/18:37)

#-操作説明-
タイトル画面で「GameStart」をタッチ(クリック)するとゲーム画面へ遷移します。

タイトル画面で「HowToPlay」と「Config」をタッチ（クリック）するとそれぞれの画面(未実装)へ遷移します。

再度、画面をタッチ（クリック）するとタイトル画面へ遷移します。

※現在、「Config」をタッチするとゲームオーバー画面へ遷移します。

画面を触る(クリックする)と、自機の攻撃ができます。

画面上で指を動かす(ドラックする)と、指の向きと移動量に沿って自機が動き続けます。

画面から指を離す(クリックしてない)と、自機はその場に止まります。

(更新日時　2013/07/20/23:18)

#-動作検証- 
##動作する
* iPhone4s
： Safari,　Chrome 
* iPhone5
: Chrome

##動かない
###※（ゲーム画面へ遷移しない）

* [ELUGA X P-02E](http://panasonic.jp/mobile/docomo/p02e/ "p-02e")
: Chrome

* [GALAXY S III α SC-03E](http://www.samsung.com/jp/consumer/mobilephone/mobilephone/smartphone/SGH-N035OKNDCM "sc-03e")
: Chrome, 標準ブラウザ
 
* [Xperia ray SO-03C](https://www.mydocomo.com/onlineshop/products/smart_phone/SO03C.html "so-03c")
: 標準ブラウザ

* [GALAXY SIII Progre SCL21](http://www.au.kddi.com/mobile/product/smartphone/scl21/ "SCL21")
: Chrome, 標準ブラウザ

(更新日時　2013/07/14/18:37)

#-更新履歴-
* ローディング画面が表示される位置を修正(2013/07/20/23:38)
* ゲームオーバー画面とスコアのTweet機能の実装(2013/07/20/23:18)
* 自機の軌跡を修正(2013/07/14/18:37)
* 合宿終了と共に公開(2013/07/14/18:37)

#-Issue-
* 敵の実装(表示, 行動ルーチン, 衝突判定, 出現パターン, アニメーション)
* アイテムの実装(表示、衝突判定, 効果適用, 出現条件)
* ボム(取得, ストック, 発動,　アニメーション)
* 操作説明の挿入
* コンフィグの実装(BGM：On/Off, 音量, ボム:Auto/Manual, 難易度選択)

(更新日時　2013/07/20/23:38)

#-懸案事項-
* Assertion failed: Sprite の第一引数はテクスチャもしくはテクスチャ名に変わりました tmlib.js:11243
がconsoleへ出力される。
* Androidの端末でタイトル画面からゲーム画面へ遷移しない。

(更新日時　2013/07/20/23:38)

#-連絡先-
動作確認の報告や、感想、質問などは下記のTwitter垢へ連絡を貰えると嬉しいです。
[Twitter_ID：alkaid_72th](https://twitter.com/alkaid_72th "Twitter")

[メールアドレス:b040184@cuc.ac.jp](b040184@cuc.ac.jp)

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

alkaid_72th

URL
https://twitter.com/alkaid_72th

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/9y7m/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

superchinese

siouxcitizen

Forked

sort by

方言 de 出身地診断!! 関東限定ver

alkaid_72th

1
0
2756

276/2/3
- game
- javascript
- tmlib.js

縦STG for tmlib.js 0.1.7

-概要-

-操作説明-

-動作検証-

動作する

動かない

※（ゲーム画面へ遷移しない）

-更新履歴-

-Issue-

-懸案事項-

-連絡先-

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by

Forked