HTML5逆天:65行JS代码实现的Flappy Bird

澳门新葡亰网址 1

HTML代码

<div id="container">
  <!-- The container is dynamically populated using the init function in leaves.js -->
  <!-- Its dimensions and position are defined using its id selector in leaves.css -->
  <div id="leafContainer"></div>
  <!-- its appearance, dimensions, and position are defined using its id selector in leaves.css -->
  <div id="message">
   <em>这是基于webkit的落叶动画</em>
  </div>
</div>

澳门新葡亰网址 1

JavaScript代码

/* Define the number of leaves to be used in the animation */
const NUMBER_OF_LEAVES = 30;

/* 
    Called when the "Falling Leaves" page is completely loaded.
*/
function init()
{
    /* Get a reference to the element that will contain the leaves */
    var container = document.getElementById('leafContainer');
    /* Fill the empty container with new leaves */
    for (var i = 0; i < NUMBER_OF_LEAVES; i++) 
    {
        container.appendChild(createALeaf());
    }
}

/*
    Receives the lowest and highest values of a range and
    returns a random integer that falls within that range.
*/
function randomInteger(low, high)
{
    return low + Math.floor(Math.random() * (high - low));
}

/*
   Receives the lowest and highest values of a range and
   returns a random float that falls within that range.
*/
function randomFloat(low, high)
{
    return low + Math.random() * (high - low);
}

/*
    Receives a number and returns its CSS pixel value.
*/
function pixelValue(value)
{
    return value + 'px';
}

/*
    Returns a duration value for the falling animation.
*/

function durationValue(value)
{
    return value + 's';
}

/*
    Uses an img element to create each leaf. "Leaves.css" implements two spin 
    animations for the leaves: clockwiseSpin and counterclockwiseSpinAndFlip. This
    function determines which of these spin animations should be applied to each leaf.

*/
function createALeaf()
{
    /* Start by creating a wrapper div, and an empty img element */
    var leafDiv = document.createElement('div');
    var image = document.createElement('img');

    /* Randomly choose a leaf image and assign it to the newly created element */
    image.src = 'images/realLeaf' + randomInteger(1, 5) + '.png';

    leafDiv.style.top = "-100px";

    /* Position the leaf at a random location along the screen */
    leafDiv.style.left = pixelValue(randomInteger(0, 500));

    /* Randomly choose a spin animation */
    var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';

    /* Set the -webkit-animation-name property with these values */
    leafDiv.style.webkitAnimationName = 'fade, drop';
    image.style.webkitAnimationName = spinAnimationName;

    /* Figure out a random duration for the fade and drop animations */
    var fadeAndDropDuration = durationValue(randomFloat(5, 11));

    /* Figure out another random duration for the spin animation */
    var spinDuration = durationValue(randomFloat(4, 8));
    /* Set the -webkit-animation-duration property with these values */
    leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;

    var leafDelay = durationValue(randomFloat(0, 5));
    leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;

    image.style.webkitAnimationDuration = spinDuration;

    // add the <img> to the <div>
    leafDiv.appendChild(image);

    /* Return this img element so it can be added to the document */
    return leafDiv;
}

/* Calls the init function when the "Falling Leaves" page is full loaded */
window.addEventListener('load', init, false);

在线演示源码下载

HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5
Canvas特性和HTML5
3D特性,我们更加可以欣赏到超酷的动画特效。1、HTML5版Flappy
Bird游戏,仅65行Javascript代码
Flappy
Bird相信大家都很熟悉了,2014年最热门的手机游戏之一。Flappy
Bird这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发,形式简易但难度极高的休闲游戏,很容易让人上瘾。今天我们用HTML5来重写这款Flappy
Bird游戏,值得注意的是,利用Phaser框架,只需65行Javascript代码即可实现HTML5版的Flappy
Bird游戏。按空格键控制小鸟,试试看吧。在线演示 / 源码下载2、3D HTML5
Logo动画,HTML5多视角3D旋转动画
今天分享的这款HTML5
3D旋转动画是利用纯HTML5技术实现的,该动画实现了HTML5
Logo旋转的效果。在线演示 / 源码下载3、HTML5
WebGL水面水波荡漾特效,可多视角展示
今天向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大石头,在水面上点击即可泛起水波,加上模拟光的照射,水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动,也可以拖动画面多视角观看该HTML5水波动画。在线演示
/
源码下载4、HTML5版切水果游戏,HTML5游戏极品这是一款由百度JS小组提供的HTML5版切水果游戏,虽然和原版的切水果游戏相比功能不怎么完善,但是该HTML5切水果游戏也算有声有色,画面也十分华丽。在线演示
/ 源码下载5、CSS3 飘带菜单,超酷3D
CSS3菜单
今天要分享的这款CSS3菜单非常特别,菜单是呈飘带状的,鼠标滑过菜单项时,菜单项会凸显出来,表现的非常立体动感。在线演示
/
源码下载6、HTML5跳伞游戏,看谁先安全降落地面这是一款非常不错的HTML5休闲小游戏,主要应用了HTML5的重力感应效果。游戏一共四个玩家,主要是比谁先安全降落地面,绿色信号灯亮时,按下“X”键开始降落,然后再按“X”键打开降落伞进行安全降落,你需要控制好时机来按下“X”键和对手们比谁先安全降落。大家也可以在下面下载源代码学习分享。在线演示
/
源码下载7、HTML5视频播放器Video.Js,播放器外观可自定义以前我们都是使用flash来制作视频播放器,现在HTML5逐渐发展起来了,我们也可以利用HTML5来制作播放器。今天给大家介绍一款HTML5播放器Video.Js,改HTML5视频播放器可以自己定义外观,包括整体颜色,播放按钮定制等功能。总体来说,Video.Js是一款很不错的视频播放器。在线演示
/
源码下载澳门新葡亰网址,8、HTML5树叶飘落动画,HTML5动画经典今天来分享一款HTML5树叶飘落动画,这款HTML5树叶飘落动画是基于webkit内核的,所以需要webkit内核的浏览器才能播放该动画,效果真的非常酷。在线演示
/ 源码下载以上就是8款令人惊叹的HTML5
Canvas动画特效,欢迎收藏分享。本文由html5tricks收集整理,转载请务必保留原文链接。

这是一款基于HTML5的树叶飘落动画,树叶都是图片,并非CSS3绘制,但是树叶飘落的动画效果非常逼真。这款HTML5树叶飘落动画是基于webkit内核的,也就是说要在webkit内核的浏览器上才能使用这款动画。

在线演示源码下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图