HarryStevens/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Focus the scene, and use the arrow keys to move.

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>
<body>
  <div id="scene"></div>
  <script src="scene.js"></script>
  <script src="player.js"></script>
  <script>
    let left = 0, right = 0, up = 0;

    const myScene = new Scene;
    myScene.init("#scene");

    const myPlayer = new Player;
    myPlayer.init({width: 100, height: 100, y: myScene.height});

    myScene.addPlayer(myPlayer);

    function tick(){
      requestAnimationFrame(tick);
      myScene.movePlayer({left, right, up});
      myScene.draw();
    }
    tick();

    addEventListener("keydown", e => {
      if (e.code === "ArrowLeft") { left = 1; right = 0; }
      if (e.code === "ArrowRight") { right = 1; left = 0; }
      if (e.code === "ArrowUp") up = 1;
    });
    addEventListener("keyup", e => {
      if (e.code === "ArrowLeft") left = 0;
      if (e.code === "ArrowRight") right = 0;
      if (e.code === "ArrowUp") up = 0;
    });
  </script>
</body>
</html>

## player.js
class Player {
  init(opts){
    this.width = opts && opts.width ? opts.width : 20;
    this.height = opts && opts.height ? opts.height : 20;
    this.x = opts && opts.x ? opts.x : 0;
    this.y = opts && opts.y ? opts.y : 0;
    this.vy = 0;
    this.agility = opts && opts.agility ? opts.agility : 5;
    this.jumpPower = opts && opts.jumpPower ? opts.jumpPower : 20;
    this.jumping = 0;
  }
}

## preview.png

      
    Raw
  

              preview.png
            
          
## scene.js
class Scene {
  init(elem, opts){
    this.elem = elem;

    this.gravity = opts && opts.gravity ? opts.gravity : 1.5;

    this.sel = document.querySelector(this.elem);
    this.canvas = document.createElement("canvas");
    this.canvas.style.background = "lightblue";
    this.context = this.canvas.getContext("2d");
    this.sel.appendChild(this.canvas);

    this.resize();
  }

  addPlayer(player){
    this.player = player;
  }

  movePlayer(dirs){
    if (!this.player) {
      console.error("You need to add a player with scene.addPlayer(player) before trying to move it.");
      return null;
    }

    if (dirs.right){
      this.player.x += Math.min(this.player.agility, this.width - (this.player.x + this.player.width));
    }

    if (dirs.left){
      this.player.x -= Math.min(this.player.agility, this.player.x);
    }

    if (dirs.up && !this.player.jumping){
      this.player.jumping = true;
      this.player.vy = this.player.jumpPower;
    }

    if (this.player.jumping){
      this.player.vy -= this.gravity;
      this.player.y -= this.player.vy;

      if (this.player.y - this.player.height < 0){
        this.player.y = this.player.height;
        this.player.vy = 0;
      }

      if (this.player.y >= this.height){
        this.player.y = this.height;
        this.player.vy = 0;
        this.player.jumping = false;
      }
    }

  }

  resize(){
    this.width = innerWidth;
    this.height = innerHeight;
  }

  draw(){
    this.resize();
    this.canvas.width = this.width;
    this.canvas.height = this.height;

    this.context.clearRect(0, 0, this.width, this.height)

    if (this.player){
      this.context.fillStyle = "steelblue";
      this.context.fillRect(this.player.x, this.player.y - this.player.height, this.player.width, this.player.height);
    }
  }
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	margin: 0;
	}
	</style>
	</head>
	<body>
	<div id="scene"></div>
	<script src="scene.js"></script>
	<script src="player.js"></script>
	<script>
	let left = 0, right = 0, up = 0;

	const myScene = new Scene;
	myScene.init("#scene");

	const myPlayer = new Player;
	myPlayer.init({width: 100, height: 100, y: myScene.height});

	myScene.addPlayer(myPlayer);

	function tick(){
	requestAnimationFrame(tick);
	myScene.movePlayer({left, right, up});
	myScene.draw();
	}
	tick();

	addEventListener("keydown", e => {
	if (e.code === "ArrowLeft") { left = 1; right = 0; }
	if (e.code === "ArrowRight") { right = 1; left = 0; }
	if (e.code === "ArrowUp") up = 1;
	});
	addEventListener("keyup", e => {
	if (e.code === "ArrowLeft") left = 0;
	if (e.code === "ArrowRight") right = 0;
	if (e.code === "ArrowUp") up = 0;
	});
	</script>
	</body>
	</html>
	class Player {
	init(opts){
	this.width = opts && opts.width ? opts.width : 20;
	this.height = opts && opts.height ? opts.height : 20;
	this.x = opts && opts.x ? opts.x : 0;
	this.y = opts && opts.y ? opts.y : 0;
	this.vy = 0;
	this.agility = opts && opts.agility ? opts.agility : 5;
	this.jumpPower = opts && opts.jumpPower ? opts.jumpPower : 20;
	this.jumping = 0;
	}
	}
	class Scene {
	init(elem, opts){
	this.elem = elem;

	this.gravity = opts && opts.gravity ? opts.gravity : 1.5;

	this.sel = document.querySelector(this.elem);
	this.canvas = document.createElement("canvas");
	this.canvas.style.background = "lightblue";
	this.context = this.canvas.getContext("2d");
	this.sel.appendChild(this.canvas);

	this.resize();
	}

	addPlayer(player){
	this.player = player;
	}

	movePlayer(dirs){
	if (!this.player) {
	console.error("You need to add a player with scene.addPlayer(player) before trying to move it.");
	return null;
	}

	if (dirs.right){
	this.player.x += Math.min(this.player.agility, this.width - (this.player.x + this.player.width));
	}

	if (dirs.left){
	this.player.x -= Math.min(this.player.agility, this.player.x);
	}

	if (dirs.up && !this.player.jumping){
	this.player.jumping = true;
	this.player.vy = this.player.jumpPower;
	}

	if (this.player.jumping){
	this.player.vy -= this.gravity;
	this.player.y -= this.player.vy;

	if (this.player.y - this.player.height < 0){
	this.player.y = this.player.height;
	this.player.vy = 0;
	}

	if (this.player.y >= this.height){
	this.player.y = this.height;
	this.player.vy = 0;
	this.player.jumping = false;
	}
	}

	}

	resize(){
	this.width = innerWidth;
	this.height = innerHeight;
	}

	draw(){
	this.resize();
	this.canvas.width = this.width;
	this.canvas.height = this.height;

	this.context.clearRect(0, 0, this.width, this.height)

	if (this.player){
	this.context.fillStyle = "steelblue";
	this.context.fillRect(this.player.x, this.player.y - this.player.height, this.player.width, this.player.height);
	}
	}
	}