I just use Phaser and saw some example code like below. In the Rox.Boot.prototype function, the .load, .physics, etc, are all in game(Phaser.Game). How does this inheritance happen?
Rox = {
score: 0,
music: null,
orientated: false
};
Rox.Boot = function (game) {
};
Rox.Boot.prototype = {
preload: function () {
this.load.image('preloaderBar', 'images/preload.png');
},
create: function () {
this.physics.startSystem(Phaser.Physics.ARCADE);
this.input.maxPointers = 1;
this.state.start('Preloader');
},
};
To use Phaser, you have to have a phaser.min.js or phaser.js file which you can get here. I use the phaser.min.js file instead of the phaser.js file because I don't need the extra features that the phaser.js file has (debugging); phaser.min.js will have all the same methods, classes, properties, etc as phaser.js.
They tell you to download the whole GitHub repo, but really you just need the Phaser JS file.
After you add the phaser.min.js file to your project, make sure it's the first script you call in the head of your HTML file; you should be able to use Phaser in the following JS files after that.
Here is what my index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FILL_IN_GAME_NAME_HERE</title>
<script src="phaser.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Main.css">
<script src="Boot.js" type="text/javascript"></script>
<script src="Preloader.js" type="text/javascript"></script>
<script src="Menu.js" type="text/javascript"></script>
<script src="Game.js" type="text/javascript"></script>
<script src="GameOver.js" type="text/javascript"></script>
<script src="HighScores.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game', false, false);
game.state.add('Boot', Game.Boot);
game.state.add('Preloader', Game.Preloader);
game.state.add('Menu', Game.Menu);
game.state.add('Game', Game.Game);
game.state.add('GameOver', Game.GameOver);
game.state.add('HighScores', Game.HighScores);
game.state.start('Boot');
</script>
</body>
</html>
Related
I've been following the "let's make a map" tutorial https://bost.ocks.org/mike/map/, however in the middle of the tutorial, drawing the paths failed with errors about topojson.feature() is not a function.
script.js:14 Uncaught TypeError: topojson.feature is not a function(…)
(anonymous function) # script.js:14
(anonymous function) # d3.min.js:6
call # d3.min.js:6
e # d3.min.js:6
script.js:
var width = 960,
height = 1160;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("js/uk.json", function(error, uk) {
if (error) return console.error(error);
console.log(uk);
svg.append("path")
.datum(topojson.feature(uk, uk.objects.subunits))
.attr("d", d3.geo.path().projection(d3.geo.mercator()));
});
HTML included scripts:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Map test</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src='js/jquery.js'></script>
<script src='js/d3.min.js' charset="utf-8"></script>
<script src='js/topojson.js'></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>
Originally I've suspected the issue to be with the topojson file I've converted Pathfile-GeoJSON-TopoJSON, I've names it uk.js for testing purposes while following the tutorial.
Another hint as mentioned in the reply here:
https://github.com/topojson/topojson/issues/236
However after changing the issue remained the same, and confirmed after substituting uk.json I've creted myself with:
https://bost.ocks.org/mike/map/uk.json
You are missing the topojson client files, which have been split off from the base topojson code in v2. If you include the following script in your code, it should work:
<script src="https://unpkg.com/topojson-client#2"></script>
I'm having some trouble figuring our why express is attaching every javascript file in my bower modules instead of just the ones I specify in the assets.json file. I get the feeling it's a daft mistake somewhere, I just don't understand where!
My assets file looks like so:
{
"css": {
"public/build/css/dist.min.css": [
"public/lib/angular-snap/angular-snap.min.css",
"public/lib/animate.css/animate.min.css",
"public/lib/bootstrap/dist/css/bootstrap.min.css",
"public/lib/font-awesome/css/font-awesome.min.css",
"public/lib/angular-toggle-switch/angular-toggle-switch.css",
"public/lib/intro.js/minified/introjs.min.css",
"public/lib/ng-table/ng-table.css",
"public/lib/leaflet-dist/leaflet.css",
"public/lib/leaflet.markerclusterer/dist/MarkerCluster.css",
"public/lib/leaflet.markerclusterer/dist/MarkerCluster.Default.css",
"public/css/common.css"
]
},
"js": {
"public/build/js/dist.min.js": [
"public/lib/angular/angular.min.js",
"public/lib/angular-bootstrap/ui-bootstrap.js",
"public/lib/angular-bootstrap/ui-bootstrap-tpls.js",
"public/lib/angular-cookies/angular-cookies.js",
"public/lib/angular-leaflet-directive/dist/angular-leaflet-directive.js",
"public/lib/angular-resource/angular-resource.js",
"public/lib/angular-route/angular-route.js",
"public/lib/angular-sanitize/angular-sanitize.js",
"public/lib/angular-snap/angular-snap.min.js",
"public/lib/angular-toggle-switch/angular-toggle-switch.js",
"public/lib/angular-ui-utils/ui-utils.min.js",
"public/lib/d3/d3.min.js",
"public/lib/highcharts-ng/dist/highcharts-ng.min.js",
"public/lib/intro.js/minified/intro.min.js",
"public/lib/leaflet-dist/leaflet.js",
"public/lib/leaflet-plugins/layer/tile/Google.js",
"public/lib/leaflet.markerclusterer/dist/leaflet.markercluster.js",
"public/lib/modernizr/modernizr.js",
"public/lib/momentjs/min/moment.min.js",
"public/lib/ng-table/ng-table.js",
"public/lib/snapjs/snap.min.js",
"public/lib/typeahead.js/dist/typeahead.bundle.min.js",
"public/lib/underscore/underscore-min.js",
"public/lib/underscore.string/dist/underscore.string.min.js",
"public/*/*.js",
"public/*/*/*.js"
]
}
}
I create an assets variable in express.js here:
// Import your asset file
var assets = require('./assets.json');
assetmanager.init({
js: assets.js,
css: assets.css,
debug: (process.env.NODE_ENV !== 'production'),
webroot: 'public'
});
And finally add these to my view using an each loop in my jade template
- each file in assets.js
script(type='text/javascript' src=file)
What I'm expecting to happen is that all the scripts I've listed in assets.json be added to my template. Instead it seems to include all .js files under public/lib - which as you can imagine causes some unusual results.
A sample of which is here
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="/lib/animate.css/Gruntfile.js"></script>
<script type="text/javascript" src="/lib/d3/d3.js"></script>
<script type="text/javascript" src="/lib/d3/d3.min.js"></script>
<script type="text/javascript" src="/lib/highcharts-ng/Gruntfile.js"></script>
<script type="text/javascript" src="/lib/highcharts-ng/karma.conf.js"></script>
<script type="text/javascript" src="/lib/intro.js/intro.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery-migrate.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery.min.js"></script>
Turns out it was a daft mistake. The last two rules in my assets file included the lib folder because of the asterisks.
I have a simple ExtJS4 MVC test application started with:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/Test/extjs-4.1.0/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="/Test/extjs-4.1.0/resources/css/CheckHeader.css">
<script type="text/javascript" src="/Test/extjs-4.1.0/ext-all-dev.js"></script>
<script type="text/javascript" src="/Test/ajax/api-debug.js?apiNs=MyNamespac"></script>
<script type="text/javascript" src="/Test/app.js"></script>
</head>
<body><div id="viewport"></div></body>
</html>
And here is the actual app.js code (i've copied the CheckColumn.js file to extjs-4.1.0\src):
Ext.Loader.setConfig({ enabled: true });
Ext.require([ 'Ext.ux.CheckColumn' ]);
Ext.direct.Manager.addProvider(MyNamespace.REMOTING_API);
Ext.application({
name : 'Auctions',
controllers : [ 'TestDates' ],
appFolder : '/Test/app',
launch : function() {
Ext.create('Ext.Panel', {
layout : 'fit',
items : [ {
xtype : 'testdates'
} ],
renderTo : 'viewport',
});
}
});
I had to include the Loader, otherwise the app complained it cannot load the controller. I also had to require the CheckColumn, otherwise the checkcolumn xtype was not recognized.
I am not getting the following error:
The following classes are not declared even if their files have been
loaded: 'Ext.ux.CheckColumn'. Please check the source code of their
corresponding files for possible typos: './ux/CheckColumn.js
You should create folder ux under extjs-4.1.0\src and copy CheckColumn.js file there. There is always a link in ExtJs between class name and location of the file. If you class name is Ext.ux.CheckColumn then path must be .\src\ux\CheckColumn.js
I am new to YUI. Just trying to get a most basic functioning example working on my site.
Here is the code:
<button id="mytest">test</button>
<script type="text/javascript">
var helloWorld = function(e) {
alert("Hello World!");
}
</script>
<script type="text/javascript">
alert('xx');
YAHOO.util.Event.addListener("mytest", "click", helloWorld);
alert('x2');
</script>
The xx alert shows, but the x2 alert never does. And, clicking on the button does not fire the HelloWorld function.
I have the necessary include files:
<!-- Required CSS -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/progressbar/assets/skins/sam/progressbar.css">
<!-- Dependency source file -->
<script src = "http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom.event.js" ></script>
<script src = "http://yui.yahooapis.com/2.8.1/build/element/element-min.js" ></script>
<!-- Optional dependency source file -->
<script src="http://yui.yahooapis.com/2.8.1/build/animation/animation-min.js" type="text/javascript"></script>
<!-- ProgressBar source file -->
<script src = "http://yui.yahooapis.com/2.8.1/build/progressbar/progressbar-min.js" ></script>
you should be sure the js files are included on you html files,the code your write is write!
Believe I found it. Or at least I was able to find other examples which worked. But in my case I believe the problem is the js files I was referencing in fact did not exist. Namely this file:
http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom.event.js
sure, it is yahoo dash dom DASH event, not yahoo dash dom DOT event
Does anyone know how to get the below to report a javascript error? (any browser)
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js">
</script>
<script type="text/javascript">
ObjWithEvent = {
testEvent: new YAHOO.util.CustomEvent("testEvent")
};
ObjSubscriber = {
handleTestEvent: function(){
alert('the next line will not show up in the error console');
not_a_valid_function_bro();
}
};
ObjWithEvent.testEvent.subscribe(ObjSubscriber.handleTestEvent);
ObjWithEvent.testEvent.fire();
</script>
</head>
<body>
</body>
Possibly one of the worst chosen default settings ever.....
YAHOO.util.Event.throwErrors is set to false by default, so if you want to see errors:
YAHOO.util.Event.throwErrors = true;