Cocos2d-js サンプルコード

Umiushi

スクリーンショット 2014-10-12 16.11.40


開発環境

Cocos2d-JS v.3.0
・Cocos Code IDE


プロジェクト構成

スクリーンショット 2014-10-12 16.17.46

 


res(サンプル画像データ/音データ)

ダウンロード(ZiPファイル)


app.js

// グローバル変数を定義する
var bg1;
var bg2;
var frame = 0;
var char;
var blocks = [];
var score;

var Game = cc.Layer.extend({
	init:function(){
		this._super();
		var size = cc.winSize;

		// キャラクターを画面に登場させる
		char = cc.Sprite(res.char_png);
		char.setPosition(100,100);
		this.addChild(char,10);
		char.setScaleX(-1); // 向きを180度反転させる

		// 背景画面を作る
		bg1 = cc.Sprite(res.bg_png);
		bg1.setAnchorPoint(0,0);
		bg1.setPosition(0,0);
		this.addChild(bg1,1);

		bg2 = cc.Sprite(res.bg_png);
		bg2.setAnchorPoint(0,0);
		bg2.setPosition(960,0);
		this.addChild(bg2,1);

		// BGMを再生する(trueで何度もリピートする)
		cc.audioEngine.playMusic(res.bgm_mp3,true);

		// スコアラベルを作る
		score = cc.LabelTTF("?", "Arial", 30) // 最後の30は文字の大きさ
		score.setPosition(600,400);
		this.addChild(score,20);

		// タッチイベントを有効にする
		cc.eventManager.addListener({
			event:cc.EventListener.TOUCH_ONE_BY_ONE,
			swallowTouches:true,
			onTouchBegan:this.onTouchBegan,
			onTouchMoved:this.onTouchMoved,
			onTouchEnded:this.onTouchEnded,
		}, this);

		// updateの命令ブロック(関数)を実行する
		this.scheduleUpdate();
		return true;
	},

	// updateの命令ブロック(関数)
	update:function(dt){
		// 背景画面を横に動かす
		bg1.setPosition(bg1.getPosition().x - 3, bg1.getPosition().y);
		bg2.setPosition(bg2.getPosition().x - 3, bg2.getPosition().y);

		// 背景画面を永久にループさせる
		if (bg1.getPosition().x <= -960) {
			bg1.setPosition(960,0);
		}
		if (bg2.getPosition().x <= -960) {
			bg2.setPosition(960,0);
		}

		// frameの数を1ずつ増加させる
		frame++;

		// スコアの数を増加させる
		score.setString("距離:" + frame + "m");

		// frameカウントが100ごとに、障害物(石)を生成する命令ブロックを実行する
		if (frame % 100 == 0) {
			this.createBlock();
		}

		// あたり判定を行う
		// キャラクターの枠を取得する
		var charRect = char.getBoundingBox();

		// 配列箱の中からblockを1つずつ取り出し、あたり判定を行う
		for ( var block in blocks) {
			// blockの枠を取得する
			var blockRect = blocks[block].getBoundingBox();

			// キャラクターの枠とblockの枠が当たったかを判定する
			if (cc.rectIntersectsRect(charRect,blockRect)) {
				// updateの命令ブロック(関数)を停止する
				this.unscheduleUpdate();

				// 回転するアニメーション
				var charDown = cc.rotateTo(0.3,180);
				char.runAction(charDown);

				// タッチイベントを除去してジャンプしないようにする
				cc.eventManager.removeAllListeners();

				// ゲームオーバーの命令ブロックを実行する
				this.gameOver();
			}
		}
	},

	// 障害物(石)を生成する命令ブロック(関数)
	createBlock:function(){
		var block = cc.Sprite(res.rock_png);
		block.setPosition(960,100);

		// 石の大きさをランダムに変更する
		block.setScale(Math.random());
		this.addChild(block,5);

		// 石を動かす
		var move = cc.moveTo(3.0, -200, 100);
		block.runAction(move);

		// 配列箱(blocks)の中に生成したblockを入れていく
		blocks.push(block);
	},

	// タッチイベントの命令ブロック(関数)
	// ボタンを押した時に実行する
	onTouchBegan:function(touch,event){
		cc.log("タッチされた");

		// ジャンプするアニメーションの作成
		var jump = cc.jumpBy(0.5, 0, 0, 100, 1);
		char.runAction(jump);

		// ジャンプした時に音を出す
		cc.audioEngine.playEffect(res.jump_mp3);

		return true;
	},
	// ボタンを押している時に実行する
	onTouchMoved:function(touch,event){
		cc.log("移動");
	},
	// ボタンから指を離した時に実行する
	onTouchEnded:function(touch,event){
		cc.log("タッチ終了");
	},

	// ゲームオーバーの命令ブロック(関数)
	gameOver:function(){
		// ゲームオーバーという文字を表示する
		var label = cc.LabelTTF("ゲームオーバー", "Arial", 30);
		label.setPosition(400,300);
		this.addChild(label,20);

		// リスタートボタンを作成する
		var restart = cc.MenuItemFont("リスタート",this.onRestart);

		// リスタートボタンの文字の大きさを設定する
		restart.setFontSize(30);

		// メニューの中に作成したリスタートボタンを入れる
		var menu = cc.Menu(restart);

		// メニューの表示位置を決める
		menu.setPosition(400,200);

		// メニューを画面に追加する
		this.addChild(menu,20);
	},

	// リスタートの命令ブロック(関数)
	onRestart:function(){
		// グローバル変数を初期化する
		bg1 = null;
		bg2 = null;
		frame = 0;
		char = null;
		blocks = [];
		score = null;

		// もう一度、シーン(GameScene)を読み込んでゲームスタート
		cc.director.replaceScene(new GameScene());
	}
});

var GameScene = cc.Scene.extend({
	onEnter:function(){
		this._super();
		var layer = new Game();
		layer.init();
		this.addChild(layer);
	}
});

resource.js

var res = {
    bg_png : "res/bg.png",
    char_png : "res/char.png",
    rock_png : "res/rock.png",
    bgm_mp3 : "res/bgm.mp3",
    jump_mp3 : "res/jump.mp3"
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

main.js

cc.game.onStart = function(){
    cc.view.adjustViewPort(true);
    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
    cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new GameScene());
    }, this);
};
cc.game.run();