Permalink
Browse files

customize for game stub

  • Loading branch information...
1 parent 714abee commit eb3d3a3c9a0f86bbc7d6b520f35cb4727f34a765 @jlongster jlongster committed Nov 21, 2012

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -18,90 +18,6 @@ catch(e) {
}
module.exports = {
- // Installs twitter bootstrap
- install_twbootstrap: {
- run: function (d, v, namedArgs, nowrap) {
- var tempName = 'tempbootstrap',
- jsNameRegExp = /bootstrap-(\w*)\.js$/;
-
- function finished_message() {
- console.log('\nTwitter Bootstrap installed.\n' +
- 'Add this css in your <head>:\n' +
- '<link rel="stylesheet"' +
- ' href="css/bootstrap.css">\n\n' +
- 'If you want the responsive styles, ' +
- 'add this also:\n' +
- '<link rel="stylesheet"' +
- ' href="css/bootstrap-responsive.css">\n');
-
- if(nowrap) {
- console.log('You also need to include any ' +
- 'js for components you use, like so:\n' +
- '<script src="js/lib/bootstrap/button.js">' +
- '</script>');
- }
- else {
- // Double-quoting the require command is
- // necessary so that require.js doesn't strip
- // it out
- console.log('You also need to install any ' +
- 'js components by just requiring ' +
- 'them, like so:\n' +
- "require(\"bootstrap/button\");");
- }
- }
-
- v.command('create', tempName, 'twitter/bootstrap')
- .then(function () {
- //Move the JS to the right location.
- var jsFiles = v.getFilteredFileList(tempName + '/js', /\.js$/, /js\/tests\//),
- promises = [];
-
- jsFiles.forEach(function (file) {
- //Pull off the name part from bootstrap-name.js pattern.
- var match = jsNameRegExp.exec(file),
- name, destName, damd;
-
- if (!match) {
- return;
- }
-
- name = jsNameRegExp.exec(file)[1];
- destName = 'www/js/lib/bootstrap/' + name + '.js';
- damd = q.defer();
-
- v.copyFile(file, destName);
-
- if(nowrap != 'nowrap') {
- //Convert the file to AMD style
- amdify.run.apply(amdify, [damd, v, {
- depends: 'jquery'
- }, destName]);
- }
-
- promises.push(damd);
- });
-
- //Wait for all the amdify calls to finish.
- return q.all(promises);
- })
- .then(function () {
- //Copy the images over.
- v.copyDir(tempName + '/img', 'www/img');
-
- //Copy the less files.
- v.copyDir(tempName + '/less', 'tools/less');
-
- //Compile the CSS.
- return v.command('bootstrap_less').then(function () {
- v.rm(tempName);
- finished_message();
- });
- })
- .then(d.resolve, d.reject);
- }
- },
-
//Builds the JS and CSS into one file each. If you want to do
//dynamic loading of scripts, pass -dynamic to the build, and
//require.js will be used to load scripts.
View
@@ -7,3 +7,12 @@
/* Your styles here */
+html, body {
+ margin: 0;
+ padding: 0;
+}
+
+canvas {
+ display: block;
+ margin: 0 auto;
+}
View
@@ -12,19 +12,16 @@
<link rel="stylesheet" href="css/app.css">
</head>
<body>
- <!-- Use this installation button to install locally without going
+ <!-- Uncomment this button to install locally without going
through the marketpace (see app.js) -->
- <button id="install-btn">Install</button>
+ <!-- <button id="install-btn">Install</button> -->
<!-- Write your application here -->
-
-
-
<!-- Using require.js, a module system for javascript, include the
js files. This loads "main.js", which in turn can load other
files, all handled by require.js:
View
@@ -2,6 +2,19 @@
// This uses require.js to structure javascript:
// http://requirejs.org/docs/api.html#define
+// A cross-browser requestAnimationFrame
+// See https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/
+var requestAnimFrame = (function(){
+ return window.requestAnimationFrame ||
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function(callback){
+ window.setTimeout(callback, 1000 / 60);
+ };
+})();
+
define(function(require) {
// Zepto provides nice js and DOM methods (very similar to jQuery,
// and a lot smaller):
@@ -17,14 +30,77 @@ define(function(require) {
// index.html
require('./install-button');
- // Write your app here.
+ // Simple input library for our game
+ var input = require('./input');
+
+ // Create the canvas
+ var canvas = document.createElement("canvas");
+ var ctx = canvas.getContext("2d");
+ canvas.width = 512;
+ canvas.height = 480;
+ document.body.appendChild(canvas);
+
+ var player = {
+ x: 0,
+ y: 0,
+ sizeX: 50,
+ sizeY: 50
+ };
+
+ // Reset game to original state
+ function reset() {
+ player.x = 0;
+ player.y = 0;
+ };
+
+ // Update game objects
+ function update(dt) {
+ // Speed in pixels per second
+ var playerSpeed = 100;
+
+ if(input.isDown('DOWN')) {
+ // dt is the number of seconds passed, so multiplying by
+ // the speed gives u the number of pixels to move
+ player.y += playerSpeed * dt;
+ }
+
+ if(input.isDown('UP')) {
+ player.y -= playerSpeed * dt;
+ }
+ if(input.isDown('LEFT')) {
+ player.x -= playerSpeed * dt;
+ }
+ if(input.isDown('RIGHT')) {
+ player.x += playerSpeed * dt;
+ }
+ };
+ // Draw everything
+ function render() {
+ ctx.fillStyle = 'black';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = 'green';
+ ctx.fillRect(player.x, player.y, player.sizeX, player.sizeY);
+ };
+ // The main game loop
+ var main = function () {
+ var now = Date.now();
+ var dt = (now - then) / 1000.0;
+ update(dt);
+ render();
+ then = now;
+ requestAnimFrame(main);
+ };
+ // Let's play this game!
+ reset();
+ var then = Date.now();
+ main();
});

0 comments on commit eb3d3a3

Please sign in to comment.