Skip to content

Home

Jump to bottom
Steve Krouse edited this page May 25, 2016 · 3 revisions

  1. What is WoofJS?

  2. Getting Started

What is WoofJS?

WoofJS is a JavaScript library for making web and mobile games and animations.

It was originally inspired by Scratch and can help ease the trasition to JavaScript.

WoofJS is developed with ❤️ by The Coding Space.

Notice: This is new software and is under rapid development, so expect things to break and be frequently changed. We expect our first stable release will come out by the end of Summer 2016. Until our first stable release, this software only runs on desktop Chrome, at which point we will support all modern desktop and mobile browsers.

Getting Started

You can either clone this JSBin or follow the steps below to setup your first WoofJS project.

  1. Put the Woof library between the <head> tags.
<script src="https://cdn.rawgit.com/stevekrouse/WoofJS/608440d8e9c984a44dcaef399dbe2008e8eee02d/woof.js"></script>
  1. Throw in some JavaScript, and tell Woof to fetch it.
var project = new Woof.Project({fullScreen: true, debug: ["project.keysDown", "project.mouseX", "project.mouseY", "timer"]}); 
// Set the backdrop URL (preferably of similar dimensions to your canvas)
project.setBackdropURL("http://efdreams.com/data_images/dreams/sky/sky-05.jpg");

// Add an image via a url, and optionally setting its x and y
var rectangle = project.addImage({url: "http://www.urdu-english.com/images/lessons/beginner/shapes/shapes-pics/rectangle.png", x: 0, y: 0});

// Make it move with the arrow keys by checking which keys are down every 40 milliseconds
project.forever(() => {
  if (project.keysDown.includes("LEFT")){
    // move left by 5
    rectangle.x -= 5; 
  }
  if (project.keysDown.includes("RIGHT")){
    rectangle.x +=5; 
  }
  if (project.keysDown.includes("UP")){
    rectangle.y += 5; 
  }
  if (project.keysDown.includes("DOWN")){
    rectangle.y -= 5; 
  }
});

// make the timer start at 20
var timer = 20;
// add text that diplays the timer
var timerText = project.addText({x: 0, y: project.maxY - 20, size: 20, color: "white"});
project.every("1", "second", () => {
  // stop everything when the timer reaches 0
  if (timer === 0){ project.stopAll(); }
  // make the timer go down every second
  timer--;
  // change the text to refer to the timer's new value every second
  timerText.text = "Timer: " + timer;
});
Clone this wiki locally