DOM+CSS3实现小游戏SwingCopters
前些日子看到了一则新闻,flappybird原作者将携新游戏SwingCopters来袭,准备再靠这款姊妹篇游戏引爆大众眼球。就是下面这个小游戏:
三四天后,原作者的SwingCopters貌似没怎么火起来,看来flappybird的神话只是一个偶然呀~不过我的山寨版倒是有模有样的做出来了,点这里查看Demo,请在chrome下打开, 你懂的。
(function(){
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
}
if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
clearTimeout(id);
}
}());
下面我把一些技术细节来介绍下,介于小弟也是第一次做游戏,有些地方的实现不免走了弯路,或者损耗性能,有大牛发现了请一定赐教~
先从最简单的来说起吧,首先需要一个div来做整个游戏的容器,由于游戏要能在手机上玩,所以宽高就必须做成自适应的,那么viewport的设置是必不可少的:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
html, body{
height: 100%;
position: relative;
margin:;
overflow: hidden;
-webkit-user-select:none;
}
接下来是容器container的样式:
#container{
height: 100%;
position: relative;
overflow: hidden;
}
另外,为了让游戏在PC浏览器中也可以玩,我又用媒体查询做了如下设置:
@media screen and (min-width: 1024px) {
#container{
width: 360px;
margin: 0 auto;
}
}
游戏的容器container有一个背景图片,这个背景图片是需要连续且无限滚动的。首先,图片纵向平铺嘛,一个background-repeat: repeat-y;搞定。原先我考虑这么简单的运动用css3肯定能做的啦,但细细考虑之后发现竟然实现不了。。。假设在keyframes中设置关键帧,改变background-position来实现背景移动,移动倒是没问题,关键是这个连续无限滚动比较棘手,要连续滚动必须给一个很大的值才行,background-position需要设为多大才算无限呢?天知道玩家能玩多长时间,而且这样做显然是不合理的。或者把动画的播放次数设为infinite呢?这也不行,因为每次循环都会从头开始播放一遍,这样背景会闪动。所以最终还是把背景的移动放在js中来操作了,用一个变量来记录背景的位置,然后在主线程中不断递增。大概的代码结构是这样子的:
var game = {
bgMove : function(){
posMark += 2;
container.css('background-position', '0 '+posMark+'px');
timmer = requestAnimationFrame(game.bgMove);
}
}

