kontra
Version:
Kontra HTML5 game development library
58 lines (53 loc) • 1.44 kB
HTML
<html>
<head>
<title>Controlling A Sprite</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.sprite = kontra.Sprite({
x: 290,
y: 180,
dx: 3,
dy: 0,
width: 20,
height: 40,
color: 'red',
counter: 0,
update: function() {
// call advance to move the sprite by its velocity
this.advance();
// reset the sprites position when it reaches the edge of the game
if (this.x > canvas.width) {
this.x = -this.width;
}
},
render: function() {
// change the color of the sprite every 30 frames
if (++this.counter % 30 === 0) {
this.color = (this.color === 'red' ? 'blue' : 'red');
}
// call draw to draw the sprite to the screen
this.draw();
}
});
// 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>