kontra
Version:
Kontra HTML5 game development library
71 lines (64 loc) • 1.63 kB
HTML
<html>
<head>
<title>Sprite Collision</title>
<script src="../../kontra.js"></script>
</head>
<body>
<canvas id="game" width="600" height="400" style="background: #333331"></canvas>
<script id="code">
// initialize the game and setup the canvas
let { canvas, context } = kontra.init();
// create a basic sprite with a velocity
window.sprite1 = kontra.Sprite({
x: 100,
y: 180,
dx: 3,
dy: 0,
width: 60,
height: 40,
color: 'red'
});
// create a second basic sprite
window.sprite2 = kontra.Sprite({
x: canvas.width - 100 - 60,
y: 180,
dx: -3,
dy: 0,
width: 60,
height: 40,
color: 'blue'
});
// create the game loop to update and render the sprite
window.loop = kontra.GameLoop({
update: function() {
sprite1.update();
sprite2.update();
// check for collision
if (sprite1.collidesWith(sprite2)) {
sprite1.color = 'purple';
sprite2.color= 'purple';
}
else {
sprite1.color = 'red';
sprite2.color = 'blue';
}
// reset the sprites position when it reaches the edge of the game
if (sprite1.x > canvas.width) {
sprite1.x = -sprite1.width;
}
if (sprite2.x < -sprite2.width) {
sprite2.x = canvas.width;
}
},
render: function() {
sprite1.render();
sprite2.render();
}
});
// start the loop
loop.start();
</script>
<script src="../prism/codeOutput.js"></script>
</body>
</html>