I'm trying to use the kaboom.js library for the first time. My goal is to display a text in my div with the id game-placeholder.
Here's my body:
<body>
<div class="navbar">
<h3>Kaboom Game</h3>
</div>
<div class="container">
<div id="game-placeholder">
</div>
<div class="highscores">
<h2>High Scores</h2>
<ul id="highscore-list">
<!-- High scores will be dynamically added here -->
<li>No high scores yet.</li>
</ul>
</div>
</div>
<script>
// Kaboom.js game initialization
kaboom({
width: 640,
height: 360,
clearColor: [0, 0, 0, 1],
scale: 1,
debug: true,
global: true,
});
add([
text("Hello, Kaboom.js!", 24),
pos(100, 100),
origin("center"),
]);
</script>
</body>
But for some reason my div always stays black, and I can't seem to get kaboom to initialize. What am I doing wrong, and how can I fix that?
Use the
canvasoption of the kaboom.js initializer.