serginator/kontra-tutorial.html

## kontra-tutorial.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />

<style id="webmakerstyle">
body {
  background: black;
}

canvas {
  background: white;
  width: 100%;
  max-width: 480px;
  margin: auto;
  display: block;
}
</style>
</head>
<body>
  <canvas id="game" width="256" height="256"></canvas>

<script src="https://unpkg.com/kontra@5.0.4/dist/core.js"></script>
<script src="https://unpkg.com/kontra@5.0.4/dist/gameLoop.js"></script>
<script src="https://unpkg.com/kontra@5.0.4/dist/keyboard.js"></script>
<script src="https://unpkg.com/kontra@5.0.4/dist/sprite.js"></script>
<script src="https://unpkg.com/kontra@5.0.4/dist/assets.js"></script>
<script src="https://unpkg.com/kontra@5.0.4/dist/pointer.js"></script>
<script>
// initiate kontra
kontra.init();

let dead = false,
    win = false;

kontra.assets.load(
  'https://i.ibb.co/3dfWpPq/background.png',
  'https://i.ibb.co/ZS3Ys8W/player.png',
  'https://i.ibb.co/XxYG6vq/enemy.png')
.then(() => {
  // define a sprite
  let background = kontra.sprite({
    // position
    x: 0,
    y: 0,
    image: kontra.assets.images['https://i.ibb.co/3dfWpPq/background.png'],
  });

  let player = kontra.sprite({
    x: 125,
    y: 240,
    image: kontra.assets.images['https://i.ibb.co/ZS3Ys8W/player.png'],
  });

  let enemy = kontra.sprite({
    x: 0,
    y: 0,
    image: kontra.assets.images['https://i.ibb.co/XxYG6vq/enemy.png'],
  });

  let enemies = [
    kontra.sprite({
      x: 50,
      y: 200,
      image: kontra.assets.images['https://i.ibb.co/XxYG6vq/enemy.png'],
      dx: 1,
    }),
    kontra.sprite({
      x: 200,
      y: 150,
      image: kontra.assets.images['https://i.ibb.co/XxYG6vq/enemy.png'],
      dx: -1,
    }),
    kontra.sprite({
      x: 50,
      y: 100,
      image: kontra.assets.images['https://i.ibb.co/XxYG6vq/enemy.png'],
      dx: 1,
    }),
    kontra.sprite({
      x: 200,
      y: 50,
      image: kontra.assets.images['https://i.ibb.co/XxYG6vq/enemy.png'],
      dx: -1,
    }),
  ];


  // define the loop of the game
  let loop = kontra.gameLoop({
    update: () => {
      if (kontra.keys.pressed('up')) {
        player.y += -1;
      }
      if (kontra.keys.pressed('down')) {
        player.y += 1;
      }
      if (player.y <=10) {
        win = true;
        loop.stop();
      }
      background.update();
      player.update();
      for (let i = 0, n = enemies.length; i < n; i++) {

        if (enemies[i].x >= 210) {
          enemies[i].dx = -1 * enemies[i].dx;
        } else if (enemies[i].x <= 46) {
          enemies[i].dx = -1 * enemies[i].dx;
        }
        enemies[i].update();

        //collisions
        if (enemies[i].collidesWith(player)) {
          dead = true;
          loop.stop();
        }
      }
    },
    render: () => {
      background.render();
      player.render();
      for (let i = 0, n = enemies.length; i < n; i++) {
        enemies[i].render();
      }
      if (dead) {
        kontra.context.font = '30px Arial';
        kontra.context.fillStyle = 'red';
        kontra.context.fillText('You are DEAD', 30, 200);
      } else if (win) {
        kontra.context.font = '30px Arial';
        kontra.context.fillStyle = 'red';
        kontra.context.fillText('You Won!!!', 70, 200);
      }
    }
  });

  // start the loop
  loop.start();
});

