js functions and 2d animations

Author: shama

learning-js-functions/README.md

@@ -0,0 +1,10 @@
+# Learning JavaScript Functions
+
+> [https://www.youtube.com/watch?v=jEx9V4uUcg0](https://www.youtube.com/watch?v=jEx9V4uUcg0)
+
+Install [io.js](https://iojs.org/en/index.html).
+
+Within this folder run the terminal command `npm install` to install the
+`devDependencies`.
+
+Then run `npm start` to start up a development server on `http://localhost:9966`

learning-js-functions/index.js

@@ -0,0 +1,21 @@
+
+
+var context = {
+  type: 'grizzly',
+  says: 'grr'
+}
+
+bear = bear.bind(context)
+
+//var says = bear.apply(context, ['grr', 'grizzly'])
+var says = bear()
+console.log(says)
+
+// var bear = function() {
+//   return 'The ' + arguments[0] + ' bear says: ' + arguments[1]
+// }
+
+function bear() {
+  console.log(this)
+  return 'The ' + this.type + ' bear says: ' + this.says
+}

learning-js-functions/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "learning-js-functions",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "budo index.js --live-plugin"
+  },
+  "author": "Kyle Robinson Young <[email protected]> (http://dontkry.com)",
+  "license": "MIT",
+  "devDependencies": {
+    "budo": "^2.1.2",
+    "watchify": "^3.1.0"
+  }
+}

two-d-animations-with-canvas-javascript/README.md

@@ -0,0 +1,10 @@
+# 2D Animations with Canvas and JavaScript
+
+> [https://www.youtube.com/watch?v=TpRYLEFu4Mc](https://www.youtube.com/watch?v=TpRYLEFu4Mc)
+
+Install [io.js](https://iojs.org/en/index.html).
+
+Within this folder run the terminal command `npm install` to install the
+`devDependencies`.
+
+Then run `npm start` to start up a development server on `http://localhost:9966`

two-d-animations-with-canvas-javascript/index.js

@@ -0,0 +1,40 @@
+var canvas = document.createElement('canvas')
+document.body.appendChild(canvas)
+
+canvas.width = window.screen.width
+canvas.height = window.screen.height
+
+var context = canvas.getContext('2d')
+
+//context.fillStyle = 'red'
+//context.fillRect(0, 0, 100, 100)
+
+// context.fillStyle = 'green'
+// context.fillRect(200, 0, 100, 100)
+
+var x = 0
+var y = 0
+window.requestAnimationFrame(function loop() {
+  //x += 1
+  //y += .5
+
+  context.clearRect(0, 0, canvas.width, canvas.height)
+
+  context.fillStyle = 'red'
+  context.fillRect(x, 0, 100, 100)
+
+  context.fillStyle = 'green'
+  context.fillRect(200, y, 100, 100)
+
+  window.requestAnimationFrame(loop)
+})
+
+
+document.addEventListener('mousedown', function(event) {
+  if (event.button === 0) {
+    x += 10
+  }
+  if (event.button === 2) {
+    y += 10
+  }
+})

two-d-animations-with-canvas-javascript/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "my-project",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "budo index.js --live"
+  },
+  "author": "Kyle Robinson Young <[email protected]> (http://dontkry.com)",
+  "license": "MIT",
+  "devDependencies": {
+    "budo": "^3.0.4",
+    "watchify": "^3.1.0"
+  },
+  "dependencies": {
+  }
+}