【 动作游戏 Flappy 】原生 JavaScript 做小游戏

Flappy Pig,是Pig,使用原生javascript写的网页版“Flappy Bird”。

整个程序,主要分几个部分:全局设置和工具函数,pig类(控制猪的跳跃,掉落等),柱子类(渲染柱子,控制柱子移动),位置判断(判断pig有没有撞到柱子上),controller(控制器,初始化各个类,全局设置,计时器的开始和结束,UI控制等),主函数(程序起点),接下来说下程序的几个难点:

1、跳动的猪

这里用到高中物理的“竖直上抛运动”,公式比较简单:S=V0t+½gt²。设定一个初速度,它决定了pig的“弹跳力”,另外,网页和现实世界是不一样的,g(重力加速度)的值要自己调整到合适,t就是计时器的时间,每次弹跳,t重置为0,之后t随着计时器setinterval不断变化,得到s就是pig跳动的高度。这样就产生一只跳动的猪。

2、随机产生的柱子

玩过“Flappy Bird”的朋友都知道,里面柱子是“起起伏伏”的,但是不会连续的一高一低(这样难度太大),总的来说就是一条波浪线,但它不是平整的波浪线。所以这里又用到了一个简单的数学公式,就是“正弦定理”,公式h = Math.abs(Math.sin(n * Math.random())) * 修正值,其中Math.abs是保证得到是正直,修正值用来把h放大到合适的比例。这样就产生一个高度波浪形变化的柱子,配合上一定间隔的另一半柱子,整个障碍物就渲染完了。

3、找到pig附近的柱子

这一步我纠结了好久,没办法,数学和物理都忘光了,想着想着大脑内存就溢出了,……,大家可以自己动手做一做,其实就也就是加减乘除。另外,得到当前第几根柱子,也可以算出分数。

4、判断有没有撞到

在上一步的h是需要记录下来的,因为上下的空隙高度是固定值,所以可以得到空隙上端和下端的位置(Y1和Y2),柱子移动的时候,可以知道柱子离pig的距离,柱子宽度是一定的,也可以知道pig什么时候离开柱子。

5、关于游戏的UI

ps不熟练,切了很长时间。上面说了这么多,都是设计思路。如果你有兴趣看源码的话,也请一定做好心理准备,因为我写着写着自己也晕了。如果你对代码有什么意见,或者有更好的思路,欢迎留言交流。

• 全部代码:

var flappy = (function (self) {
    'use strict';
 
    //设置
    self.option = {
        //重力加速度,屏幕像素和实际物理上的米有差别,所以存在换算
        g: 400,
        //跳跃的初速度,控制猪的弹跳力
        v0: 400,
        //柱子移动速度
        vp: 2.5,
        //频率,控制动画帧数,默认20ms
        frequency: 20,
        //关卡数
        levels: 100,
        //开头的空白距离
        safeLift: 500,
 
        //地板高度(和图片有关)
        floorHeight: 64,
 
        //猪的宽度
        pigWidth: 33,
        //猪的高度
        pigHeight: 30,
        //猪当前高度
        pigY: 300,
        //猪距离左边的距离,
        pigLeft: 80,
 
        //柱子Html
        pillarHtml: '<div class="top"></div><div class="bottom"></div>',
        //柱子宽度
        pillarWidth: 45,
        //柱子上下间隔高度
        pillarGapY: 108,
        //柱子左右间隔宽度
        pillarGapX: 250,
        //上柱子的基础定位值(就是top值,和css写法有关)
        pillarTop: -550,
        //下柱子的基础定位值
        pillarBottom: -500
    };
 
    return self;
 
})(flappy || {});;/**
 * 原生javascript实现的《Flappy Pig》v0.1.0
 * =======================================
 * @author keenwon
 * Full source at https://keenwon.com
 */
 
var flappy = (function (self) {
    'use strict';
 
    //工具
    self.util = {
        preventDefaultEvent: function (event) {
            event = window.event || event;
            if (event) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
            }
        },
        $: function (id) {
            return document.getElementById(id);
        },
        getChilds: function (obj) {
            var childs = obj.children || obj.childNodes,
                childsArray = [];
            for (var i = 0, len = childs.length; i < len; i++) {
                if (childs[i].nodeType == 1) {
                    childsArray.push(childs[i]);
                }
            }
            return childsArray;
        }
    };
 
    return self;
 
})(flappy || {});;

—— 谢谢观看 [ 文章最后编辑于:2017/03/04 ]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

sparklines迷你图系列2——Performance

昨天跟大家分享了关于sparklines迷你图插件的的第一类图表类型,尺度(Scales)图表类型,今天要分享的是第二个图表类型——在项目标管理中使用频率非常高...

31560
来自专栏算法+

自动红眼移除算法 附c++完整代码

“红眼”一般是指在人物摄影时,当闪光灯照射到人眼的时候,瞳孔放大而产生的视网膜泛红现象。

542130
来自专栏HT

纯Shading Language绘制飞机火焰效果

上篇《纯Shading Language绘制HTML5时钟》体现了GLSL可编程性特点,但没有体现GLSL可编程出各种酷炫效果的特点,今天我们将用纯Shadin...

24560
来自专栏数据小魔方

精美炫酷数据分析地图——简单几步轻松学会

本篇文章开始教大家如何使用矢量素材在Excel、PPT中自定义精美的数据分析图表。 使用矢量素材制作数据分析报告其实并不难,最常见的就是形式就是使用矢量地图制作...

47450
来自专栏walterlv - 吕毅的博客

WPF/UWP 的 Grid 布局竟然有 Bug,还不止一个!了解 Grid 中那些未定义的布局规则

发布于 2018-05-05 07:43 更新于 2018-08...

8210
来自专栏技术总结

Swift3.1动画(一)

26050
来自专栏DannyHoo的专栏

设置UITextView的行间距

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

12230
来自专栏游戏杂谈

社交应用动态九宫格图片的规则

iPhone6以下的设备(5s、SE、4s),判断条件同上,只是将512px改为200px

17710
来自专栏数据小魔方

创意玫瑰图2(Rose Chart)

今天跟大家分享另一种创意玫瑰图的制作方法! ▽ 本例所要讲的玫瑰图,制作方法稍微麻烦一点,主要是在数据组织环节比较繁琐,但是没有涉及到VBA的问题,所以只要动手...

28260
来自专栏程序你好

.Net 基于GDI+的图件绘制平台的设计与实现(一)

11720

扫码关注云+社区

领取腾讯云代金券