kontra
Version:
Kontra HTML5 game development library
76 lines (67 loc) • 1.78 kB
HTML
<html>
<head>
<title>Pointer</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();
kontra.initPointer();
// create a sprite
window.sprite = kontra.Sprite({
x: 290,
y: 180,
width: 20,
height: 40,
color: 'red',
update: function() {
// move sprite center to pointer
this.x = kontra.pointer.x - this.width / 2;
this.y = kontra.pointer.y - this.height / 2;
// clamp position of the sprite to remain inside the canvas
if (this.x < 0) {
this.x = 0;
}
else if (this.x >= canvas.width - this.width) {
this.x = canvas.width - this.width;
}
if (this.y < 0) {
this.y = 0;
}
else if (this.y >= canvas.height - this.height) {
this.y = canvas.height - this.height;
}
},
// change size of sprite on click
onDown: function() {
if (this.width === 20) {
this.width = 40;
this.height = 80;
}
else {
this.width = 20;
this.height = 40;
}
}
});
// render and track pointer events on the sprite
sprite.render();
kontra.track(sprite);
// create the game loop to update and render the sprite
window.loop = kontra.GameLoop({
update: function() {
sprite.update();
},
render: function() {
sprite.render();
}
});
// start the loop
loop.start();
</script>
<script src="../prism/codeOutput.js"></script>
</body>
</html>