JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<!-- <script src="https://unpkg.com/kaboom@3000.0.0-beta.2/dist/kaboom.js"></script> -->
<script src="https://unpkg.com/kaboom@3000.1.8/dist/kaboom.js"></script>
</head>
<body>

</body>
</html>

JavaScript

kaboom();
const object1 = add([
	color(RED),
  rect(50, 50),
  pos(50, 50),
  area(),
  'object1',
  z(1),
]);
const object2 = add([
	color(GREEN),
  rect(50, 50),
  pos(100, 50),
  area(),
  'object2',
]);
loop(1, () => {
  const object3 = add([
    color(YELLOW),
    rect(50, 50),
    pos(200, 50),
    area(),
    'object3',
    move(RIGHT, 100),
  ]);
  object3.onCollide('object4', () => {
  	object3.destroy()
  })
})
const object4 = add([
	color(BLUE),
  rect(50, 50),
  pos(300, 50),
  area(),
  'object4',
]);
onCollide('object1', 'object2', () => {
  console.log('onCollide')
})
onCollideEnd('object1', 'object2', () => {
  console.log('onCollideEnd')
})