рулетка

ghang · 10 Мар 2015

завалялся скрипт на компе, работает без флеш на пирогах, подключить на нужную страницу через фрейм, при этом сначала во фрейме должна быть "левая" страница с ссылкой на скрипт, по типо: хочешь играть? жми тут...
технически скрипт полностью готов, дизайн и код общения с базой кому надо допилять под себя, так можно реализовать разные вещи "колесо фортуны" (с) pw
демо

PHP:

<?php
session_start();
$sha=rand(1,900);
if(0<$sha AND $sha<101){$over=1;}
elseif(100<$sha AND $sha<201){$over=2;}
elseif(200<$sha AND $sha<301){$over=3;}
elseif(300<$sha AND $sha<401){$over=4;}
elseif(400<$sha AND $sha<501){$over=5;}
elseif(500<$sha AND $sha<601){$over=6;}
elseif(600<$sha AND $sha<701){$over=7;}
elseif(700<$sha AND $sha<801){$over=8;}
elseif(800<$sha AND $sha<901){$over=9;};
echo $over;
if(!isset($_SESSION['sew'])){$_SESSION['sew']=$over; $ap=1;}else{$ap=$_SESSION['sew']; $_SESSION['sew']=$over; };
?>
<html>
<head>
 
<style>
html, body {
margin: 0;
padding: 0;
min-width:1000px;
background-color: rgb(217,194,161);
font-family:"Verdana", Monospace;
}
.ruletka{
border-radius:200px;
position:relative;
background: url(../rul.png) no-repeat center ;
margin:0 auto;
width:400px;
height:400px;
border:none;
-moz-transform: rotate(-0deg);
			-webkit-transform: rotate(-0deg);
			-o-transform: rotate(-0deg);
			-ms-transform: rotate(-0deg);
			transform: rotate(-0deg);
}
.ruletka2{
border-radius:200px;
background: url(rul.png) no-repeat center ;
margin:0 auto;
width:400px;
height:400px;
border:none;
-moz-transform: rotate(-0deg);
			-webkit-transform: rotate(-0deg);
			-o-transform: rotate(-0deg);
			-ms-transform: rotate(-0deg);
			transform: rotate(-0deg);
-webkit-transition-duration:  10s, 1s;
-o-transition-duration: 10s, 1s;
-moz-transition-duration: 10s, 1s;
transition-duration: 10s, 1s;
}
.sector{
position:absolute;
display:inline-block;
width:20px;
left:180px;
height:180px;
text-align:center;
transform-origin: bottom center;
padding:10px;
background: url(sec.png) no-repeat center top;
}
.en{
position:absolute;
}
</style>
<script type="text/javascript">
var over=<?=$ap?>*40-40;
window.onload = function(){
var eText = document.getElementById('text');
  eText.style.MozTransform = 'rotate(-'+over+'deg)';
  eText.style.WebkitTransform = 'rotate(-'+over+'deg)';
  eText.style.OTransform = 'rotate(-'+over+'deg)';
  eText.style.MsTransform = 'rotate(-'+over+'deg)';
  eText.style.transform = 'rotate(-'+over+'deg)';
over=<?=$over?>*40-40-over+360;
var eText = document.getElementById('text2');
  eText.style.MozTransform = 'rotate(-'+over+'deg)';
  eText.style.WebkitTransform = 'rotate(-'+over+'deg)';
  eText.style.OTransform = 'rotate(-'+over+'deg)';
  eText.style.MsTransform = 'rotate(-'+over+'deg)';
  eText.style.transform = 'rotate(-'+over+'deg)';
  }
</script>
</head>
<body>
<a href="" class="en">ещё разок</a>
<div class="ruletka" id="text">
<div class="ruletka2" id="text2">
<div class="sector" style="transform: rotate(0deg);">1</div>
<div class="sector" style="transform: rotate(40deg);">2</div>
<div class="sector" style="transform: rotate(80deg);">3</div>
<div class="sector" style="transform: rotate(120deg);">4</div>
<div class="sector" style="transform: rotate(160deg);">5</div>
<div class="sector" style="transform: rotate(200deg);">6</div>
<div class="sector" style="transform: rotate(240deg);">7</div>
<div class="sector" style="transform: rotate(280deg);">8</div>
<div class="sector" style="transform: rotate(320deg);">9</div>
</div>
</div>
</body>
</html>

как сделать больше значений думаю разберетесь, шанс для каждого можно отрегулировать (думаю это понятно как

), итог в переменной $over, при нажатие на ещё разок колесо продолжает с того места на котором остановилось

(результат отображаться будет верным). на древних браузерах отображаться будет, наверно, косо

Поиск

Поиск

рулетка

ghang

Любопытный

Дополнительно

Пользователи онлайн

Последние ресурсы

Статистика форума