Rotating an image with javascript

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|387\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Web Development -> Rotating an image with javascript
Sun, 18 Apr 2010, 20:51
mindstorm8191	Hey everyone. I'm looking for a way to make an image rotate, to spin around on its own axis. I've tried some google searching, but haven't found anything good (one example had images swaping out every couple seconds, ugh). I'm hoping that I could possibly make an action game in html / javascript. ...or, maybe you all could help me with the root of the problem. I have this game I call Garbage Invaders. Its essentially a top-down spaceship shooter, but you can salvage parts off the enemy ships you destroy. The game has taken alot of hints off Diablo II, which I have enjoyed playing for a while now. I'm hoping to make the attachable parts totally customizable, letting you control dozens of performance characteristics of the part, and even modifying your ship as a whole. This game is inspiring me to keep working on it, but the problem is that the game is too large and complex of an undertaking for me to ever finish. I want to make it open-source, and even allow people to create new parts for the game. I don't think I could do that effectively from Blitz3D (particularly because its not a free language), and other options aren't sounding good (my gamedev experience with C/C++ is pretty weak, and I hate the header file setup anyway; I wouldn't know what else to use that supports 3D). If anyone has any ideas on that route, let me know. -=-=- Vesuvius web game
Sun, 18 Apr 2010, 21:07
mindstorm8191	Yeah, it would be quite difficult building a scripting language for the game. Not something I would want to need to deal with... -=-=- Vesuvius web game
Sun, 18 Apr 2010, 21:09
JL235	Tikihead This would be overkill, but you could try making yourself an extensive scripting language for your game. Depends on what sort of language he needs. A CSS style language where you just setting custom properties (damage, defense, the image to use, build time, cost, etc) might be all he needs. You could also look into integrating existing scripting languages (like LUA) into BB through a dll written in C++. Not an easy thing to do, but looks like the easiest option to me if you want to stick with BB. Another idea would be to port it to another language that supports a good 3D library and scripting. It might sound like a big task, but typically this takes far less time then it took to write the code in the first place. How many lines of code is the game? A personal example would be C# with XNA; using one of the many scripting solutions for .NET applications (although there are plenty of other languages you could pick from). Scripting an app is not that uncommon in the real (non BB) world.
Sun, 18 Apr 2010, 21:17
Stealth	Check out jQuery. It's a powerful javascript library that includes tons of extentions (like an image rotator). Ever since I begun using this for my javascript needs, its sped up development time tremendously. It makes doing complex things really simple. For a quick taste, check out the different effects on the left column of this page. -=-=- Quit posting and try Google.
Mon, 19 Apr 2010, 00:09
Jayenkai	Rotating an image with javascript <html> <head> <script language="javascript"> var rotate=0; var trigger; function SpinSocoder() { rotate=rotate+1; document.getElementById('MainSprite').style.WebkitTransform='rotate('+rotate+'deg)'; document.getElementById('MainSprite').style.MozTransform='rotate('+rotate+'deg)'; document.getElementById('MainSprite').style.rotation=rotate+'deg)'; trigger=window.setTimeout('SpinSocoder();',25); } </script> </head> <body onload="SpinSocoder();"> <img src="https://socoder.net/uploads/1/socoderlogo_BBFlat_640.png" id="MainSprite" style="position:absolute; left:200px; top:200px;"> </body> </html> --v Do you guys purposely try to come up with complicated answers? -=-=- ''Load, Next List!''
Mon, 19 Apr 2010, 04:42
CodersRule	Check out jQuery. It's a powerful javascript library that includes tons of extentions (like an image rotator). Ever since I begun using this for my javascript needs, its sped up development time tremendously. It makes doing complex things really simple. ^This. But be warned: Ever since I started using jQuery, I forgot how to use normal JavaScript. Whoops! ^^
Tue, 20 Apr 2010, 19:53
mindstorm8191	Jay, sorry but your rotation example didn't work. I'm running IE 8, which might have something to do with it. I have another question: would it be reasonable to have an open-source project in Blitz3D? -=-=- Vesuvius web game