プログラミングとイラストレーション » 横にスクロールするゲームのサンプル|cocos2d-js
プログラミングとイラストレーション > cocos2d > 横にスクロールするゲームのサンプル|cocos2d-js

横にスクロールするゲームのサンプル|cocos2d-js

横にスクロールするゲームのサンプル|cocos2d-js

横にスクロールするゲームのサンプル|cocos2d-js : デモ

横にスクロールするゲームのサンプル|cocos2d-js : ZIPファイル(4kb)

1.HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="full-screen" content="yes"/>
  <meta name="screen-orientation" content="portrait"/>
  <meta name="x5-fullscreen" content="true"/>
  <meta name="360-fullscreen" content="true"/>
  <style>
    body, canvas, div{
      -moz-user-select:none;
      -webkit-user-select:none;
      -ms-user-select:none;
      -khtml-user-select:none;
      -webkit-tap-highlight-color:rgba(0,0,0,0);
    }
  </style>
</head>
<body style="padding:0; margin:0; background:#000;">
<canvas id="gameCanvas"></canvas>
<script src="cocos2d-js-v3.11-lite.js"></script>
<script cocos src="main.js"></script>
</body>
</html>

2.JavaScript

main.js

cc.game.onStart = function(){
	if(!cc.sys.isNative && document.getElementById("cocosLoading"))
		document.body.removeChild(document.getElementById("cocosLoading"));

		

	cc.view.enableRetina(false);
	cc.view.adjustViewPort(true);
	cc.view.setDesignResolutionSize(480, 320, cc.ResolutionPolicy.SHOW_ALL);
	cc.view.resizeWithBrowserSize(true);
	cc.LoaderScene.preload(g_resources, function(){
		cc.director.runScene(new gameScene());
	}, this);
	
};
cc.game.run();

app.js

var background;
var gameLayer;
var scrollSpeed = 1;
var ship;
var gameGravity = -0.05;
var gameThrust = 0.1;
//var emitter;

var gameScene = cc.Scene.extend({
	onEnter:function(){
		this._super();
		//cc.log("my awesome game starts here");
		gameLayer = new game();
		gameLayer.init();
		this.addChild(gameLayer);
	}
});

var game = cc.Layer.extend({
	init:function(){
		this._super();
		cc.eventManager.addListener(listener, this);
		//return true;
		background = new ScrollingBG();
		this.addChild(background);
		this.scheduleUpdate();
		// 秒数間隔で呼び出し
		this.schedule(this.addAsteroid, 2);
		ship = new Ship();
		this.addChild(ship);

		// パーティクル設定
		/*emitter = cc.ParticleSun.create();
		this.addChild(emitter, 1);
		var myTexture = cc.textureCache.addImage(res.particle_png);
		emitter.setTexture(myTexture);
		emitter.setStartSize(4);
		emitter.setEndSize(2);*/
	},
	update:function(dt){
		background.scroll();
		ship.updateY();
	},
	addAsteroid:function(){
		var asteroid = new Asteroid();
		this.addChild(asteroid, 1);
	},
	removeAsteroid:function(asteroid){
		this.removeChild(asteroid);
	}
});

var Asteroid = cc.Sprite.extend({
	ctor:function(){
		this._super();
		this.initWithFile(res.shark_png);
	},
	onEnter:function(){
		this._super();
		this.setPosition(600, Math.random()*320);
		// トゥーインアニメーションで、オブジェクトが指定した時間で指定した座標に移動する
		var moveAction = cc.MoveTo.create(4, new cc.Point(-100, Math.random()*320));
		this.runAction(moveAction);
		this.scheduleUpdate();
	},
	update:function(dt){
		var shipBoundingBox = ship.getBoundingBox();
		var asteroidBoundingBox = this.getBoundingBox();
		if(cc.rectIntersectsRect(shipBoundingBox, asteroidBoundingBox) && ship.invulnerability==0){
			//gameLayer.removeAsteroid(this);
			ship.invulnerability=null;
			ship.setOpacity(127);
			//ship.ySpeed = 0;
			//ship.setPosition(ship.getPosition().x, 160);
			var st = setTimeout(function(){
				restartGame();
			},3000)
			
		}
		else
		{
			st=null;
		}
		if(this.getPosition().x<-50){
			gameLayer.removeAsteroid(this);
		}

		
	}
});

function restartGame(){
	ship.invulnerability = 100;
	ship.setOpacity(255);
}

// 基本的なリスナー
var listener = cc.EventListener.create({
	event: cc.EventListener.TOUCH_ONE_BY_ONE, // シングルタッチの許可
	//swallowTouches: true,
	onTouchBegan: function(touch, event){
		cc.log("onTouchBegan");
		ship.engineOn = true;
		return true;
	},
	onTouchEnded: function (touch, event) {
        cc.log("onTouchEnded");
        ship.engineOn = false;
    }/*,
    onTouchCancelled: function (touch, event) {
        cc.log("onTouchCancelled");
    }*/
})

var ScrollingBG = cc.Sprite.extend({
	ctor:function(){
		this._super();
		this.initWithFile(res.background_png);
	},
	onEnter:function(){
		this.setPosition(480, 160);
	},
	scroll:function(){
		this.setPosition(this.getPosition().x-scrollSpeed, this.getPosition().y);
		if(this.getPosition().x<0){
			this.setPosition(this.getPosition().x+480, this.getPosition().y);
		}
	}
});

var Ship = cc.Sprite.extend({
	ctor:function(){
		this._super();
		this.initWithFile(res.ship_png);
		this.ySpeed = 0;
		this.engineOn = false;
		// 無敵モードの変数
		this.invulnerability = 0;
	},
	onEnter:function(){
		this.setPosition(60, 160);
	},
	updateY:function(){
		if(this.engineOn){
			this.ySpeed += gameThrust;
			// パーティクルの表示位置
			//emitter.setPosition(this.getPosition().x-25, this.getPosition().y);
		}
		else
		{
			// パーティクルの表示位置
			//emitter.setPosition(this.getPosition().x-250, this.getPosition().y);
		}
		// 無敵モードで半透明
		if(this.invulnerability>0)
		{
			this.invulnerability=0;
			//this.setOpacity(255-this.getOpacity());
			//this.setOpacity(175);
			/*setTimeout(function(){
				this.invulnerability = 0;
			},1000);*/
		}
		this.setPosition(this.getPosition().x, this.getPosition().y+this.ySpeed);
		this.ySpeed += gameGravity;
		if(this.getPosition().y<0||this.getPosition().y>320){
			ship.invulnerability=null;
			ship.setOpacity(127);
			//ship.ySpeed = 0;
			//ship.setPosition(ship.getPosition().x, 160);
			var st = setTimeout(function(){
				restartGame();
			},3000)
			ship.ySpeed = 0;
			ship.setPosition(ship.getPosition().x, 160);
		}
		else
		{
			st = null;
		}
	}
});

resource.js

var res = {
	background_png:"./res/background.png",
	ship_png:"./res/ship.png",
	particle_png:"./res/particle.png",
	shark_png:"./res/shark.png"
};

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

project.json

{
    "debugMode"     : 1,
    "showFPS"		:false,
    "frameRate"     : 60,
    "id"            : "gameCanvas",
    "renderMode"    : 1,
    "jsList"        : ["app.js", "resource.js"]
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントフィード

トラックバック URL : http://www.htmlcode.jp/%e6%a8%aa%e3%81%ab%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%99%e3%82%8b%e3%82%b2%e3%83%bc%e3%83%a0%e3%81%ae%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%ef%bd%9ccocos2d-js/trackback/