//# sourceURL=userscript.js
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />

	<style id="webmakerstyle">
	body {
	background: black;
	}

	canvas {
	background: white;
	width: 100%;
	max-width: 480px;
	margin: auto;
	display: block;
	}
	</style>
	</head>
	<body>
	<canvas id="game" width="256" height="256"></canvas>

	<script src="https://unpkg.com/kontra@5.0.4/dist/core.js"></script>
	<script src="https://unpkg.com/kontra@5.0.4/dist/gameLoop.js"></script>
	<script src="https://unpkg.com/kontra@5.0.4/dist/keyboard.js"></script>
	<script src="https://unpkg.com/kontra@5.0.4/dist/sprite.js"></script>
	<script src="https://unpkg.com/kontra@5.0.4/dist/assets.js"></script>
	<script src="https://unpkg.com/kontra@5.0.4/dist/pointer.js"></script>
	<script>
	// initiate kontra
	kontra.init();

	let dead = false,
	win = false;

	kontra.assets.load(
	'https://i.ibb.co/3dfWpPq/background.png',
	'https://i.ibb.co/ZS3Ys8W/player.png',
	'https://i.ibb.co/XxYG6vq/enemy.png')
	.then(() => {
	// define a sprite
	let background = kontra.sprite({
	// position
	x: 0,
	y: 0,
	image: kontra.assets.images['https://i.ibb.co/3dfWpPq/background.png'],
	});

	let player = kontra.sprite({
	x: 125,
	y: 240,
	image: kontra.assets.images['https://i.ibb.co/ZS3Ys8W/player.png'],
	});

	let enemy = kontra.sprite({
	x: 0,
	y: 0,
	image: kontra.assets.images['https://i.ibb.co/XxYG6vq/enemy.png'],
	});

	let enemies = [
	kontra.sprite({
	x: 50,
	y: 200,
	image: kontra.assets.images['https://i.ibb.co/XxYG6vq/enemy.png'],
	dx: 1,
	}),
	kontra.sprite({
	x: 200,
	y: 150,
	image: kontra.assets.images['https://i.ibb.co/XxYG6vq/enemy.png'],
	dx: -1,
	}),
	kontra.sprite({
	x: 50,
	y: 100,
	image: kontra.assets.images['https://i.ibb.co/XxYG6vq/enemy.png'],
	dx: 1,
	}),
	kontra.sprite({
	x: 200,
	y: 50,
	image: kontra.assets.images['https://i.ibb.co/XxYG6vq/enemy.png'],
	dx: -1,
	}),
	];


	// define the loop of the game
	let loop = kontra.gameLoop({
	update: () => {
	if (kontra.keys.pressed('up')) {
	player.y += -1;
	}
	if (kontra.keys.pressed('down')) {
	player.y += 1;
	}
	if (player.y <=10) {
	win = true;
	loop.stop();
	}
	background.update();
	player.update();
	for (let i = 0, n = enemies.length; i < n; i++) {

	if (enemies[i].x >= 210) {
	enemies[i].dx = -1 * enemies[i].dx;
	} else if (enemies[i].x <= 46) {
	enemies[i].dx = -1 * enemies[i].dx;
	}
	enemies[i].update();

	//collisions
	if (enemies[i].collidesWith(player)) {
	dead = true;
	loop.stop();
	}
	}
	},
	render: () => {
	background.render();
	player.render();
	for (let i = 0, n = enemies.length; i < n; i++) {
	enemies[i].render();
	}
	if (dead) {
	kontra.context.font = '30px Arial';
	kontra.context.fillStyle = 'red';
	kontra.context.fillText('You are DEAD', 30, 200);
	} else if (win) {
	kontra.context.font = '30px Arial';
	kontra.context.fillStyle = 'red';
	kontra.context.fillText('You Won!!!', 70, 200);
	}
	}
	});

	// start the loop
	loop.start();
	});

	//# sourceURL=userscript.js
	</script>
	</body>
	</html>