WoofJS

WoofJS is a learnable JavaScript framework for creating games by The Coding Space.

WoofJS was created to be the next step after block-based coding in Scratch. For more details, you can read our announcement post.

Getting Started (woofjs.com)

We recommend that you get started with WoofJS on woofjs.com, because you...

• can get started with zero set-up
• use our interactive and searchable documentation
• get access to our WoofJS curriculum
• create an account to save your work
• use our text-editor fine-tuned for use with WoofJS, including code-hints and type-a-head
• iterate quickly with live updates to your output as you type

Getting Started (outside woofjs.com)

Installing WoofJS

For development (which always grabs the latest version):

<script src="https://rawgit.com/stevekrouse/WoofJS/master/dist/woof.js"></script>

For production (which is tied to a specific commit hash):

Go to rawgit.com and type this in:

https://github.com/stevekrouse/WoofJS/blob/master/dist/woof.js

And grab the link on the left, which should look like:

<script src="https://cdn.rawgit.com/stevekrouse/WoofJS/b41555bf/dist/woof.js"></script>

Global mode

When you include the Woof script in your code, it defaults to creating a full-screen project and polluting your global namespace with Woof's methods.

We find not having to type "Woof." over and over again makes a huge difference for beginner programmers, especially those new to typing.

However, if you'd like to turn off this mode, simply add global="false" in your HTML script tag:

<script src="https://cdn.rawgit.com/stevekrouse/WoofJS/b41555bf/dist/woof.js" global="false"></script>

Then in your JavaScript, you'd need to create your project manually:

var project = new Woof({global: false, width: 300, height: 400})

var IMAGE_NAME = new project.Image({project: project, url: "./images/SMJjVCL.png"})

Full Screen

You can disable the fullScreen default by putting fullScreen=false in your JavaScript code and then manually setting the size you'd like it to be:

fullScreen = false
setBackdropSize(500, 300)

Note: setBackdropSize(x,y) only accepts number inputs. If you'd like your background to be a percentage of the screen size, you need to calculate that yourself:

// set the x to 50% of the window's width and y to 500px
setBackdropSize(window.innerWidth * (50/100), 500)

// every time the window resizes, recalculate the width from the `window.innerWidth` property
window.addEventListener("resize", () => {
  setBackdropSize(window.innerWidth * (50/100), 500)
})

Reporting a bug

Simply create an issue with a link to the simplest code you can create that would reproduce the bug, preferably on woofjs.com.

Contributing

WoofJS is used by hundreds of students all over the world to build games and animations.

We'd love your help in making it even more learnable and dependable for them.

The WoofJS directory structure

woofjs.com

woofjs.com is hosted on Github pages from this repository. This means that all of the top-level URLs on woofjs.com must be in the top-level of the directory. This includes:

• index.html
• create.html
• full.html
• teach.html
• user.html
• login.html
• favicon.png
• etc

The documentation that you find on woofjs.com/create.html is contained within the docs folder.

woof.js core library

If you'd like to contribute to the core WoofJS library, you will edit the code in src/woof.es6.js, but these edits need to be compiled to dist/woof.js using babel.

To do that, make sure you've installed the npm dependencies with npm install, then, before you start editing files, run the following command to tell babel to watch for changes and automatically compile:

npm run compile

You can abort this process at any time by pressing CTRL+C

WoofJS.com's Tutorials

WoofJS.com's tutorials actually live at an entirely different repo: https://github.com/stevekrouse/coding.space.

You can find them there in the woof/ subdirectory. If you'd like to contribute to the WoofJS curriculum, head on over to that repo.

Getting started

1. We recommend using https://c9.io as your development environment -- when you create an account, it asks for a credit card, but it won't charge you.

2. Create a new basic HTML workstation, and clone the Woof repository.

   git clone https://github.com/stevekrouse/WoofJS.git
   

3. Install the npm dependencies.

   npm install
   

4. Take a look at our issues and see if there are any issues that speak to you as good places to tackle first. Pay particular attention to issues labeled "good for beginners."

5. Create a new local branch to work on your issue -- use a descriptive branch name like in this example:

   git checkout -b more-pokemon-sprites
   

6. Once you've made your changes, commit them to your branch.

   git commit -m "add more pokemon sprites"
   

7. Push your new branch (not master!) to the GitHub repo.

   git push origin more-pokemon-sprites
   

8. Submit a pull request so your changes can be reviewed.

If you have any questions, please email steve at thecodingspace.com :)

License

MIT License, so do with our code as you will. If you want help using the code or integrating with WoofJS, we're happy to help :)