kontra
Version:
Kontra HTML5 game development library
52 lines (44 loc) • 1.16 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 custom sprite
class CustomSprite extends kontra.Sprite.class {
constructor(properties) {
super(properties);
// add custom properties
this.color = 'green';
this.altColor = 'red';
this.width = 20;
this.height = 40;
}
// create custom functions
stripe() {
let pos = 0;
this.context.fillStyle = this.altColor;
while (pos < this.height) {
this.context.fillRect(this.x, this.y + pos, this.width, 10);
pos += 20;
}
}
render() {
this.draw(); // draw the sprite normally
this.stripe();
}
}
window.sprite = new CustomSprite({
x: 290,
y: 180
});
sprite.render();
</script>
<script src="../prism/codeOutput.js"></script>
</body>
</html>