Crafty Help!

C++, C#, Java, PHP, ect...
Post Reply
User avatar
srachit
Posts: 291
Joined: Sat Jan 05, 2013 6:10 pm

Crafty Help!

Post by srachit »

Could someone try to run this craftyjs game and let me know if it worked?
It is at the bottom of the page
http://craftyjs.com/tutorial/getting-st ... afty-works

From what I have understood of Craftyjs till now, it should work perfectly fine, but I tried programming it myself it didnt work, so I just copy pasted that code it still didnt work.

Also can anyone point out to those videos in halls series that deal only with nodejs and socket.io? I dont wanna sit through impactjs stuff and confuse myself :P
User avatar
Jackolantern
Posts: 10891
Joined: Wed Jul 01, 2009 11:00 pm

Re: Crafty Help!

Post by Jackolantern »

Are you talking about the Pong clone? It works just fine for me. What browser are you using? Do you have a JS console to pull up and see if you are getting an error? If you just copy and pasted the code and it still didn't work, there must be something missing from your setup, such as a script dependency or something similar. If you are using Chrome, click the 3 horizontal lines right under the closing "X" button in the upper-right corner to bring up the options menu (should still be around that location on Mac or Linux). Then mouse-over "Tools", and click "Javascript Console". It will bring up your best friend for Javascript development: the Chrome JS Console! It can tell you the error messages the V8 JS engine is spitting back out to help you fix the problem, and you can even debug the code by stepping through it line-by-line. If you use Firefox, you can get similar functionality from the Firebug plugin. I think it also has some specialized tools as well. If you are using another browser, well...you shouldn't be. Go download Chrome :cool:
The indelible lord of tl;dr
User avatar
srachit
Posts: 291
Joined: Sat Jan 05, 2013 6:10 pm

Re: Crafty Help!

Post by srachit »

Heyy, so I got it to work, but I have a few questions about the way I got it to work.

So what I did was I changed
<script type="text/javascript" src="http://craftyjs.com/release/0.3/crafty.js"></script>
To
<script type="text/javascript" src="http://cdn.craftycomponents.com/crafty- ... "></script>
Now my question is which one of these is the latest and should be used for making games?

Secondly,
I tried making it so that it works with windows.onload, so that I could call my script anywhere, but that doesnt seem to work, anyone notice any differences?

Working:

Code: Select all

Crafty.init(600, 300);
Crafty.background('rgb(127,127,127)');

//Paddles
Crafty.e("Paddle, 2D, DOM, Color, Multiway")
	.color('rgb(255,0,0)')
	.attr({ x: 20, y: 100, w: 10, h: 100 })
	.multiway(4, { W: -90, S: 90 });
Crafty.e("Paddle, 2D, DOM, Color, Multiway")
	.color('rgb(0,255,0)')
	.attr({ x: 580, y: 100, w: 10, h: 100 })
	.multiway(4, { UP_ARROW: -90, DOWN_ARROW: 90 });

//Ball
Crafty.e("2D, DOM, Color, Collision")
	.color('rgb(0,0,255)')
	.attr({ x: 300, y: 150, w: 10, h: 10, 
			dX: Crafty.math.randomInt(2, 5), 
			dY: Crafty.math.randomInt(2, 5) })
	.bind('EnterFrame', function () {
		//hit floor or roof
		if (this.y <= 0 || this.y >= 290)
			this.dY *= -1;

		if (this.x > 600) {
			this.x = 300;
			Crafty("LeftPoints").each(function () { 
				this.text(++this.points + " Points"); });
		}
		if (this.x < 10) {
			this.x = 300;
			Crafty("RightPoints").each(function () { 
				this.text(++this.points + " Points");});
		}

		this.x += this.dX;
		this.y += this.dY;
	})
	.onHit('Paddle', function () {
	this.dX *= -1;
});

//Score boards
Crafty.e("LeftPoints, DOM, 2D, Text")
	.attr({ x: 20, y: 20, w: 100, h: 20, points: 0 })
	.text("0 Points");
Crafty.e("RightPoints, DOM, 2D, Text")
	.attr({ x: 515, y: 20, w: 100, h: 20, points: 0 })
	.text("0 Points");

Not working:

Code: Select all

windows.onload = function(){
Crafty.init(50, 600, 300);
Crafty.background('rgb(127,127,127)');

//paddles
Crafty.e("Paddle, 2D, DOM, Color, Multiway")
		.color("rbg(0, 255,0)")
		.attr({ x: 20, y: 100, w: 10, h: 100 })
		.multiway(4,{W: -90, S: 90});

Crafty.e("Paddle, 2D, DOM, Color, Multiway")
		.color("rbg(255,0,0)")
		.attr({x: 588, y:100, w:10, h:100})
		.multiway(4,{UP_Arrow: -90, Down_Arrow: 90});
		
//ball
Crafty.e("Ball, 2D, DOM, Color, Collision")
		.color("rgb(0,0,255)")
		.attr({x: 300, y: 150, w:10, h:10,
						dx: Crafty.math.randomInt(2, 5),
						dy: Crafty.math.randomInt(2,5)})
		.bind("enterframe", function(){
			//hit floor or roof
			if(this.y <= 0 || this.y >= 290)
				this.dy *= -1;
			
			if(this.x > 600){
				this.x = 300;
				Crafty("LeftPoints").each(function(){
					this.text(++this.points + "Points");});
			}
			if(this.x < 10){
				this.x = 300;
				Crafty("RightPoints").each(function(){
					this.text(++this.points + "Points");});
				}
			this.x += this.dX;
			this.y += this.dY;
			})
		.onHit("Paddle", function(){
			this.dx *= -1;
		});
		
		Crafty.e("LeftPoints, DOM, 2D, Text")
				.attr({ x: 20, y: 20, w: 100, h: 20, points: 0 })
				.text("0 Points");
		Crafty.e("RightPoints, DOM, 2D, Text")
				.attr({ x: 515, y: 20, w: 100, h: 20, points: 0 })
				.text("0 Points");
};
User avatar
Jackolantern
Posts: 10891
Joined: Wed Jul 01, 2009 11:00 pm

Re: Crafty Help!

Post by Jackolantern »

I would assume their CDN would have the latest release, since CDNs mean "Content Delivery Network" and only exist for people to link from them. As for the other issue, I am not sure, as I have not used Crafty (I have only looked through the demos and tutorials a couple of times to compare it to Impact).
The indelible lord of tl;dr
Post Reply

Return to “Coding”