All Projects → stevekrouse → Woofjs

stevekrouse / Woofjs

Licence: mit
Learnable JavaScript

Projects that are alternatives of or similar to Woofjs

Free Python Games
Free Python Games
Stars: ✭ 2,166 (+1592.19%)
Mutual labels:  games, education
bash-course
Material for the advanced bash scripting course at Heidelberg University
Stars: ✭ 35 (-72.66%)
Mutual labels:  education, learn
awesome-course
Create awesome courses that let your audience learn by coding ⌨️
Stars: ✭ 224 (+75%)
Mutual labels:  education, learn
Coding Problems
Solutions for various coding/algorithmic problems and many useful resources for learning algorithms and data structures
Stars: ✭ 2,221 (+1635.16%)
Mutual labels:  education, learn
Elm Cheat Sheet
An overview of Elm syntax and features
Stars: ✭ 928 (+625%)
Mutual labels:  education, learn
Python
All Algorithms implemented in Python
Stars: ✭ 125,688 (+98093.75%)
Mutual labels:  education, learn
diwa
A Deliberately Insecure Web Application
Stars: ✭ 32 (-75%)
Mutual labels:  education, learn
Rust Algorithms
Common data structures and algorithms in Rust
Stars: ✭ 2,918 (+2179.69%)
Mutual labels:  education, learn
Awesome Educational Games
A curated list of awesome educational games to learn editors, languages, programming, etc
Stars: ✭ 370 (+189.06%)
Mutual labels:  games, education
Free Courses
A collection of free courses about programming 📖
Stars: ✭ 281 (+119.53%)
Mutual labels:  education, learn
Awesome Python Scripts
🚀 Curated collection of Awesome Python Scripts which will make you go wow. Dive into this world of 360+ scripts. Feel free to contribute. Show your support by ✨this repository.
Stars: ✭ 198 (+54.69%)
Mutual labels:  education, learn
Lpic 1 Anki Flashcards
Deck of Anki flashcards for the LPIC-1 (Linux System Administrator) exams 101 and 102 of the Linux Professional Institute (LPI).
Stars: ✭ 90 (-29.69%)
Mutual labels:  education, learn
algorithms-in-python
Some famous algorithms implemented in Python
Stars: ✭ 21 (-83.59%)
Mutual labels:  education, learn
Sagefy
🔭 Learn anything, adapted for you. Free.
Stars: ✭ 80 (-37.5%)
Mutual labels:  education, learn
Raspberry Pi Os
Learning operating system development using Linux kernel and Raspberry Pi
Stars: ✭ 11,000 (+8493.75%)
Mutual labels:  education, learn
Studentinsights
We work within school communities to make open, secure, student-centered data systems. Say [email protected]!
Stars: ✭ 121 (-5.47%)
Mutual labels:  education
Relay Example
[READONLY] 💝 Examples of common Relay patterns used in real-world applications. This repository is automatically exported from https://github.com/adeira/universe via Shipit
Stars: ✭ 126 (-1.56%)
Mutual labels:  education
Mindforger
Thinking notebook and Markdown editor.
Stars: ✭ 1,695 (+1224.22%)
Mutual labels:  learn
Learn Java Codes
该仓库主要用于存放Java学习相关代码,相关笔记存放于 https://github.com/caojx-git/learn-java-notes 仓库
Stars: ✭ 120 (-6.25%)
Mutual labels:  learn
Git Kata
When you know the bases of git but sometimes you have problemes with it. This "code kata" could help you to deal with git problems
Stars: ✭ 127 (-0.78%)
Mutual labels:  learn

WoofJS license Code Triagers Badge cloud9

logo-dog-text.png

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)

screenshot 2017-03-03 at 10 04 05 am

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://raw.githack.com/stevekrouse/WoofJS/master/woof.js"></script>

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

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:

<script src="https://rawcdn.githack.com/stevekrouse/WoofJS/8f46930383acf6e7bc6db6a9084014bd3cbdd44a/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://rawcdn.githack.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: "https://woofjs.com/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 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.

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.

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. Set your git username: https://help.github.com/articles/setting-your-username-in-git/

  4. Install the npm dependencies.

    npm install
    
  5. 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."

  6. Make sure that you are branching from a clean master.

    git checkout master
    

and git pull

  1. 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
    
  2. Stage your changes to be committed.

    git add .
    
  3. Once you've made and staged your changes, commit them to your branch.

    git commit -m "add more pokemon sprites"
    
  4. Push your new branch (not master!) to the GitHub repo.

    git push origin more-pokemon-sprites
    
  5. Submit a pull request so your changes can be reviewed.

If you have any questions, please email steve at futureofcoding.org :)

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 :)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].