<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mantra.js Gallery Page - html collision-events-embed.html</title>
<script src="https://yantra.gg/mantra.js"></script>
</head>
<body>
<script>
let game;
function helloCollision(a, b, pair, context) {
let text = game.getEntityByName('last-collision-text');
game.updateEntity(text.id, {
text: 'Last Player Collision<br/><br/>' + context.target.type + ' and ' + context.owner.type
});
}
document.addEventListener('DOMContentLoaded', () => {
game = new MANTRA.Game({
width: 400,
height: 300,
markup: true,
plugins: [
'Block',
'Boomerang',
'Collectable',
'Container',
'Flame',
'Hexapod',
'Key',
'Player',
'Teleporter',
'Text'
],
showLoadingScreen: false
});
game.start(function () {
game.markup();
});
});
</script>
<style>
m-text {
font-size: 16px;
color: white;
text-align: center;
background-color: black;
}
</style>
<m-key data-x="10" data-y="10"></m-key>
<m-block data-x="-50" data-y="10" width="32" height="32"></m-block>
<m-player data-x="100" data-collision-start="helloCollision"></m-player>
<m-text width="400" height="60" data-y="-120" data-name="last-collision-text">Waiting for Player Collision... </m-text>
<m-hexapod data-texture="demon"></m-hexapod>
<m-hexapod data-texture="demon"></m-hexapod>
<m-hexapod data-x="-200" data-repeat="11"></m-hexapod>
<m-container data-name="key-container" data-x="-50" data-y="50" width="200" height="200">
<m-key data-x="50" data-y="50"></m-key>
<m-key data-x="-50" data-y="50"></m-key>
<m-key data-x="50" data-y="-50"></m-key>
<m-key data-x="-50" data-y="-50"></m-key>
</m-container>
</body>
</html>