Dazla Posted February 10, 2015 Share Posted February 10, 2015 This would be quite a simple issue for someone more experienced: (I have just begun with Jquery and Javascript)I have coded a really simple HTML, CSS, Jquery animation.. The ball <div> moves from side to side (Pretty Damn COOL!) BUT... I need to try and trigger the animation with scrolling, basically creating a 'Pong' game. From one side of the scren to the other. HOW do I do this? I have been trying to find a sollution online and can't. Please help, or I will find you and kill you. <!DOCTYPE html><html> <head> <title> Pong </title> <style type="text/css"> .pong{ position: relative; border-radius:100%; top:250px; float:left; z-index: 1; width: 100px; height: 100px; transition-property: transform, -webkit-transform; transition-duration: 0.2s; transition-timing-function: ease-out; background-color:#FFF700; } #stage{ min-height:500px; min-width:500px; background-size:cover; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function () { move(); }); function move() { $(".pong").animate({ left: 900 }, { duration: 5000, complete: function () { $(".pong").animate({ left: 40 }, { duration: 5000, complete: function () { move(); } }); } }); } </script> <script type="text/javascript"> </script> </head> <body> <div class id="stage"> <div class="pong"> </div> </div> </body></html> any help would be greatly appreciated. Link to comment Share on other sites More sharing options...
justsomeguy Posted February 10, 2015 Share Posted February 10, 2015 What you have versus an actual working pong game is pretty far apart, you just have some static animations there. If you want to make the actual game then you'll need to figure out how big the board is first (people could change their browser size). You'll need some variables to keep track of the X speed and the Y speed, and then a loop to do the actual animation. I'm not sure how you would do it using jQuery, it's basic enough that you don't need jQuery for that. jQuery might actually complicate it. You'll need some collision detection to figure out when the ball hits any side of the board, which should negate either the X speed or the Y speed (or both, depending on how you want it to work). Link to comment Share on other sites More sharing options...
Ingolme Posted February 11, 2015 Share Posted February 11, 2015 jQuery's great for animations, but if you want to make a videogame I suggest forgetting about jQuery because for a videogame you need to do operations and comparisons on each animation frame. Videogame programming is not simple. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now