D&G`s BloG V3.0.0

2018,再出发!

【 动作游戏 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 || {});;

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

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

点赞