money.js

gistfile1.txt

!function(){
	var IS_IOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
	var IS_ANDROID = /android/i.test(navigator.userAgent);
	var IS_TOUCH = createjs.Touch.isSupported();
	var SCREEN_SHOW_ALL = true;
	var width = 640;
	var height = 1000;
	var stage, queue;
	var isMove = 0;  //qp_o
	var score = 0;
	var playerItem = 3; // qp_e
	var playerIndex = 3; //qp_f
	var items = []; //qp_i
	var flyMoney = [];
	var timer = 15;
	var timeStart = -1;
	var isGameOver = false;

	window.onload = function() {
		stage = new createjs.Stage('stage');
		queue = new createjs.LoadQueue(false, null, true);
		queue.setMaxConnections(30);
		if (IS_TOUCH) {
			createjs.Touch.enable(stage, true);
			stage.mouseEnabled = false;
			var shape = new createjs.Shape;
			shape.graphics.f("white").r(0, 0, width, height);
			stage.addChild(shape);
		}
		createjs.Ticker.setFPS(60);
		setTimeout(resize, 100)
		createjs.Ticker.on("tick", stage);
		queue.on('complete', config.startFunc, null, true);
		config.img && queue.loadManifest(config.img, false);
		queue.load();
	}

	function resize() {
		var canvas = stage.canvas;
		var innerWidth = window.innerWidth;
		var innerHeight =  window.innerHeight;

		if (SCREEN_SHOW_ALL) {
			if (innerWidth / innerHeight > width / height) {
				innerWidth = width * innerHeight / height;
			} else {
				innerHeight = height * innerWidth / width;
			}
			canvas.style.marginTop = 0;
		} else {
			var temp = (width * innerHeight / height);
			if (innerWidth >= temp ){
				innerWidth = temp;
				stage.x = 0;
			} else {
				stage.x = (innerWidth - temp) / 2
			}
		}
		canvas.width = width;
		canvas.height = height;
		canvas.style.width = innerWidth + 'px';
		canvas.style.height = window.innerHeight + 'px';
		$('main').width(innerWidth);
	}

	window.onresize = resize

	function genRandom(value) {
		return parseInt(Math.random() * value)
	}

	var _extends = function(ChildClass, ParentClass) {
		var f = function() { };
		f.prototype = ParentClass.prototype;
		for(var m in ChildClass.prototype) {
			f.prototype[m] = ChildClass.prototype[m];
		}

		ChildClass.prototype = new f();
		ChildClass.prototype.constructor = ChildClass;
		ChildClass.prototype._super = ParentClass.prototype;
	}

	function gameStart() {
		stage.arrow.visible = true;
		//stage.splash.visible = false;
		score = 0;
		timeStart = -1;
		isMove = 1;
		timer = 30;
	}

	function splashContainer() {
		this.initialize();
		this.bg = new createjs.Shape;
		var bgImg = queue.getResult("bg");

		var scale = width / bgImg.width;
		var matrix = new createjs.Matrix2D();
		matrix.scale(scale, scale);
		this.bg.graphics.beginFill('#00A0FF').drawRect(0, 0, width, 1200);
		this.bg.graphics.beginBitmapFill(bgImg, 'no-repeat', matrix).drawRect(0, 0, bgImg.width, bgImg.height);
		this.addChild(this.bg)
		var arrow = queue.getResult("upslide");
		this.upslide = new createjs.Bitmap(arrow)
		this.upslide.x = wihdth = (width - arrow.width) / 2;
		this.upslide.y = height - 500;
		this.addChild(this.upslide)
		this.txt = new createjs.Text('向上滑动开始游戏', "bold 32px Arial", "white");
		this.txt.textAlign = "center";
		this.txt.textBaseline = "middle";
		this.txt.x = width / 2;
		this.txt.y = height - 380;
		this.addChild(this.txt)
		var m0 = queue.getResult("mb0");
		this.start = new createjs.Bitmap(m0);
		this.start.y = height - 300;
		this.start.x = (width - m0.width) / 2;
		this.addChild(this.start);
		var localY, relateY;
		this.start.on("mousedown", function (event) {
			if (!isMove) {
				localY = event.localY;
				relateY = height - 300;
			}
		});
		this.start.on("pressmove", function (event) {
			if (!isMove) {
				splashMoveEvent(event.localY - localY, relateY)
			}
		});
		this.start.on("pressup", function (event) {
			if (!isMove && localY - event.localY < 30) {
				createjs.Tween.get(stage.splash.start).to({
					y: -height
				}, 400).call(function (a) {
					stage.splash.upslide.visible = false;
					gameStart();
					stage.splash.visible = false;
				})
			}
			$('.link-btn').hide()
		})
		var y = this.upslide.y;
		createjs.Tween.get(this.upslide, {loop: true}).to({
				y: y + 10,
				opacity: 0.5
			},
			500).to({
			y: 10,
			opacity: 1
		}, 0);
	}
	_extends(splashContainer, createjs.Container);

	function splashMoveEvent(a, b) {
		stage.splash.start.y + a < b && (stage.splash.start.y += a)
	}

	function playerContainer() {
		this.initialize();
		var mb = queue.getResult('mb0');
		this.mb = new createjs.Bitmap(mb);
		this.mb.regX = mb.width / 2;
		this.mb.regY = mb.height / 2;
		this.mb.y = 420;
		this.x = width / 2;
		this.y = height / 2 - 150;
		this.addChild(this.mb);
		var m0 = queue.getResult('m0');
		this.m = [];
		for (var i = 0; i <= playerItem; i++) {
			this.m[i] = new createjs.Bitmap(m0);
			this.m[i].regX = m0.width / 2;
			this.m[i].regY = m0.height / 2;
			this.m[i].y =  420;
			this.m[i].visible = false;
			this.addChild(this.m[i]);
		}
	}
	_extends(playerContainer, createjs.Container);

	playerContainer.prototype.playAnimation = function (a) {
		a.visible = !0;
		createjs.Tween.get(a).to({
				scaleX: 0.5,
				scaleY: 0.5,
				y: -height
			},
			300).to({
			visible: !1,
			y: 420,
			scaleX: 1,
			scaleY: 1
		}, 0);
		if (playerItem > 0) {
			playerItem--;
		} else {
			playerItem = 3;
		}
	}

	function startContainer() {
		var shape = new createjs.Shape;
		shape.graphics.beginFill('#00A0FF').drawRect(0, 0, width, height);
		stage.addChild(shape);
		var hitShape =  new createjs.Shape;
		hitShape.graphics.beginFill("white").rect(0, 200, width, height);
		shape.hitArea = hitShape;

		for (var index = 0; index <= playerItem; index++) {
			flyMoney[index] = [];
			for (var j = 0; j < 5; j++) {
				var d0 = queue.getResult("d0");
				var e = new createjs.Bitmap(d0);
				e.regX = d0.width / 2;
				e.regY =d0.height / 2;
				e.x = genRandom(width);
				e.y = - height / 2 + genRandom(height);
				e.visible = !1;
				flyMoney[index].push(e);
				stage.addChild(flyMoney[index][j])
			}
		}
		bindEvent(shape);
		stage.player = new playerContainer;
		stage.addChild(stage.player);
		var arrow = queue.getResult("upslide");
		stage.arrow = new createjs.Bitmap(arrow)
		stage.arrow.x = wihdth = (width - arrow.width) / 2;
		stage.arrow.y = 280;
		stage.arrow.visible = false
		stage.addChild(stage.arrow)
		stage.timer = new timerContainer;
		stage.addChild(stage.timer);
		stage.score = new scoreContainer;
		stage.addChild(stage.score);


		stage.splash = new splashContainer;
		setInterval(flyMoneyAnimation, 1000);
		stage.addChild(stage.splash)
		createjs.Ticker.addEventListener("tick", function(a) {
			stage.score.score.text = "\uffe5" + score
			if (timeStart >= 0) {
				timeStart += a.delta
				a = 15 - parseInt(timeStart / 1000)
				if (a != timer) {
					timer = a >= 0 ? a : 0;
					stage.timer.txt.text = timer + '"';
					if(timer <= 0) {
						timeStart = -1
						isGameOver = true;
						gameOver();
						console.log('gameover')
					}
				}

			}
		})

		$('.link-btn').show()
		//stage.splash = new splashContainer
	}

	var fIndex = 0;
	function flyMoneyAnimation() {
		for (var index = 0; index < 5; index++) {
			flyMoney[fIndex][index].visible = true;
			createjs.Tween.get(flyMoney[fIndex][index]).to({
					y: height + flyMoney[fIndex][index].getBounds().height / 2 + 100,
					rotation: 720 + genRandom(400),
					x: genRandom(width)
				},
				1000 + genRandom(800)).to({
					visible: !1
				},
				10).to({
					x: genRandom(width),
					y: -height / 2 + genRandom(height / 2),
					rotation: 0
				},
				10);
		}
		if (fIndex < 3) {
			fIndex++;
		} else {
			fIndex = 0;
		}

	}

	function scoreContainer() {
		this.initialize();
		var bg = queue.getResult('bg_money');
		this.scoreBg = new createjs.Bitmap(bg);
		this.scoreBg.x = (width - bg.width) / 2;
		this.scoreBg.y = 32;
		this.addChild(this.scoreBg);
		this.score = new createjs.Text("\uffe5" + score, "bold 42px Arial", "yellow");
		this.score.textAlign = "center";
		this.score.textBaseline = "middle";
		this.score.x = width / 2;
		this.score.y = this.scoreBg.y + bg.height / 2;
		this.addChild(this.score)
	}

	_extends(scoreContainer, createjs.Container);

	function timerContainer() {
		this.initialize();
		var bg = queue.getResult('bg_time');
		this.timeBg = new createjs.Bitmap(bg);
		this.timeBg.x = (width - bg.width) / 2;
		this.timeBg.y = 150;
		this.addChild(this.timeBg);
		var timeIcon = queue.getResult('icon_time');
		this.timeIcon = new createjs.Bitmap(timeIcon);
		this.timeIcon.x = this.timeBg.x + 15;
		this.timeIcon.y = this.timeBg.y + 18;
		this.addChild(this.timeIcon)
		this.txt = new createjs.Text('15"', "bold 44px Arial", "white");
		this.txt.textAlign = "center";
		this.txt.textBaseline = "middle";
		this.txt.x = width / 2 + timeIcon.width / 2;
		this.txt.y = 192;
		this.addChild(this.txt)

	}

	_extends(timerContainer, createjs.Container);


	function bindEvent(shape) {
		var c = 0;
		var d = 0;
		shape.on("mousedown", function(a) {
			if (!(IS_TOUCH && event.nativeEvent instanceof MouseEvent)) {
				if (2 != isMove || 1 != isMove) {
					c = a.localY;
					d = stage.player.m[playerItem].y;
				}
			}
		});
		shape.on("pressmove", function(event) {
			if (!(IS_TOUCH && event.nativeEvent instanceof MouseEvent)) {
				if (isMove == 1) {
					stage.arrow.visible = false
					timeStart = 0;
					isMove = 2
				}
				if (isMove == 2 && !isGameOver) {
					stage.player.m[playerItem].visible = true
					stage.player.m[playerItem].y += (event.localY - c) / 1.5
				}
			}
		});
		var f = 0;
		shape.on('pressup', function (event) {
			if (!(IS_TOUCH && event.nativeEvent instanceof MouseEvent)) {
				//console.log(gameOver)
				if (isMove == 2 && !isGameOver) {
					if (c - event.localY > 50) {
						var now = (new Date).getTime();
						if (items.length > 0 && items[items.length - 1] + 50 > now) {
							console.log('too fast')
						} else {
							f = formatTime(now)
							if (f <= 20) {
								score += 100;
								stage.player.playAnimation(stage.player.m[playerItem]);
							} else {
								items.length--
							}
						}
					} else {
						var b = Math.abs(stage.player.m[playerItem] - d);
						createjs.Tween.get(stage.player.m[playerItem]).to({y: d}, 20 * b)
						stage.player.m[playerItem].visible = false
					}
				}
			}})
	}


	function formatTime(time) {
		var b = 0;
		if (0 != items.length) {
			var c;
			for (c = 0; c < items.length && !(items[c] > time - 1000); c++);
			b = items.length - c
			for (var d = c; d < items.length; d++)  {
				items[d - c] = items[d];
			}
			items.length -= c;
		}
		items.push(time);
		return parseInt(b)
	}

	var $gameOverBox = $('.game-over-box');
	function gameOver() {
		$gameOverBox.show()
		uploadData()
	}

	$('.restart-btn').on('click', function() {
		$gameOverBox.hide();
		score = 0;
		timer = 15;
		isMove = 1;
		isGameOver = false;
		stage.arrow.visible = true;
		//timeStart = 0;
		stage.timer.txt.text = timer + '"'
	})

	function uploadData() {
		$.ajax({
			url: '/mkt/uploadGameResult/',
			type: 'POST',
			data: {openId: window.__openId, score: score},
			success: function(response) {
				addRankList(response)
			}
		})
	}

	var $box = $('.billboard')
	function addRankList(response) {
		$result = [];
		var html = '';
		if (response.top) {
			var count = response.top.length > 3 ? 3 : response.top.length;
			for (var i = 0; i < count - 1; i++) {
				var avatar = response.top[i].headImgUrl;
				var name = response.top[i].name;
				html = '<li class="item-'+ i + '">'
					+ '<div class="tag-box"><span class="tag-'+ i +'"></span></div>'
					+ '<span class="avatar">'
					+  '<img  src="'+ avatar +'"/>'
					+ '</span>'
					+ '<span class="name">'+ name+ '</span>'
					+ '</li>'
				//console.log(html);
				$result.push(html);
			}
			if ($result.length > 0) {
				$result.push('<div class="separator">●●●●●●</div>')
			}
			if (response.self) {
				var selfAvatar = response.self.headImgUrl;
				var selfName = response.self.name;
				var rank = response.self.rank.toString()
				var temp = '<div class="self"><li><div class="tag-box"><span>'+rank+'</span></div>'
					+ '<span class="avatar">'
					+  '<img  src="'+ selfAvatar +'"/>'
					+ '</span>'
					+ '<span class="name">'+ selfName + '</span>'
					+ '</li></div>'
				$result.push(temp);
			}
			$box.html($($result.join('')));
		}

	}
	var $shareBg = $('.share-bg');
	var $shareLayer = $('.share-layer')
	$('.share-btn').on('click', function (event) {
		$shareBg.show();
		$shareLayer.show();
		var data = window.__weichatData;
		data['title'] = '我数了'+ score +'元手都抽筋了！来和我一起挑战数钱吧~';
		wxShare.all(data);
		wxShare.on('baixing', data);
	})

	$shareBg.on('click', function () {
		$shareBg.hide();
		$shareLayer.hide();
	})

	var config = {
		startFunc: startContainer,
		img: {
			path: '//s.baixing.net/img/activity/money/',
			manifest: [{
				src: 'bg.png',
				id: 'bg'
			},{
				src: 'arrow.png',
				id: 'upslide'
			}, {
				src: 'mb0.png',
				id: 'mb0'
			},{
				src: 'm0.png',
				id: 'm0'
			},{
				src: 'd0.png',
				id: 'd0'
			},{
				src: 'icon_time.png',
				id: 'icon_time'
			},{
				src: 'img_bg_time.png',
				id: 'bg_time'
			},{
				src: 'img_bg_money.png',
				id: 'bg_money'
			}]
		}
	}
} ()