Javascript engine to make fast games.

Overview

G3 Javascript

Basic javascript engine to make fast games and write clean code. 🕹️

Example code:

const g3 = new G3()

const Window = g3.createWindow("Window1", 700, 700)

const mineSprite = new g3.Sprite(g3.getImage("./texture.png"), 0, 0, Window.context)

Window.background = "#373"

function loop() {
    Window.update()
    Window.fillRect(400, 400, 20, 20, "#fff")
    mineSprite.draw()
    requestAnimationFrame(loop)
}

loop()

Result:

Preview image

Supported events:

  • onKeydown
g3.onKeydown(e => {
    console.log("Hello")
})
  • onClick
g3.onClick(e => {
    console.log("Hello")
})
  • onKeyup
g3.onKeyup(e => {
    console.log("Hello")
})

General event listener:

g3.watchEvent("keydown", e => {
    console.log("Hello")
})

Key constants

  • g3.KEY.DOWN_ARROW
  • g3.KEY.UP_ARROW
  • g3.KEY.LEFT_ARROW
  • g3.KEY.RIGHT_ARROW
  • g3.KEY.W
  • g3.KEY.A
  • g3.KEY.S
  • g3.KEY.D
  • g3.KEY.ENTER
  • g3.KEY.SPACE

createWindow():

If your canvas must have an specific width and height use this example:

let name = "Window1"
let width = 700 // px
let height = 700 // px

g3.createWindow(name, width, height)

If you want a fullscreen canvas:

let name = "Window1"

g3.createWindow(name, "full")

getImage() :

Returns an Image instance

let src = "./example.png"
let image = g3.getImage(src)

saveData():

This method save an object to localStorage that you can load using the loadData() method. You can usit to save games.

let key = "Save 1"

let object = {
    name:"Gamer",
    age:17,
    speed:100,
    inventory:["Apple", "Backpack"]
}
g3.saveData(key, object)

loadData():

Following the last example of saveData()

let key = "Save 1"

let object = g3.loadData(key)

console.log(object)
Output: {
    name:"Gamer",
    age:17,
    speed:100,
    inventory:["Apple", "Backpack"]
}

maths object methods and properties:

distanceBetweenPoints():

const x1 = 0
const y1 = 0
const x2 = 10
const y2 = 10

g3.maths.distanceBetweenPoints(x1, y1, x2, y2) 

toRadians():

Convert from degrees to radians

const degrees = 360

g3.maths.toRadians(degrees)

Sprite methods and properties

Example code:

   let Window = g3.createWindow("Window", 700, 700)
   let x = 0
   let y = 0
   let image = g3.getImage("./example.png")
   
   let Sprite = new g3.Sprite(image, x, y, Window.context)

clip():

Clipping next image (100 x 100):

Example image

    let clipX = 0
    let clipY = 0
    let clipWidth = 50
    let clipHeight = 50
    
    Sprite.clip(clipX, clipY, clipWidth, clipHeight)

Result:

Example image 2

Window methods:

clear():

Clear the canvas for the next frame.

Window.clear()

fillRect():

Fill's a rectangle in x and y position with an specific width and height.

let x = 0
let y = 0
let width = 70
let height = 70

Window.fillRect(x, y, width, height)

arc():

With this method you can choose whether to fill or draw an arc.

let x = 0
let y = 0
let radius = 10
let startAngle = 0
let endAngle = Math.PI * 2 // 360°
let color = "#fff"
let fill = false // false to stroke rect and true to fill. By default fill is set true.
let anticlockwise = false // By default is set to false

Window.arc(x , y, radius, startAngle, endAngle, color, fill, anticlockwise)

line():

Stroke a line

let x1 = 0
let y1 = 0
let x2 = 0
let y2 = 0
let color = "#fff" // Optional. By default #fff
let lineWidth = 2 // This an optional argument. By default is set 1

Window.line(x1, y1, x2, y2, color, lineWidth)

update():

This method clear the display and resize canvas to fullscreen if you set the size to "full" in createWindow()

function loop(){
    Window.update()
    requestAnimationFrame(loop)
}
loop()

Window properties:

background

Fill's the background of the canvas with an specific color.

Window.background = "#faf"
You might also like...

Offline modification of Doodle Champion Island Games by Google

Doodle Champion Island Games This is an offline backup copy of the Doodle Champion Island Games by Google and Studio 4°C. The game has been modified t

Dec 24, 2022

La extensión web que muestra el precio de los juegos de la web de Xbox, PlayStation, Nintendo y Epic Games Store con los impuestos de Argentina incluidos. Conocé cuanto vas a pagar por tus juegos 💚💙❤️

