プログラミングとイラストレーション » バーチャルパッド、ゴーストボタン|cocos2d-js
プログラミングとイラストレーション > cocos2d > バーチャルパッド、ゴーストボタン|cocos2d-js

バーチャルパッド、ゴーストボタン|cocos2d-js

バーチャルパッド、ゴーストボタン|cocos2d-js

バーチャルパッド、ゴーストボタン|cocos2d-js : デモ

バーチャルパッド、ゴーストボタン|cocos2d-js: ZIPファイル(784kb)

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 itemsLayer;
var topLayer;
var cart;
var xSpeed = 0;
var left;
var right;

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();
		var backgroundLayer = cc.LayerGradient.create(cc.color(0,0,0,255), cc.color(0x46, 0x82, 0xB4, 255));
		this.addChild(backgroundLayer);
		itemsLayer = cc.Layer.create();
		this.addChild(itemsLayer);
		topLayer = cc.Layer.create();
		this.addChild(topLayer);
		cart = cc.Sprite.create(res.cart_png);
		topLayer.addChild(cart, 0);
		cart.setPosition(240, 24);
		left = cc.Sprite.create(res.leftbutton_png);
		topLayer.addChild(left,0);
		left.setPosition(40,160);
		left.setOpacity(128);
		right = cc.Sprite.create(res.rightbutton_png);
		topLayer.addChild(right,0);
		right.setPosition(440,160);
		right.setOpacity(128);
		this.schedule(this.addItem,1);
		cc.eventManager.addListener(touchListener, this);
		this.scheduleUpdate();

	},
	addItem:function(){
		var item = new Item();
		itemsLayer.addChild(item, 1);
	},
	removeItem:function(item){
		itemsLayer.removeChild(item);
	}
});

var Item = cc.Sprite.extend({
	ctor:function(){
		this._super();
		if(Math.random()<0.5){
			this.initWithFile(res.bomb_png);
			this.isBomb=true;
		}
		else{
			this.initWithFile(res.strawberry_png);
			this.isBomb=false;
		}
	},
	onEnter:function(){
		this._super();
		this.setPosition(Math.random()*400+40, 350);
		var moveAction = cc.MoveTo.create(8, new cc.Point(Math.random()*400+40, -50));
		this.runAction(moveAction);
		this.scheduleUpdate();
	},
	update:function(dt){
		if(xSpeed>0){
			cart.setFlippedX(true);
		}
		if(xSpeed<0){
			cart.setFlippedX(false);
		}
		cart.setPosition(cart.getPosition().x+xSpeed, cart.getPosition().y);
	
		if(this.getPosition().y<35 && this.getPosition().y>30 && Math.abs(this.getPosition().x-cart.getPosition().x)<10 && !this.isBomb)
		{
			gameLayer.removeItem(this);
			console.log("FRUIT");
		}
		if(this.getPosition().y<35 && Math.abs(this.getPosition().x-cart.getPosition().x)<25 && this.isBomb)
		{
			gameLayer.removeItem(this);
			console.log("BOMB");
		}
		if(this.getPosition().y<-30){
			gameLayer.removeItem(this);
		}
	}
});

var touchListener = cc.EventListener.create({
	event:cc.EventListener.TOUCH_ONE_BY_ONE,
	swallowTouches:true,
	onTouchBegan:function(touch,event){
		if(touch.getLocation().x<240){
			xSpeed = -2;
			left.setOpacity(255);
			right.setOpacity(128);
		}
		else{
			xSpeed = 2;
			right.setOpacity(255);
			left.setOpacity(128);
		}
		return true;
	},
	onTouchEnded:function(touch, event){
		xSpeed = 0;
		left.setOpacity(128);
		right.setOpacity(128);
	}
});

resource.js

var res = {
	bomb_png:"res/bomb.png",
	cart_png:"res/cart.png",
	strawberry_png:"res/strawberry.png",
	leftbutton_png:"res/leftbutton.png",
	rightbutton_png:"res/rightbutton.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/%e3%83%90%e3%83%bc%e3%83%81%e3%83%a3%e3%83%ab%e3%83%91%e3%83%83%e3%83%89%e3%80%81%e3%82%b4%e3%83%bc%e3%82%b9%e3%83%88%e3%83%9c%e3%82%bf%e3%83%b3%ef%bd%9ccocos2d-js/trackback/