Elpy

2D JavaScript game engine.

Generate Convert Improve

Install / Use

/learn @space2pacman/Elpy

About this skill

Quality Score

0/100

README

Elpy.js - 2D JavaScript game engine.

logo

| Demo | Game examples | | :---: | :---: |

Docs

<a href="#install">Install</a>
<a href="#basic-usage-example">Basic usage example</a>
<a href="#engine">Engine</a>
- <a href="#createname-x-y-width-height-options">create()</a>
- <a href="#addobject">add()</a>
- <a href="#keycallback">key()</a>
- <a href="#keydowncallback">keydown()</a>
- <a href="#keyupcallback">keyup()</a>
- <a href="#mousemovecallback">mousemove()</a>
- <a href="#clickcallback">click()</a>
- <a href="#tickcallback">tick()</a>
- <a href="#nexttickcallback">nextTick()</a>
- <a href="#checkobjectinviewportobject">checkObjectInViewport()</a>
- <a href="#fixingcameraobject-fixedcamera">fixingCamera()</a>
- <a href="#unfixingcamera">unfixingCamera()</a>
- <a href="#destroy">destroy()</a>
- <a href="#onevent-callback">on()</a>
 - <a href="#event-load">Event 'load'</a>
 - <a href="#event-animation">Event 'animation'</a>
- <a href="#load">load()</a>
<a href="#engine-getters">Engine getters</a>
<a href="#object">Object</a>
- <a href="#runstep">run()</a>
- <a href="#movex-y">move()</a>
- <a href="#flydegrees-distance-step">fly()</a>
- <a href="#jumpheight-multiplier-forced">jump()</a>
- <a href="#fallmultiplier">fall()</a>
- <a href="#pushobject">push()</a>
- <a href="#rotatedegrees-x-y">rotate()</a>
- <a href="#stop">stop()</a>
- <a href="#destroy-1">destroy()</a>
- <a href="#collisionobject">collision()</a>
- <a href="#onevent-callback-1">on()</a>
 - <a href="#event-collision">Event 'collision'</a>
 - <a href="#event-move">Event 'move'</a>
 - <a href="#event-rotate">Event 'rotate'</a>
 - <a href="#event-destroy">Event 'destroy'</a>
 - <a href="#event-state">Event 'state'</a>
 - <a href="#event-jump">Event 'jump'</a>
 - <a href="#event-fall">Event 'fall'</a>
 - <a href="#event-fly">Event 'fly'</a>
 - <a href="#event-object">Event object</a>
- <a href="#removecollisionobject">removeCollision()</a>
<a href="#object-getters">Object getters</a>
<a href="#object-setters">Object setters</a>
<a href="#development">Development</a>
<a href="#license">License</a>

games

Install

Download

Latest builds are available in the project releases page.

CDN

https://unpkg.com/elpy/dist/elpy.min.js

NPM

npm install elpy

Basic usage example

<!DOCTYPE html>
<html>
<head>
  <title>Elpy.js</title>
</head>
<body>
  <canvas id="field"></canvas>
  <script src="elpy.min.js"></script>
  <script>
    const elpy = new Elpy('#field', 500, 500);
    const player = elpy.create('player', 50, 50, 20, 20);
    const wall = elpy.create('wall', 100, 50, 20, 20, { color: 'brown' });

    elpy.add(player);
    elpy.add(wall);
    player.collision(wall);

    elpy.key(key => {
      if (key === 'ArrowUp') {
        player.move(player.x, player.y - 1);
      }
      if (key === 'ArrowDown') {
        player.move(player.x, player.y + 1);
      }
      if (key === 'ArrowLeft') {
        player.move(player.x - 1, player.y);
      }
      if (key === 'ArrowRight') {
        player.move(player.x + 1, player.y);
      }
    });
  </script>
</body>
</html>

Engine

Create engine instance

const elpy = new Elpy(
  "#element", // id element canvas or HTML object element get by document.querySelector().
  500, // width.
  500, // height.
  // options.
  {
    preload, // default - true, enable / disable preloader.
    favicon // default - true, enable / disable favicon.
  }
)

