Skip to content

Quickstart using Parcel

Jump to bottom
J. G. Sebring edited this page Sep 18, 2021 · 2 revisions

Platformer Demo

This will show the absolute basics of a minimalistic platformer.

We'll be using yarn and parcel.

# install yarn globally
npm i -G yarn
# add freerunner to project
yarn add freerunner
# add parcel as devDependency
yarn add --dev parcel@next

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Freerunner | Platformer demo</title>
    <style>
      body {font-family: 'monospace'}
    </style>
    <script type="module" src="game.js"></script>
  </head>
  <body>
    <h1>Hello, Game!</h1>
    <p>Move with <kbd>WASD</kbd> or <kbd>ARROWS</kbd></p>
  </body>
</html>

game.js

import Freerunner from 'freerunner'

const F = Freerunner() // this is your new improved crafty object
F.init(300, 300).background('#eee')

// create solid component
F.c('Solid', {
    required: '2D, Canvas, Color',
    init() {
        this.color('black')
        return this
    }
})

// create floor component based on `Solid`
F.c('Floor', {
    required: 'Solid',
    init() {
        this.w = 75
        this.h = 25
        return this
    }
})

// create gravity item component
F.c('GameObject', {
    required: 'Gravity, Canvas, Color',
    init() {
        this.color('#930')
        this.gravity('Solid')
        return this
    }
})

// create a solid floor entities
F.e('Floor')
    .attr({x: 0, y: 250})
F.e('Floor')
    .attr({x: 100, y: 200})
F.e('Floor')
    .attr({x: 250, y: 250, w:50})
    .color('#666')

// create player    
F.e('Player, GameObject, Twoway')
  .attr({x: 0, y: 0, w: 20, h: 50})
  .twoway(200, 250)

Compile, bundle and serve index.html using parcel

yarn parcel index.html --open

Enjoy!

Clone this wiki locally