Learnable JavaScript
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.
We recommend that you get started with WoofJS on woofjs.com, because you...
Go to raw.githack.com and type this in:
https://github.com/stevekrouse/WoofJS/blob/master/woof.js
And grab the link on the left, which should look like:
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:
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: "https://woofjs.com/images/SMJjVCL.png"})
You can disable the fullScreen default by putting
fullScreen=falsein 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) })
Simply create an issue with a link to the simplest code you can create that would reproduce the bug, preferably on woofjs.com.
WoofJS is used by hundreds of students from all over the world to build games and animations.
We'd love your help in making it even more learnable and dependable for them.
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:
The documentation that you find on woofjs.com/create.html is contained within the docs folder.
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.
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.
Create a new basic HTML workstation, and clone the Woof repository.
git clone https://github.com/stevekrouse/WoofJS.git
Set your git username: https://help.github.com/articles/setting-your-username-in-git/
Install the npm dependencies.
npm install
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."
Make sure that you are branching from a clean master.
git checkout masterand
git pull
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
Stage your changes to be committed.
git add .
Once you've made and staged your changes, commit them to your branch.
git commit -m "add more pokemon sprites"
Push your new branch (not master!) to the GitHub repo.
git push origin more-pokemon-sprites
Submit a pull request so your changes can be reviewed.
If you have any questions, please email steve at futureofcoding.org :)
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 :)