create(name, x, y, width, height, options)

Creates and returns an engine object.

min example

const player = elpy.create('player', 10, 10, 20, 20);

max example

const player = elpy.create('player', 10, 10, 20, 20, {
  obstacle: true, // default - true.
  pushing: false, // default - false.
  disabledEvents: false, // default - false.
  type: 'player object', // default - null.
  custom: {}, // default - null.
  color, // default - 'black'.
  // image: '' or image: { path: '', repeat: false }.
  image: { 
    path: '', // default - null.
    repeat: false // default - false.
  },
  // default - null.
  images: [
    {
      paths: ['images/player_left.png', 'images/player_right.png'], // path to image.
      state: 'move:left', // in what condition are the images available. player.state = 'move:left'.
      time: 100 // if player.animate = true - switching time between images.
    }
  ]
});

| name | type | description | | :---: | :---: | :--- | | `obstacle` | `<Boolean>` | To determine if an object is an obstacle if there is a collision with the object. If the object was not added to the collision then the object will pass through another object. If an object has been added to a collision, then by default the object will stop on collision. If it is necessary that the collision event occur and the object passes through the object, then the obstacle property can be switched to false. | | `pushing` | `<Boolean>` | Will the object move if it is pushed through the push method. | | `disabledEvents` | `<Boolean>` | Disables all events for an object. | | `type` | `<Null>`, `<String>` | A simple string that allows you to add your own data. It is convenient to use to set the type of an object in order to distinguish them from each other later. | | `custom` | `<Null>`, `<Object>` | An object where you can add your fields and use them via `object.options.custorm`. | | `color` | `<String>` | Set object color. | | `image` | `<String>`, `<Object>` | Set image. Two data types can be used: String or Object. `image: 'path/to/image/'` or for repeat image `image: { path: 'path/to/image/', repeat: true }`. | | `images` | `<Array>` | Can be used if the object has several images that can be changed through the state. For example, the image of the position when the player goes to the right or left. You can also make animation of switching frames through the animate property (<a href="#object-getters">Object getters</a>). The switching `time` is set in the time property. |

add(object)

Add an object to the engine.

elpy.add(player);

key(callback)

Listen for keydown and keyup events. Сallback is always called when a key is pressed.

elpy.key(key => {
  if (key === 'ArrowUp') {
    // ...
  }
});

keydown(callback)

Сallback fires once on click.

elpy.keydown(key => {
  if (key === 'ArrowUp') {
    // ...
  }
});

keyup(callback)

Сallback fires once on click.

elpy.keyup(key => {
  if (key === 'ArrowUp') {
    // ...
  }
});

mousemove(callback)

Handles mouse movement on the canvas.

elpy.mousemove((x, y) => {
  // x, y - coordinates inside the canvas.
});

click(callback)

Handles mouse click on the canvas.

elpy.click((x, y) => {
  // x, y - coordinates inside the canvas.
});

tick(callback)

Called recursively. The next call is queued after the scene is updated (render). To cancel the call inside the callback, return false.

let delta = 0;
// tick will be called 100 times.
elpy.tick(() => {
  if (delta === 100) {
    return false; // stop tick.
  }

  delta++;
  
  player.move(player.x + delta, player.y + delta);
});

nextTick(callback)

Adds a callback to the queue after the scene is updated (rendered) and calls callback once.

elpy.nextTick(() => {
  // ...
});

checkObjectInViewport(object)

Checking if the object is in the visible area.

elpy.checkObjectInViewport(player); // returns true or false.

fixingCamera(object, fixedCamera)

Fix the camera behind the object. You can fix both in one coordinate and in two.

min example

elpy.fixingCamera(player, {
  x: true
});

max example

elpy.fixingCamera(player, {
  x: true,
  y: true
});

Related Skills

node-connect

329.0k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

81.1k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

329.0k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

commit-push-pr

81.1k

Commit, push, and open a PR