Implementing a game for the web using PHP/Javascript?

I need开发者_C百科 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..

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>