网页版HTML Flappy Bird_jQuery Javascript Flappy Bird
2014-08-19 10:01:59  By: dwtedx

介绍

Flappy Bird变成了大新闻:开发商每天可以赚50,000美元、

我下载了一个玩了玩了、觉得这个游戏非常简单和愚蠢、但还是玩了一段时间

然后、出于好奇、我自己使用JQuery HTML Javascript 编写了一个、我大概花了一天的时间吧

并在100行javascript代码内编写了这个 Flappy Bird、现在和大家分享一下

程序资源

编写该游戏只需要5张图片:鸟,背景草,天空背景,障碍和点触开始的图片

无


使用GIF动画文件、这样可以减少对动画的开发、浏览器可以更有效地使用它

但也因为这样、无法在Windows Phone上发布、因为浏览器控件不支持GIF动画文件

代码实现

基本HTML也很简单


<div id=´board´ style=´position:absolute; left:50px; 
	:50px; width:478px; height:300px; overflow:hidden;´>
	<div id=´score´ style=´position:absolute;
		left:400px; top:0px; height:25px; 
		z-index:5; color:red; font-weight:900´></div>
	<img class="c" id=´bird´ src="b2.gif" 
		style="z-index:5"/>
	<img id=´instr´ src=´instr.png´ class=´c´ 
		style="left:205px; top:75px; z-index:100" />
	<div class="bg" id=´bGrnd´ style="top:-20px; 
		height:320px; background-image:url(bg1.png) "/>
	<div class="bg" id=´fGrnd´ style="top:235px; 
		height:85px; z-index:4; 
		background-image:url(bg2.png) "/>
</div>
下面是Javascript控制



var bird = null, board = null;
var dimPipe = { width:40, height:420 }, 
	cPos = { x: 80, y:100, h:40, w:50 };
var gravity = 0.5, iniSpeed = -7, curSpeed = 0;
// 0-not started,1-play,2-over;
var score = 0, noClr = 0, tmStep = 0, state = 0;

(function($) {
	$.cssNumber.rotate = true;
	$.cssHooks.rotate = {
		set : function(el, v) {
			if (typeof v === ´string´) 
				v = (v.indexOf("rad") != -1) ? parseInt(v)
				* 180 / Math.PI : parseInt(v);
			v = (~~v);
			if (v == ($.data(el, ´rotate´) || 0)) return;
			el.style["MozTransform"] = el.style["MozTransform"]
			= el.style["-webkit-transform"]
			= el.style["transform"] = " rotate(" + (v % 360)
			+ "deg)"; 
			$.data(el, ´rotate´, v);
		},
		get : function(el, computed) {
			return $.data(el, ´rotate´) || 0;
		}
	};
})(jQuery);

function gameOver() {
	state = 2;
	$(":animated").stop();
	if (tmStep) tmStep = window.clearInterval(tmStep);
	bird.animate({ top:board.height()-cPos.h, rotate:540}, 1000)
		.animate({ top:board.height()-cPos.h}, 500, function() {
			$(´#score´).text(´ Score: ´ + score);
			start();
		});
}
function Parallax(elm, tmo) {
	elm.css(´left´, 0).animate({left:-15360}, {
			duration:tmo*1000, easing:´linear´, //step : PrlxStep,
			complete : function() { Parallax(elm, tmo); } 
	});
}

function BirdStep() {
	curSpeed += gravity;
	cPos.y = Math.max(cPos.y + curSpeed, 0);
	var ang = curSpeed * 5, mh = board.height()-cPos.h, 
	m = -12, lo = 0, actPipe = $(´.obs´);
	bird.css({top: cPos.y, rotate:(ang < -20) ? -20 
	: (ang > 90) ? 90 : ang});
	if (cPos.y > mh)
		return gameOver();
	for (var i = actPipe.length-1; i >= 0; i--) {
		var s = actPipe[i].style, x = parseInt(s.left), 
		y = parseInt(s.top);
		lo = Math.max(lo, x);
		if (x+dimPipe.width +m < cPos.x || x > cPos.x+cPos.w+m)
			continue;
		if (y+dimPipe.height+m < cPos.y || y > cPos.y+cPos.h+m)
			continue;
		return gameOver();
	}
	if (actPipe.length > 3 || lo > 300 || Math.random()
		>= 0.05 * (1+noClr))
		return;
	var og = cPos.h * 2;
	var oh = og + Math.floor(Math.random() * (mh-og+1));
	var obs = $("<img/><img/>").addClass(´c obs´)
	.css({left:480, zIndex:3}).css(dimPipe).attr(´src´, ´vine.png´)
		.appendTo(board).animate({left:-50}, Math
		.max(2000,3500-noClr*50), ´linear´, function() { 
			$(´#score´).text(´ Score: ´ + (score += 1 
			+ Math.floor(++noClr/10)));
			this.remove();
		});
	obs[0].style.top = oh + ´px´;
	obs[1].style.top = (oh - og - dimPipe.height) + "px";
}
function onTap() {
	if (state > 1) return;
	if (state == 0) {
		state = 1;
		$(´#score´).text(´ Score: ´ + (score = 0));
		Parallax($(´#bGrnd´), 240);
		Parallax($(´#fGrnd´), 80);
		$(´#instr´).hide();
		tmStep = window.setInterval(BirdStep, 30);
	}
	curSpeed = iniSpeed;
}
function start() {
	// not started
	state = noClr = score = 0;
	cPos = { x: 80, y:100, h:40, w:50 };
	bird.css({left:cPos.x, top:cPos.y, width:cPos.w, 
	height:cPos.h, rotate:0});
	$(´.obs´).remove();
	$(´#instr´).show();
}

$(document).ready(function() {
	bird = $(´#bird´);
	var evt = (typeof(bird[0].ontouchend) == "function")
	? "touchstart" : "mousedown";
	board = $(´#board´).bind(evt, onTap);
	start();
});
好了、到这里你的网页版Flappy Bird 就写好了


下面我把源代码分享给大家 下载链接:http://dwtedx.com/download.html?bdkey=s/1dDcRC7R 密码:nx99

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+