Examples - KernelPlay.js

main.js

import { Game } from "kernelplay-js";
import { Level1 } from "./scenes/Level1.js";

class MyGame extends Game {
  init() {
    this.sceneManager.addScene(new Level1("Level1"));
    this.sceneManager.startScene("Level1");
  }
}

const game = new MyGame({
  width: 800,
  height: 600,
  fps: 60
});

game.start();

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>KernelPlay Game</title>
</head>
<body>
  <script type="importmap">
    {
      "imports": {
        "kernelplay-js": "https://cdn.jsdelivr.net/npm/kernelplay-js@latest/dist/kernelplay.es.js"
      }
    }
  </script>
  <script type="module" src="./main.js"></script>
</body>
</html>

Level1.js

import { Scene } from "kernelplay-js";
import { Player } from "../prefabs/Player.js";
import { Box } from "../prefabs/Box.js";
import { Entity, TransformComponent, CameraComponent } from "kernelplay-js";

export class Level1 extends Scene {
  init() {
    const player = new Player(400, 100);

    const camera = new Entity("MainCamera");
    camera.id = 100;
    camera.addComponent("transform", new TransformComponent({
      position: { x: 400, y: 300, z: 10 }
    }));
    camera.addComponent("camera", new CameraComponent({
      width: 800,
      height: 600,
      isPrimary: true,
      target: player,
    }));

    this.addEntity(camera);
    this.addEntity(player);

    this.addEntity(new Box(400, 300, "Wall"));
    this.addEntity(new Box(650, 370, "Wall"));
    this.addEntity(new Box(650, 170, "Wall"));
    this.addEntity(new Box(150, 170, "Wall"));
    this.addEntity(new Box(150, 360, "Wall"));

    this.addEntity(new Box(650, 120, "Coin"));
    this.addEntity(new Box(150, 315, "Coin"));
  }
}

Player.js

import {
    Entity,
    TransformComponent,
    ColliderComponent,
    BoxRenderComponent,
    Rigidbody2DComponent
} from "kernelplay-js";

import { PlayerController } from "../scripts/PlayerController.js";
import { Layers } from "kernelplay-js";

export class Player extends Entity {
    constructor(x, y) {
        super("Player");

        this.layer = Layers.Player;
        this.tag = "player"

        this.addComponent("transform", new TransformComponent({
            position: { x, y },
        }));
        this.addComponent("rigidbody2d",new Rigidbody2DComponent({
            mass: 1,
            gravityScale: 1
        }));
        this.addComponent("collider", new ColliderComponent());
        this.addComponent("renderer", new BoxRenderComponent("red"));
        this.addComponent("playerController", new PlayerController());
    }
}

Box.js

import {
    Entity,
    TransformComponent,
    ColliderComponent,
    BoxRenderComponent,
} from "kernelplay-js";

export class Box extends Entity {
    constructor(x, y, name="Wall") {

        super(name);
        this.tag = name.toLowerCase();
        this.zIndex = -1;
        
        switch (name) {
            case "Wall":
                this.addComponent("transform", new TransformComponent({
                    position: { x, y },
                    scale: {x: 3, y: 1}
                }));
                this.addComponent("collider", new ColliderComponent({isTrigger:false}));
                this.addComponent("renderer", new BoxRenderComponent({color:"#135800"}));
                break;
        
            case "Coin":
                this.addComponent("transform", new TransformComponent({
                    position: { x, y },
                    scale: {x: 0.4, y: 0.4}
                }));
                this.addComponent("collider", new ColliderComponent({isTrigger:true}));
                this.addComponent("renderer", new BoxRenderComponent({color:"#ffea00"}));
                break;
        }
    }
}

PlayerController.js

import { ScriptComponent, Keyboard, Mouse, Layers } from "kernelplay-js";

export class PlayerController extends ScriptComponent {
    onStart(){
        this.pos = this.entity.getComponent("transform").position;
    }

    update(dt) {
        const rb = this.entity.getComponent("rigidbody2d");

        rb.velocity.x = 0;
        // rb.velocity.y = 0;

        if (Keyboard.isPressed("ArrowRight")) rb.velocity.x = 200;
        if (Keyboard.isPressed("ArrowLeft")) rb.velocity.x = -200;
        if (Keyboard.isPressed("ArrowUp")) rb.velocity.y = -200;
        if (Keyboard.isPressed("ArrowDown")) rb.velocity.y = 200;

        if (Mouse.wasPressed(0)) {
            const hit = this.entity.scene.raycast(Mouse.x, Mouse.y, {
                layerMask: Layers.Player
            });

            console.log("Hit (Player layer only):", hit?.entity?.tag);
        }

        if (rb.isGrounded) {
            if (Keyboard.isPressed(" ")) {
                rb.addForce(0, -600, "impulse");
                this.isGround = false;
            }
        }

        if(this.pos.x > 1000, this.pos.y > 1000) {
            this.pos.x = 400;
            this.pos.y = 100;
        }
    }

    // onCollision(other) {
    //     // Called when a solid collision occurs
    //     console.log("Player hit:", other.name);
    // }

    onTriggerEnter(other) {
        // Called when entering a trigger collider
        // console.log("Player entered trigger:", other.tag);
        if (other.tag === "coin") {
            other.destroy();
            console.log("Coin collected !!!");
            
        }
    }
}