@-webkit-keyframes flyr{
0%{
background-position: 0 0;
}
100%{
background-position: -108px 0;
}
}
.flyr{
-webkit-animation:flyr 200ms steps(2) 0 infinite;
}
@-webkit-keyframes up{
0%{
bottom:;
}
100%{
bottom: 44%;
}
}
.flyl{
-webkit-animation:flyl 200ms steps(2) 0 infinite, up 4s linear 0 1 normal forwards;
}
@-webkit-keyframes mover{
0%{
left :;
}
100%{
left : 100%;
}
}
.flyl{
left: 0 !important;
-webkit-animation:flyl 200ms steps(2) 0 infinite, up 4s linear 0 1 normal forwards;
}
.flyr{
left: 100% !important;
-webkit-animation:flyr 200ms steps(2) 0 infinite, up 4s linear 0 1 normal forwards;
}
-webkit-transition : left 1.5s 0 linear;
$(document).on('click', function(){
if(++direction%2==0){
player[0].className = 'flyl';
}
else{
player[0].className = 'flyr';
}
});
-webkit-transform-origin:center 4px;
bgMove : function(){
game.generateHand();//产生横梁
posMark += 2;
container.css('background-position', '0 '+posMark+'px'); var hands = $('.hand_l, .hand_r');
hands.each(function(index, element){
var _this = $(this),
thisTop = parseInt(_this.css('top'));
if(thisTop>cHeight){
_this.remove();
}
else{
thisTop += 2;
_this.css('top', thisTop+'px');
}
if(thisTop>player.offset().top+e1H){
//已经位于下方
if(!_this.data('pass') && index%2==0){
scroeC.text(++score);
_this.data('pass', 1);
}
}
else{
//碰撞检测
if(game.impactCheck(player, _this.find('.t'))){
game.stop();
return false;
}
} }); timmer = requestAnimationFrame(game.bgMove);
}
isMobile : function(){
var sUserAgent= navigator.userAgent.toLowerCase(),
bIsIpad= sUserAgent.match(/ipad/i) == "ipad",
bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os",
bIsMidp= sUserAgent.match(/midp/i) == "midp",
bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4",
bIsUc= sUserAgent.match(/ucweb/i) == "ucweb",
bIsAndroid= sUserAgent.match(/android/i) == "android",
bIsCE= sUserAgent.match(/windows ce/i) == "windows ce",
bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile",
bIsWebview = sUserAgent.match(/webview/i) == "webview";
return (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM);
} var eventType = this.isMobile() ? 'touchstart' : 'click';
$(document).on(eventType, function(){
if(++direction%2==0){
player[0].className = 'flyl';
}
else{
player[0].className = 'flyr';
}
});
<a id="share" href="javascript:(function(){window.open('http://v.t.sina.com.cn/share/share.php?title=网页版SwingCopters,来,看看你有多挫&url=idoube.com/proj/SwingCopters&source=bookmark&pic=http%3A%2F%2Fidoube.com%2Fproj%2FSwingCopters%2FSwingCopters%2Fshot.jpg','_blank','width=450,height=400');})()">分享到微博</a>
DOM+CSS3实现小游戏SwingCopters的更多相关文章
- css3+jquery+js做的翻翻乐小游戏
主要是为了练习一下css3的3D翻转功能,就做了这么个小游戏,做的比较粗糙,但是效果看的见. 主要用到的css3代码如下: html结构: <div class="container& ...
- 制作动画或小游戏——CreateJS事件(二)
在Canvas中如果要添加事件,就需要计算坐标来模拟各种事件,而EaselJS中已经封装好了多个事件,只需调用即可. 一.事件 1)点击 事件是绑定在Shape类中的,click事件与DOM中的意思是 ...
- JS实现别踩白块小游戏
最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作. 程序思路:如图:将游 ...
- 使用Vue编写点击数字小游戏
使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果 ...
- 原生javascript开发仿微信打飞机小游戏
今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不 ...
- flappy pig小游戏源码分析(1)——主程序初探
闲逛github发现一个javascript原生实现的小游戏,源码写的很清晰,适合想提高水平的同学观摩学习.读通源码后,我决定写一系列的博客来分析源码,从整体架构到具体实现细节来帮助一些想提高水平的朋 ...
- “倔驴”一个h5小游戏的实现和思考(码易直播)——总结与整理
3月23日晚上8点半(中国队火拼韩国的时候),做了一期直播分享.15年做的一个小游戏,把核心代码拿出来,现场讲写了一遍,结果后面翻车了,写错了两个地方,导致运行效果有点问题,直播边说话边写代码还真不一 ...
- 浅试 Webview 一app 加载 H5小游戏
整体架构: InventionActivity:实现UI的实例化,基本的按钮Activity之间跳转 GameActivity:实现UI的实例化,Webview的基本使用 MyProgressDial ...
- 例子:js超级玛丽小游戏
韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理 采用面向对象思想设计超级马里奥游戏人物(示意图) 怎么用通过按键 ...
随机推荐
- ue4 UE4Editor.lib找不到
PublicDependencyModuleNames里加了Launch后,会导致链接UE4Editor.lib, 但这个文件在预编版的引擎里是没有的(奇怪的是自己编译引擎的话会有) 如果只是要头文件 ...
- 20145226夏艺华 《Java程序设计》第0周学习总结
关于师生关系: 学生和老师之间我觉得关系时多元化的,不能拘泥于单独的一种关系:灌输与被灌输,教授与被教授--我认为,在不同的课程阶段,师生之间的关系都可以发生变化.前期的老师更像是一个指路的人,而在入 ...
- vs2015 附加到进程找不到w3wp.exe
vs2015 附加到进程找不到w3wp.exe 解决办法: 浏览器打开你访问的IIS地址后就出现了~!!!!!!!!!
- MMS搜索功能修改
高通平台的MMS源码中提供了搜索功能,但要先选择分类(名字,号码,信息内容,彩信主题),再输入字符,根据分类进行搜索. 而在Contacts中却不需要分类,直接根据输入字符搜索任意匹配字段.相比之下, ...
- 《uml大战需求分析》阅读笔记05
<uml大战需求分析>阅读笔记05 这次我主要阅读了这本书的第九十章,通过看这章的知识了解了不少的知识开发某系统的重要前提是:这个系统有谁在用?这些人通过这个系统能做什么事? 一般搞清楚这 ...
- Azure Service Bus 中的身份验证方式 Shared Access Signature
var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...
- ubuntu gcc-5 安装
安装了一个ubuntu 15.10,没有集成vim,很失望,先安装个vim,sudo apt-get install vim. 开始获取g++-5: $ sudo add-apt-repository ...
- 【九度OJ】题目1061:成绩排序
题目描述: 有N个学生的数据,将学生数据按成绩高低排序,如果成绩相同则按姓名字符的字母序排序,如果姓名的字母序也相同则按照学生的年龄排序,并输出N个学生排序后的信息. 输入: 测试数据有多组,每组输入 ...
- 「2014-3-11」HTTP 初步探究
网络上存在很多资源,也持续不断地生成新的资源.为了新建.获取和操作这些资源,引来了两个问题:如何定位资源,如何对他们进行操作.第一个问题引申出了 URI / URL 即 uniform resourc ...
- Learning ROS for Robotics Programming - Second Edition(《学习ROS机器人编程-第二版》)
Learning ROS for Robotics Programming - Second Edition <学习ROS机器人编程-第二版> ----Your one-stop guid ...