La extensión web que muestra el precio de los juegos de la web de Xbox, PlayStation, Nintendo y Epic Games Store con los impuestos de Argentina incluidos. Conocé cuanto vas a pagar por tus juegos 💚💙❤️

Conocido anteriormente como Xboxito Impuestito - Conocé el precio real de los juegos Impuestito calcula y muestra el precio de los juegos de la web de

Dec 4, 2022

Add all games from purchased itch.io bundles to your library.

itch-io-bundle-claimer When you purchase some game bundles on itch.io, you are required to manually claim every game that you want to add to your libr

Oct 3, 2022

Record games and emulate a League of Legends spectator server

Neeko-Server Neeko-Server is an application that record games emulates a League of Legends spectator server to serve them to the League of Legends cli

Dec 1, 2022

See a banned user's profile, their friends, their favorite games, their followers etc.

Roblox-Banned-User-Viewer AKA BanView See a banned user's profile, their friends, their favorite games, their followers etc. Ever wondered how to view

Nov 18, 2022

Mirror from https://github.com/BochilGaming/games-wabot/tree/multi-device

Games-Wabot Join Group Diskusi NO BOT Deploy to Heroku Heroku Buildpack BuildPack LINK FFMPEG here IMAGEMAGICK here FOR TERMUX USER Type mentioned bel

Dec 20, 2022

A 👩‍💻 developer-friendly entity management system for 🕹 games and similarly demanding applications, based on 🛠 ECS architecture.

Miniplex Ecosystem miniplex miniplex-react Introduction Miniplex is an entity management system for games and similarly demanding applications. Instea

Dec 31, 2022

A solution for highlights extraction for sports games by The Unknowns.

A solution for highlights extraction for sports games by The Unknowns.

Sportlight by The Unknowns Next.js, Express.js, NLTK, symbl.ai Inspiration - Problem Statement #3 by Experion Technologies Publishing highlights after

Apr 19, 2022

Learn design patterns through games with TypeScript and Phaser 🕹️

Learn design patterns through games with TypeScript and Phaser 🕹️

Welcome to Design patterns gamified! I created this repo to teach design patterns through games. Each folder contains a tiny game that demonstrates ho

Nov 10, 2022
Owner
Starship Code
Starship Code
A fast & reliable transaction API for web3 Games, Bridges and other projects

Gelato Relay SDK SDK to integrate into Gelato Multichain Relay Table of Contents Installation Introduction Quick Start Payment Types Request Types Sen

Gelato 17 Dec 31, 2022
Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Phaser - HTML5 Game Framework Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop a

Richard Davey 33.4k Jan 7, 2023
The project integrates workflow engine, report engine and organization authority management background, which can be applied to the development of OA, HR, CRM, PM and other systems. With tlv8 IDE, business system development, testing and deployment can be realized quickly.

介绍 项目集成了工作流引擎、报表引擎和组织机构权限管理后台,可以应用于OA、HR、CRM、PM等系统开发。配合使用tlv8 ide可以快速实现业务系统开发、测试、部署。 后台采用Spring MVC架构简单方便,前端使用流行的layui界面美观大方。 采用组件开发技术,提高系统的灵活性和可扩展性;采

Qian Chen 38 Dec 27, 2022
Trying to make a game engine apparently.

Clockwork - a game engine from scratch The goal of this project is to build a game engine, I still don't know what it needs to do, but will update thi

Anas Mazouni 2 Oct 31, 2021
🌌 Fast, in-memory, full-text search engine written in TypeScript. Now in beta.

Installation You can install Lyra using npm, yarn, pnpm: npm i @nearform/lyra yarn add @nearform/lyra pnpm add @nearform/lyra Usage Lyra is quite simp

NearForm 5.1k Dec 30, 2022
A library for boolean aliases to help you make your code more confusing and make your coworkers hate you.

yup-nope A library for boolean aliases to help you make your code more confusing and make your coworkers hate you. Installation Using npm: npm install

Bence A. Tóth 4 Dec 10, 2022
why make apps to increase focus -- when you can make apps to reduce focus

impossifocus ?? What is this? ImpossiFocus will measure focus by reading your brainwaves -- and if you're in the zone, it'll ensure that changes with

Aleem Rehmtulla 10 Nov 30, 2022
Notes may contain grammatical errors and some wont make sense and will only make sense to me

This is my own notes containing all the information and knowledge I've gained during my studying sessions. The notes are all topics that relates to technology such as computers, software or programming.

null 126 Dec 15, 2022
Library to make your web page shareable fast and easy in all the majors social networks.

SocialShareJS This is a simple libray to make your web page shareable fast and easy. Its allow to include the social share link of the major social ne

Assis Ferreira 19 Jul 24, 2022