我目前正在为我的一个编程类(class)开发一个 HTML 游戏,我想添加一个“游戏结束”屏幕,在他们死前显示图像和分数信息。
我想要的是图像覆盖页面主体并从屏幕中间的小处开始,然后“扩展”或放大到特定尺寸的屏幕。我不确定这是否清楚,但这就是我要寻找的东西:
但我希望它放大而不是仅仅出现。任何链接或帮助将不胜感激,因为我什至不知道在谷歌上搜索什么来获取这方面的信息!
在此先感谢您的帮助!
最佳答案
这真的很粗糙,但你可以这样做:
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。缩放框尺寸的大小变量。更改限制。做任何事。应该足以让您继续前进。
关于javascript - 如何使用 HTML 和 Javascript 创建放大到屏幕的 "game over"图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29952248/