Implementing a game for the web using PHP/Javascript?

Question

I need some suggestions on how to start off with this one. My end goal is to make some visually striking wheel that can revolve a set of pictures and stop randomly at some picture and display some text in the center of the wheel. With the number of AJAX libraries out there, I am pretty sure someone must have done something similar. Does anyone have a reference to something that I can use to start off with this?

Preferred Platforms: PHP and Javascript

Any modifications that preserve the properties (image randomization, display of some associated text, visually striking) are welcome as well..

Answer 1

Basic you must not decide where to stop on client side. So u cant use random function in javascript. You have to generate a random variable at server side using PHP, then use animation in browser to show the rolling affect.

The Rolling Effect (Acceding order of complexity)

Solution 1: Use Gif

Create two pictures one for rotating gif another static. At first display the rotating gif then replace it with static gif Let the images be rot.gif and static.gif

<img src="rot.gif" id="replaceMe" />

Will show a rorating picture. Now use javascript to replace it

<script>
function replace() {
var replaceMe = document.getElementById('replaceMe');
replaceMe.src = "static.gif";
}

// Call the function after 20 Sec so that use will get time to see a rotating image
setTimeout('replace()');
</script>

Solution 2: Use CSS

.rot90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
rotation: 90deg;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

Look at above css class. It rotates the image by 90 degree. Now you can access a CSS style using Javascript. So u need a static wheel image, and javascript will do the rest. Well I am not sure about how to modify filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -moz-transform: rotate(90deg); and -webkit-transform: rotate(90deg); using javascript but rotation: 90deg; can be easily modified. YOu need to do some homework to find out modifying other values. Here is a solution with just rotation css selector.

You need an image <img src="wheel.gif" id="rotateMe" /> will do.

<script>
var rotateMe;
rotateMe = document.getElementById('rotateMe');

var currentAngle;
currentAngle = 0;

function incrementAngle() {
currentAngle = currentAngle + 1;
if (currentAngle == 360) {
currentAngle = 0;
}
}

function rotate() {
rotateMe.style.rotation = currentANgle + "deg";
incrementAngle();
}

var timerId;
timerId = setInterval("rotate()", 200); // Increase or decrease number to inc/dec speed

function stopTimer() {
clearInterval(timerId);
}

setTimeout(stopInterval(), 30000); // Stop rotating after 30 sec
</script>