目录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小游戏：像素鸟</title>
<style>
* {
margin: 0;
padding: 0;
}
#game {
width: 800px;
height: 600px;
background: url('./img/sky.png');
position: relative;
margin: auto;
overflow: hidden;
}
#bird {
width: 34px;
height: 25px;
background: url(./img/birds.png) -10px -8px no-repeat;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<!-- 游戏背景 -->
<div id="game">
<!-- 小鸟 -->
<div id="bird"></div>
</div>
</body>
<script>
//获取游戏背景和小鸟
var game = document.getElementById('game');
var birdEle = document.getElementById('bird');
//初始化背景图
var sky = {
x: 0 //背景图初始位置为0
}
//初始化小鸟
var bird = {
speedX: 5, //小鸟在X轴的速度
SpeedY: 0, //小鸟在Y轴的速度
//小鸟坐标
x: birdEle.offsetLeft, //小鸟初始位置在绝对定位的位置
y: birdEle.offsetTop,
}
var runing = true; //游戏状态
setInterval(function () {
if (runing) {
//小鸟飞行(其实是背景在动)
sky.x -= 5; //背景每次-5px，以实现向左运动的效果
game.style.backgroundPositionX = sky.x + 'px';
//小鸟上下运动
bird.SpeedY += 1; //每一次点击小鸟向上10px后开始自增也就是再自动向下
bird.y += bird.SpeedY; //小鸟自动不断向下运动
//判断游戏状态
if (bird.y < 0) { //超出游戏背景顶部时游戏结束
runing = false;
bird.y = 0;
}
if (bird.y + birdEle.offsetHeight > 600) { //超出游戏背景底部时游戏结束
runing = false;
bird.y = 600 - birdEle.offsetHeight;
}
birdEle.style.top = bird.y + 'px';
}
}, 30);
//点击时小鸟向上运动
document.onclick = function () {
bird.SpeedY = -10; //点击一次向上运动10px
}
//创建管道
function creatPipe(position) {
var pipe = {};
pipe.x = position;
pipe.upHeight = 200 + parseInt(Math.random() * 100); //上管道高度为200 - 300px
pipe.doHeight = 600 - pipe.upHeight - 200; //下管道高度
pipe.doTop = pipe.upHeight + 200; //上下两管道之间200px
//创建上管道
var upPipe = document.createElement('div'); //新建div
upPipe.style.width = '52px';
upPipe.style.height = pipe.upHeight + 'px';
upPipe.style.background = 'url(./img/pipe2.png) no-repeat center bottom';
upPipe.style.position = 'absolute';
upPipe.style.top = '0px';
upPipe.style.left = pipe.x + 'px';
game.appendChild(upPipe); //将上管道追加到游戏页面中
//创建下管道
var doPipe = document.createElement('div'); //新建div
doPipe.style.width = '52px';
doPipe.style.height = pipe.doHeight + 'px';
doPipe.style.background = 'url(./img/pipe1.png) no-repeat center top';
doPipe.style.position = 'absolute';
doPipe.style.top = pipe.doTop + 'px';
doPipe.style.left = pipe.x + 'px';
game.appendChild(doPipe); //将下管道追加到游戏页面中
//管道进行运动
setInterval(function () {
if (runing) { //游戏处于运行状态时管道再运动
pipe.x -= 2; //x方向不断-2px，以实现管道向左运动的效果
upPipe.style.left = pipe.x + 'px';
doPipe.style.left = pipe.x + 'px';
if (pipe.x < -52) { //管道移出最左侧时回到原位，实现不间断效果
pipe.x = 800;
}
//上下管道临界值
var uCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y < pipe.upHeight;
var dCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y > pipe.upHeight + 200;
if (uCheck || dCheck) { //碰到上管道或下管道临界值则游戏终止
runing = false;
}
}
}, 30)
}
creatPipe(400); //产生四组管道
creatPipe(600);
creatPipe(800);
creatPipe(1000);
</script>
</html>sky.png
birds.png
pipe1.png
pipe2.png
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中，它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has
我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru
我有一个rubyonrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素
我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的
几个月前，我读了一篇关于rubygem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？ 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：
我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态，而无需发出第二个请求。有没有办法用另一种方法做到这一点？我一直在查看文档，但似乎找不到我要找的东西。 最佳答案 在我看来，除非您需要一些真正的低级访问或控制，否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur
前言作为一名程序员，自己的本质工作就是做程序开发，那么程序开发的时候最直接的体现就是代码，检验一个程序员技术水平的一个核心环节就是开发时候的代码能力。众所周知，程序开发的水平提升是一个循序渐进的过程，每一位程序员都是从“菜鸟”变成“大神”的，所以程序员在程序开发过程中的代码能力也是根据平时开发中的业务实践来积累和提升的。提高代码能力核心要素程序员要想提高自身代码能力，尤其是新晋程序员的代码能力有很大的提升空间的时候，需要针对性的去提高自己的代码能力。提高代码能力其实有几个比较关键的点，只要把握住这些方面，就能很好的、快速的提高自己的一部分代码能力。1、多去阅读开源项目，如有机会可以亲自参与开源
嗨~大家好，这里是可莉！今天给大家带来的是7个C语言的经典基础代码~那一起往下看下去把【程序一】打印100到200之间的素数#includeintmain(){ inti; for(i=100;i 【程序二】输出乘法口诀表#includeintmain(){inti;for(i=1;i 【程序三】判断1000年---2000年之间的闰年#includeintmain(){intyear;for(year=1000;year 【程序四】给定两个整形变量的值，将两个值的内容进行交换。这里提供两种方法来进行交换，第一种为创建临时变量来进行交换，第二种是不创建临时变量而直接进行交换。1.创建临时变量来
本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决