如何为kaboom.js网站制作背景
如何为kaboom.js网站制作背景
提问于 2021-09-24 11:46:19
我制作了一个kaboom.js应用程序，并希望为它设置一个背景。我该怎么做？我在谷歌上搜索了很多，自己也尝试了一些方法，但它仍然不起作用。
( StackOverflow还说我的帖子大多是代码，所以我添加了这段文字)
我的代码
index.html
<!DOCTYPE html>
<html>
<head>
<title>Kaboom!!!</title>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
* {
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
background: green;
}
canvas {
display: block;
}
</style>
</head>
<body>
{{kaboom}}
</body>
</html>main.js
import kaboom from "kaboom"
kaboom()
loadSprite("bean", "sprites/bean.png");
scene("game", () => {
let score = 0;
const scoreLabel = add([
text(score),
pos(24, 24)
])
action(() => {
score++;
scoreLabel.text = score;
});
// add a game object to screen
const bean = add([
// list of components
sprite("bean"),
pos(80, 40),
area(),
body()
])
// add the platform
const platform = add([
rect(width(), 48),
pos(0, height() - 48),
outline(4),
area(),
solid(),
color(127, 200, 255),
])
// add tree
const tree = add([
rect(48, 64),
area(),
outline(4),
pos(width(), height() - 48),
origin("botleft"),
color(255, 180, 255),
move(LEFT, 240),
"tree"
])
// events
// jump when mouse is clicked
mouseClick(() => {
if (bean.grounded()) {
bean.jump()
}
})
// explode when bean touches tree
bean.collides("tree", () => {
addKaboom(bean.pos)
shake()
go("lose")
})
// loops
loop(1, () => {
// add tree
add([
rect(48, 64),
area(),
outline(4),
pos(width(), height() - 48),
origin("botleft"),
color(255, 180, 255),
move(LEFT, 240),
"tree", // add a tag here
]);
});
});
scene("lose", () => {
add([
text("Game Over"),
pos(center()),
origin("center"),
])
mouseClick(() => {
go("game")
})
})
go("game")我试过：
使用CSS ( disappears )
- 的
- 和游戏加载时的背景出现了一秒，然后它就出现了
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-05-19 16:01:10
在新的更新之后，clearColor不再工作。使用background代替：
kaboom({
background: [51, 151, 255] // The RGB code
})Stack Overflow用户
发布于 2021-09-24 13:01:06
最后我自己想出了答案-
使用clearColor属性设置颜色。例如：
kaboom({
clearColor: [51, 151, 255] // The RGB code
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69314503
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号