如何使用 HTML 和 Javascript 创建放大屏幕的“游戏结束”图像？答案

【问题标题】：How can I create a "game over" image zoom into the screen using HTML & Javascript?如何使用 HTML 和 Javascript 创建放大屏幕的“游戏结束”图像？
【发布时间】：2015-04-30 03:49:14
【问题描述】：

我目前正在为我的一个编程课程开发一个 HTML 游戏，我想添加一个“游戏结束”屏幕，该屏幕将在他们死前显示有关他们得分的图像和信息。

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

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

提前感谢您的帮助！

【问题讨论】：

查看 CSS3 转换，特别是平移和缩放。
它总是很感激你，至少，在询问“如何做”并显示你的代码“不工作”之前尝试实现你想要的。通常它会导致人们认为（我希望不是这样）发布者只是要求其他人为他们编写代码，甚至没有尝试过努力。
同上@AlvaroMenéndez 所说的。尤其是当您说您正在为一堂课（或为此工作）做这件事时。你不应该指望互联网会为你做功课。我知道在这种情况下，您可能会将该部分作为一种额外的积分添加到您的大部分成品中，但先试一试仍然没有什么坏处。
这个问题确实表明提问者没有付出任何努力... Stackoverflow 不是一个其他人会为您编写代码的网站。欢迎您就您的代码获得帮助，但不要指望我们会为您编写所有代码。此外，如果这是针对课程的，而您只是在寻找快速 givemetehcodez 答案，那么您并没有真正学习任何东西...

标签： javascript html css

【解决方案1】：

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

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。根据盒子的尺寸缩放 size 变量。更改限制。做任何事。应该足以让你继续前进。

【讨论】：

您也可以在 CSS 中使用过渡来实现这一点 - 除了切换类以打开它之外，不需要 javascript。

【解决方案2】：

FIDDLE： https://jsfiddle.net/shfv0b3f/

使用变换：缩放和过渡：

div {  
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

游戏结束：

div.zoom {
    transform: scale(1);
}

【讨论】：

【解决方案3】：

这是我为您制作的，希望对您有所帮助。

基本上在一个容器中，它可能是你的游戏窗口，我已经添加了你想要显示的“游戏结束”容器。

html 的其余部分只是为了让您在游戏容器中看到一些虚假内容：

<div class="container">
    <div class="stuff">and here is stuff</div>
    <div class="stuff">etc, ect, ect</div>
    <div class="stuff">more text</div>
    <div class="stuff">and more</div>
    
    <div class="button">Click here</div> 
    
    <div class="this-is-your-game-over"></div>
    
</div>

您可以看到还有一个名为button 的类，我用它来触发“游戏结束”容器缩放效果。在您的游戏开发中，您可能会使用其他东西来完成它。

然后，基本上，您将有一个“游戏结束”容器，如下所示：

.this-is-your-game-over {
    position:absolute;
    height:0px;
    width:0px;
    background-color:blue;
    right:0;
    left:0;
    bottom:0;
    top:0;
    margin: auto;     
}

所以它总是居中并由jquery：

$(document).ready(function () {
            $('.button').click(function () {
                $('.this-is-your-game-over').toggleClass("this-is-your-game-over-ADDED");                
                
            });
        });

当您单击按钮时，您将另一个类添加到“游戏结束”容器中，通过简单的过渡使其增长到您想要的大小：

.this-is-your-game-over-ADDED {
    height:80%;
    width:50%;  
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

这是 FIDDLE 可以看到实际情况

重要提示：如果在您的 html 中 this-is-your-game-over div 不在您的 html 末尾，您可能需要在其中添加一个正数 z-index。

【讨论】：

【解决方案4】：

这是 CSS 过渡和变换的完美用例。

非常基本：

#image {
  transition: all 0.5s;
}

#image.hidden {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.5);
}

然后你只需以某种方式切换.hidden 类，可能是通过JS。另外，不要忘记添加供应商前缀（或使用 Autoprefixer）。

请参阅http://codepen.io/anon/pen/waaMvM 以获得更好的示例。

【讨论】：