神経衰弱カードゲーム|cocos2d-js

神経衰弱カードゲーム|cocos2d-js

神経衰弱カードゲーム|cocos2d-js : デモ

神経衰弱カードゲーム|cocos2d-js : ZIPファイル(492kb)

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="src/cocos2d-js-v3.11-lite.js"></script>
<script cocos src="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(320, 480, 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 gameArray = [0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7];
var pickedTiles = [];
var gameLayer;
var scoreText;
var moves = 0;
var gameScene = cc.Scene.extend({
	onEnter:function(){
		gameArray = shuffle(gameArray);
		this._super();
		gameLayer = new game();
		gameLayer.init();
		this.addChild(gameLayer);
		//cc.log("my awesome game starts here");
	}
});

// 画像の削除と背景色の変更
var backgroundLayer;

var game = cc.Layer.extend({
	init:function(){
		this._super();

		// 背景にグラデーションを追加
		var gradient = cc.LayerGradient.create(cc.color(0,0,0,255),
			cc.color(0x46,0x82,0xB4,255)); // 10進数(0-255), 16進数(0x00-0xFF)
		this.addChild(gradient);

		// スコアの追加
		scoreText = cc.LabelTTF.create("Score: 0", "Arial", "32", cc.TEXT_ALIGNMENT_CENTER);
		this.addChild(scoreText);
		scoreText.setPosition(90, 50);

		// 複数のゲームアセットのインスタンスを作る
		for(var i=0; i<16; i++)
		{
			//var tile = cc.Sprite.create(res.cover_png);
			var tile = new MemoryTile();
			tile.pictureValue = gameArray[i];
			tile.name = "tile" + i;
			this.addChild(tile, 0);
			tile.setPosition(49+i%4*74, 400-Math.floor(i/4)*74);
		}
	}
});

var MemoryTile = cc.Sprite.extend({
	ctor:function(){
		this._super();
		this.initWithFile(res.cover_png); // 背景画像の割り当て
		cc.eventManager.addListener(listener.clone(), this); // タッチやクリックに反応する画像を作る。cloneでリスナーを複製し、各タイルに独自のリスナーを持たせる。
	}
});

// 基本的なリスナー
var listener = cc.EventListener.create({
	event: cc.EventListener.TOUCH_ONE_BY_ONE, // シングルタッチの許可
	swallowTouches: true,
	onTouchBegan: function(touch, event){
		
		var target = event.getCurrentTarget();
		var location = target.convertToNodeSpace(touch.getLocation()); // タッチとクリック時のゲーム内の座標を取得。convertToNodeSpaceで、タイル自身からの相対座標に変換。
		var targetSize = target.getContentSize();
		var targetRectangle = cc.rect(0,0,targetSize.width, targetSize.height);
		if(cc.rectContainsPoint(targetRectangle, location)){
			
			console.log("count: " + pickedTiles.length)
			if(pickedTiles.length<2)
			{
				target.initWithFile("../res/tile_" + target.pictureValue + ".png");
				pickedTiles.push(target);

				if(pickedTiles.length==2){
					checkTiles();
				
				}
			}
			
			

		}
	}
})

// タイルをチェックする
function checkTiles(){
	
	/*if(pickedTiles.length>2)
	{
		return;
	}
	else
	{*/


		if(pickedTiles[0].name==pickedTiles[1].name) // pickedTiles配列は、同じタイルを選択されることを防ぐ
		{
			pickedTiles.pop();
		}
		else
		{

			var pause = setTimeout(function(){

				
				if(pickedTiles[0].pictureValue != pickedTiles[1].pictureValue){
				pickedTiles[0].initWithFile(res.cover_png);
					pickedTiles[1].initWithFile(res.cover_png);
				}
				else
				{
					gameLayer.removeChild(pickedTiles[0]);
					gameLayer.removeChild(pickedTiles[1]);

					moves++;
					scoreText.setString("Score: " + moves);
				}
				pickedTiles=[];
				
			}, 2000);
		};
	//}
}

// タイルをシャッフルする
var shuffle = function(v){
	for(var j, x, i = v.length; i; j=parseInt(Math.random()*i),x=v[--i], v[i]=v[j],v[j]=x);
		return v;
};

resource.js

var res = {
	cover_png:"../res/cover.png",
	tile_0_png:"../res/tile_0.png",
	tile_1_png:"../res/tile_1.png",
	tile_2_png:"../res/tile_2.png",
	tile_3_png:"../res/tile_3.png",
	tile_4_png:"../res/tile_4.png",
	tile_5_png:"../res/tile_5.png",
	tile_6_png:"../res/tile_6.png",
	tile_7_png:"../res/tile_7.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,
    "modules"		:["cocos2d"],

    "jsList"        : ["src/resource.js","src/app.js"]
}

コメントを残す

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