文档章节

flappybird原理解析 JQuery版本

大灰狼wow
 大灰狼wow
发布于 2017/08/08 09:27
字数 270
阅读 41
收藏 0

输入图片说明

难度解析 1、动画效果 requestAnimationFrame 2、碰撞检测 DIV之前是否重合

<html>
  <head>
    <meta charset="utf-8" />
    <style>
body{overflow-x:hidden;}
.ground{position:absolute;top:300px;width:10000px;height:10px;background:url(./ground.png) repeat-x}
.tree{width:100px;height:100px;background:green;position:absolute;left:1000px;top:200px;
}
</style>
    <title></title>
  </head>
  <body>
  <button onclick="stop();">stop</button> 
  <button onclick="jump();">jump</button> 
  <img src="./bird.png" id="bird" style="position:absolute;top:30px;left:200;border:1px red solid;" />
  <div class="tree" id="tree"></div>
  <div class="ground" id="ground"></div>
 

</body>
 
</html>
<script src="./jquery-1.11.0.min.js"></script> 
<script src="./flppybird.js"></script>
var timer = requestAnimationFrame(fly)
	var x = 0; //场景移动

//主函数
function fly() {
	x--;
	var top = $("#bird").offset().top;
	top += 1;
	$("#bird").css({
		"top": top
	});

	$("#ground").css({
		"left": x
	});
	var treeleft = $("#tree").offset().left;
	treeleft--;
	$("#tree").css({
		"left": treeleft
	});

	//碰撞检测
	if (checkCollection($("#bird"), $("#tree"))) {
		stop();
		alert("hit!");
	} else {
		timer = requestAnimationFrame(fly);

	}

}

//检查是否碰撞
function checkCollection(bird, tree) {
	var birdPosition = [];
	birdPosition[0] = bird.offset().left;
	birdPosition[1] = bird.offset().top + bird.height();
	birdPosition[2] = bird.offset().left + bird.width();
	birdPosition[3] = bird.offset().top + bird.height();

	var treePosition = [];
	treePosition[0] = tree.offset().left;
	treePosition[1] = tree.offset().top;
	treePosition[2] = tree.offset().left + tree.width();
	treePosition[3] = tree.offset().top;

	if (birdPosition[2] > treePosition[0] && birdPosition[0] < treePosition[2]) {

		if (birdPosition[1] > treePosition[1]) {
			return true;

		}
	}
	return false;
}

//飞起来
function jump() {
	var top = $("#bird").offset().top;
	top -= 20;
	$("#bird").css({
		"top": top
	});
}

//停止游戏
function stop() {
	cancelAnimationFrame(timer);
}

© 著作权归作者所有

大灰狼wow
粉丝 48
博文 392
码字总数 48475
作品 1
嘉兴
程序员
私信 提问
加载中

评论(2)

大灰狼wow
大灰狼wow

引用来自“Nottyjay”的评论

可以的灰太狼。一大清早写博文,看来是工作量不饱和
我是大灰狼,==! 羡慕你撩妹子
Nottyjay
Nottyjay
可以的灰太狼。一大清早写博文,看来是工作量不饱和
libgdx 如何实现微信分享

最近在研究libgdx,改了一版flappybird,现在想实现微信朋友圈分享功能。研究了微信开放平台提供的基于android平台接口说明,但是苦于flappybird的代码都是写在libgdx的基准工程里的,andro...

yukaiehome
2014/07/28
575
1
超级精简的flappy Bird.

package testPackage; import java.awt.BorderLayout; import java.awt.Color; import java.awt.FlowLayout; import java.awt.Graphics; import java.awt.GridBagConstraints; import java.a......

守护_玉
2014/02/26
0
0
谷歌准备的礼物,快来找 Android 6.0 的彩蛋

世界上有很多秘密等着大家去发现,比如自Android 2.3以来,每一代Android都隐藏着一个小秘(cai)密(dan),当然打开的方式是相同的。具体来说,打开设置->关于手机/平板,然后 猛点系统版本...

oschina
2015/10/08
3.8K
9
我想找一份cocos2d-x游戏开发初级程序员的工作

本人学的是Java,但对游戏开发有浓厚的兴趣,目前正在学习cocos2d-x,想找一份关于游戏开发的工作,不知道这个想法可不可行。本人有一定的C/C++基础,正在尝试写类似Flappy Bird的游戏。...

droideep
2014/02/17
1K
5
Swift学习第一练——用Swift实现的FlappyBird小游戏

用Swift实现的FlappyBird小游戏 伴随着apple公司对swift的推广态度深入,swift火的很快,并且swift精简便捷的语法和强大的功能,对于使用Object—C开发iOS的开发者来说,也有必要了解学习一下...

珲少
2015/06/11
0
7

没有更多内容

加载失败,请刷新页面

加载更多

Java编程学习-Java虚拟机(JVM)以及跨平台原理

相信大家已经了解到Java具有跨平台的特性,可以“一次编译,到处运行”,在Windows下编写的程序,无需任何修改就可以在Linux下运行,这是C和C++很难做到的。 那么,跨平台是怎样实现的呢?这...

Java领航员
34分钟前
0
0
学JFinal不迷路,JFinal优质资源列表(欢迎反馈更新)

学JFinal不迷路,记录一下JFinal相关的资源、产品、讲师等信息(所有信息排名不分先后)。 一、相关站点: 1、JFinal官网-问答、分享、文档、交流、俱乐部 http://www.jfinal.com 2 、JFina...

山东-小木
37分钟前
1
0
项目学习(2)-order-job

在当前的系统中,因为并发量并不高,服务之间发起异步请求或者异步调用时,没有使用到消息中间件。 而是在各个服务(子系统)的数据库中,创建了event_queue事件对列表和event_handler事件处...

太猪-YJ
46分钟前
1
0
gradle grovvy中的闭包

1. 无参数的闭包 //这b1就是一个闭包def b1={ println "hello b1"}//定义方法,包含闭包类型的参数def method1(Closure closure){closure()}//执行method1method1(b1) 执行结果 ...

edison_kwok
今天
3
0
基于Spring Boot + Dubbo的全链路日志追踪(一)

一、 概要 当前公司后端整体架构为:Spring Boot + Dubbo。由于早期项目进度等原因,对日志这块没有统一的规范,基本上是每个项目自己管自己的日志。这也对后面的问题排查带来了很大的困难,...

明天以后
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部