examples/v0.0.1/demo/index.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>JCast Engine Demo</title>
  <script type="text/javascript" src="lib/jcast.min.js"></script>
</head>

<body>
  <canvas width="410" height="210"></canvas>
  <script type="text/javascript">
    // Get canvas reference:
    var canvas = document.querySelector('canvas');

    // Instantiate and center the camera:

    var camera = new jcast.Camera({
      farClipPlane: 10
    });

    camera.transform.position.x
      = camera.transform.position.y = 5;

    // Define your coloured materials to be used:

    var bgMaterial = new jcast.Material({
      color: new jcast.Color({
        r: 162,
        g: 218,
        b: 235
      })
    });

    var floorMaterial = new jcast.Material({
      color: new jcast.Color({
        r: 150,
        g: 150,
        b: 150
      })
    });

    var blockMaterial = new jcast.Material({
      color: new jcast.Color({
        r: 195,
        g: 195,
        b: 195
      })
    });

    var pillarMaterial = new jcast.Material({
      color: new jcast.Color({
        r: 200,
        g: 200,
        b: 200
      })
    });

    var glassMaterial = new jcast.Material({
      color: new jcast.Color({
        r: 200,
        g: 0,
        b: 200,
        a: 0.5
      })
    });

    // Define your blocks/walls:

    var block = new jcast.Block({
      walls: [
        new jcast.Wall({
          material: blockMaterial
        })
      ]
    });

    var pillarBlock = new jcast.Block({
      walls: [
        new jcast.Wall({
          material: pillarMaterial
        }),
        new jcast.Wall({
          material: pillarMaterial
        })
      ]
    });

    var glassBlock = new jcast.Block({
      walls: [
        new jcast.Wall({
          material: glassMaterial
        })
      ]
    });

    // Create your map:

    var map = new jcast.Map({
      width: 10,
      height: 10,
      depth: 1,
      name: 'Test Map',
      camera,
      bg: bgMaterial,
      floor: floorMaterial
    });

    // Populate your map with your blocks:

    // Add the glass block:
    map.setBlock(8, 5, glassBlock);

    // We loop through each border of the map, if the current position is even then we add the normal block, otherwise we add a pillar:

    for (var x = 0; x < map.width; x++) {
      map.setBlock(x, 0, (x % 2) == 0 ? block : pillarBlock);
      map.setBlock(x, map.height - 1, (x % 2) == 0 ? block : pillarBlock);
    }

    for (var y = 0; y < map.height; y++) {
      map.setBlock(0, y, (y % 2) == 0 ? block : pillarBlock);
      map.setBlock(map.width - 1, y, (y % 2) == 0 ? block : pillarBlock);
    }

    // Init and start your game:
    var game = jcast.init({ canvas, map });
    game.start();

    // Rotate the camera by intervals:

    var vrs = 0.01;

    setInterval(() => {
      var z = camera.transform.rotation.z;

      if (z >= 1.0 || z <= -1.0) {
        vrs *= -1;
      }

      // Rotate horizontally and vertically:
      camera.rotate(0, jcast.Time.deltaTime, vrs);
    }, 1000 / 60);
  </script>
</body>

</html>