A TypeScript port of the famous Turtle JS project.

Turtle JS is a graphic library based on the LOGO programming language aimed towards education. It allows JavaScript beginners to handle programming in a very graphic way, every action is rendered visually, making it easy to understand the principles of programming. BetterTurtle is an improved version of the many existing ones into TypeScript.

You can directly include a minified (No IntelliSense) version of the code into your HTML page.

<script src="https://github.com/Caesarovich/better-turtle/releases/download/v1.4.0/main.min.js"></script>

npm install --save better-turtle

# Clone the repo in your project directory
git clone https://github.com/Caesarovich/better-turtle

# Build the library
cd "better-turtle" && npm i && npm run build

# Then install it to your project

## 1 - Browser
npm exec webpack && mv dist/main.min.js ../turtle.min.js

## 2 - NPM
cd ../ && npm install better-turtle

const { Turtle } = BetterTurtle;

// Get an HTML Canvas element
const canvas = document.getElementById('my-canvas-element-id');
const ctx = canvas.getContext('2d');

// Instanciate a new Turtle
const tur = new Turtle(ctx);

tur.goto(-350, 0).forward(60).left(50).forward(300);

import { createCanvas } from 'canvas';
import { Turtle } from 'better-turtle';

const canvas = createCanvas(400, 400);
const ctx = canvas.getContext('2d');

const turtle = new Turtle(ctx);

turtle.forward(100).right(90).forward(50);

Using the .expose method, it is possible to expose a Turtle instance's methods onto a JavaScript Object. It is particularly useful when using it with a global object such as the window object in browsers.

Note: It is possible to remap the methods with the optionnal parameter. Further details in the docs 📔

const turtle = new Turtle(ctx);

turtle.expose(window);

// ...

forward(50);
right(120);
setColor('red');
forward(150);
hide();

The Turtle class extends the EventEmitter Class. Allowing you to listen to events such as 'step' or 'forward' when the turtle is in StepByStep Mode.

const turtle = new Turtle(ctx);

turtle.on('step', (step) => {
  console.log(`The turtle has done an action: ${step}`);
});

turtle.forward(120).left(90).forward(30).right(90);

In this exemple, every action will be logged in the console.