computyng.net

Please see our new and updated version of the Pong Game in HTML & JavaScript . It uses newer technologies like HTML Canvas which are made for animations and games. Having the knowledge of moving images using JavaScript, we’ll be creating a small Ping Pong game as an example for this post. Today we’ll learn to do a few new things in JavaScript: 1. Executing some code every specified time interval (for game loop). 2. Tracking and using mouse movements. 3. Attaching code (function) to events. Game Theory As you should be knowing, in this game there is one ball and two paddles at two ends. One is user-controlled the other, for this example, is CPU controlled. User has to move the paddle in order not to let the ball pass through, CPU also has to do the same thing. Whoever’s side the ball passes through looses the game. There are a few objects which can interact with each other, these are ball, paddles, walls. Let’s see the various interactions that can take place bet...

In this post we’re going to learn how we can move an image around using JavaScript. We’ll have four control links (Left, Right, Up, Down) that’ll move the image. Reading along you’ll learn: What the absolute and relative positions do How some JavaScript function can be invoked automatically on page load How JavaScript can be used to manipulate the “style” properties of elements How JavaScript can be used to change these properties Okay, now let’s start! THEORY We’re going to have the following elements in the page: A container ( div ) An image Control links Container The container would be styled to have a size of 500px by 300px. It’d have position: relative which makes anything inside to be positioned with respect to this container. It’s done to make the image move independent of the placement of the container. We’ll also make the overflows from the container to be “ hidden ”. Image The image would be given position: absolute which means ...