javascript - 如何使用 HTML 和 Javascript 创建放大到屏幕的 "game over"图像？

Question

我目前正在为我的一个编程类(class)开发一个 HTML 游戏，我想添加一个“游戏结束”屏幕，在他们死前显示图像和分数信息。

我想要的是图像覆盖页面主体并从屏幕中间的小处开始，然后“扩展”或放大到特定尺寸的屏幕。我不确定这是否清楚，但这就是我要寻找的东西:

但我希望它放大而不是仅仅出现。任何链接或帮助将不胜感激，因为我什至不知道在谷歌上搜索什么来获取这方面的信息!

在此先感谢您的帮助!

Answer 1

这真的很粗糙，但你可以这样做:

JS

var $foo = $('#foo');

grow = function (size) {
    if (size < 50) {
        console.log(size);
        $foo.css('width', size + '%');
        $foo.css('height', size + '%');
        size++;
        setTimeout(grow, 10, size);
    }
}

grow(0);

CSS

#foo {
    position: fixed;
    right: 0;
    left: 0;
    top:0;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top:auto;
    margin-bottom:auto;
    width: 0%;
    height: 0%;
    background-color: red;
}

https://jsfiddle.net/a05s1a44/

改变超时长度来控制速度。根据需要调整 CSS。缩放框尺寸的大小变量。更改限制。做任何事。应该足以让您继续前进。