RalliPi/doodle-jump-kaboomjs-1.html

## doodle-jump-kaboomjs-1.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://kaboomjs.com/lib/0.5.1/kaboom.js"></script>
    <script type="module">

      ///////////////////////////////////////////////////////////////////
      ///////////////////////////////////////////////////////////////////
      ///////////////////////////////////////////////////////////////////

      //a tutorial on how this game works, can be found at
      //https:minigameengine.com

      //////////////////////////////////////////////////////////////////
      ///////////////////////////////////////////////////////////////////
      ///////////////////////////////////////////////////////////////////

      // initialize kaboom context
      kaboom({ width: 480, height: 800, global: true });

      scene("menu", (args) => {
        var startButton = add([
          text("Start", 24),
          origin("center"),
          pos(width() / 2, height() / 2),
        ]);

        startButton.action(() => {
          if (startButton.isHovered()) {
            startButton.color = rgb(0.7, 0.7, 0.7);
          } else {
            startButton.color = rgb(1, 1, 1);
          }
        });

        startButton.clicks(() => {
          go("main");
        });
      });

      // define a scene
      scene("main", () => {
        // add a text at position (100, 100)
        var player = add([
          rect(50, 50),
          origin("center"),
          color(rgb(1, 1, 1)),
          pos(width() / 2, height() / 2),
          body(),
        ]);

        var lastPosY = player.pos.y;
        var highestPlatformY = height();

        //create first 10 platforms
        for (let i = 0; i < 10; i++) {
          createPlatform();
        }

        // mouseClick(() => {
        //   player.jump(700);
        // });

        player.collides("platform", (p) => {
          if (player.pos.y > lastPosY) {
            player.jump(700);
          }
        });

        keyDown("left", () => {
          player.move(-100, 0);
        });
        keyDown("right", () => {
          player.move(100, 0);
        });

        player.action(() => {
          lastPosY = player.pos.y;
          camPos({ x: width() / 2, y: player.pos.y });
          if (player.pos.x > width() + player.width / 2) {
            player.pos.x = -player.width / 2;
          }
          if (player.pos.x < -player.width / 2) {
            player.pos.x = width() + player.width / 2;
          }
        });

        action("platform", (platform) => {
          if (platform.pos.y > player.pos.y + height() / 2) {
            destroy(platform);
            createPlatform();
          }
        });

        function createPlatform() {
          let newPlatform = add([
            rect(120, 24),
            origin("center"),
            color(rgb(1, 1, 1)),
            pos(
              rand(60, width() - 60),
              rand(highestPlatformY - 40, highestPlatformY - 200)
            ),
            "platform",
          ]);
          if (newPlatform.pos.y < highestPlatformY) {
            highestPlatformY = newPlatform.pos.y;
          }
        }
      });

      // start the game
      start("menu");
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script src="https://kaboomjs.com/lib/0.5.1/kaboom.js"></script>
	<script type="module">

	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////

	//a tutorial on how this game works, can be found at
	//https:minigameengine.com

	//////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////

	// initialize kaboom context
	kaboom({ width: 480, height: 800, global: true });

	scene("menu", (args) => {
	var startButton = add([
	text("Start", 24),
	origin("center"),
	pos(width() / 2, height() / 2),
	]);

	startButton.action(() => {
	if (startButton.isHovered()) {
	startButton.color = rgb(0.7, 0.7, 0.7);
	} else {
	startButton.color = rgb(1, 1, 1);
	}
	});

	startButton.clicks(() => {
	go("main");
	});
	});

	// define a scene
	scene("main", () => {
	// add a text at position (100, 100)
	var player = add([
	rect(50, 50),
	origin("center"),
	color(rgb(1, 1, 1)),
	pos(width() / 2, height() / 2),
	body(),
	]);

	var lastPosY = player.pos.y;
	var highestPlatformY = height();

	//create first 10 platforms
	for (let i = 0; i < 10; i++) {
	createPlatform();
	}

	// mouseClick(() => {
	// player.jump(700);
	// });

	player.collides("platform", (p) => {
	if (player.pos.y > lastPosY) {
	player.jump(700);
	}
	});

	keyDown("left", () => {
	player.move(-100, 0);
	});
	keyDown("right", () => {
	player.move(100, 0);
	});

	player.action(() => {
	lastPosY = player.pos.y;
	camPos({ x: width() / 2, y: player.pos.y });
	if (player.pos.x > width() + player.width / 2) {
	player.pos.x = -player.width / 2;
	}
	if (player.pos.x < -player.width / 2) {
	player.pos.x = width() + player.width / 2;
	}
	});

	action("platform", (platform) => {
	if (platform.pos.y > player.pos.y + height() / 2) {
	destroy(platform);
	createPlatform();
	}
	});

	function createPlatform() {
	let newPlatform = add([
	rect(120, 24),
	origin("center"),
	color(rgb(1, 1, 1)),
	pos(
	rand(60, width() - 60),
	rand(highestPlatformY - 40, highestPlatformY - 200)
	),
	"platform",
	]);
	if (newPlatform.pos.y < highestPlatformY) {
	highestPlatformY = newPlatform.pos.y;
	}
	}
	});

	// start the game
	start("menu");
	</script>
	</body>
	</html>