Jump to content

Recommended Posts

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>

:happy0046::fool: any help would be greatly appreciated.

Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...