Рулетка - JavaScript, Ajax

s88s · 13.08.2019, 15:51

Доброго времени суток!

Часть № 1

Возможно ли сделать так что бы прокручивались картинки которые в розыгрыше а не одна картинка

Вот код

Код:

<!DOCTYPE html>
<html>
	<head>
		<title>taper</title>

<style>
* {
    margin: 0;
    padding: 0;
    font-family:arial;
    outline:none;
    box-shadow:0 0 2px red inset;
}
body {
/*	background:url(img/backgr.jpg) no-repeat;
	background-size:cover;*/
	background:#232826;
	
}
button {
	cursor: pointer;
}
.tape-img {
  margin:0px;
  padding:0px;
	width:160px;
	height:150px;
	position:relative;
  }

.tape {
	position:relative;
	right:20px;
  height:150px;
  width:160px;
 /* margin:10px 0px;
*/}

li,ul {
	list-style:none;
	display:inline-block;
	content:"";
}
#main {
	width:640px;
	margin:100px auto 20px auto;
	overflow-x:hidden;
/*overflow-y:hidden;*/
	border:1px #00DF7E solid;
	box-shadow: 0 0 100px 1px rgba(0,220,100,0.3) ;
}
#mxwidth {		
	width:100%;
	margin:0 auto;
}
.tape:nth-child(3) {
	/*box-shadow:0px 0px 0 2px red ;*/
}
#win {
	position:absolute;
	border-left: 10px solid transparent; 
	border-right: 10px solid transparent;
	border-top: 10px solid #fefefe ;
	top:101px;
	left:49.5%;
}
#boxes {
	width:200%;
  height:150px;
}
.mainbutt {
		padding:15px 35px;
		color: #00DF7E ;
		background:rgba(0,0,0,0.5);
		font-weight:bold;
		letter-spacing:1px;
		border:none;
		border:1px #00DF7E solid;
		display:block;
		border-radius:30px;
		margin:0 auto;
		outline:none;
}
h1 {
	color:white;
}
.hdblock {
	float:left;
	color:#EDEDED;
	font-family:arial;
}
span {
	padding:5px 7px 3px 7px;
	border-radius:50%;
	color: #00DF7E ;
	font-size:10px;
	border:1px #00DF7E solid;
}
.opn {
	position:absolute;
	z-index:6;
	background: rgba(0,0,0,0.8);
	padding:10px;
	border:1px #dedede solid;
	display:none;
}
.opn img {
	
}
span:hover {
		background:#dedede;
}
.block {
	display:block;
}
.minprofile {
	 font-size:16px;
	color: #EDEDED;
	display:grid;
	grid-template-columns:25% 90%;
	position:relative;
	float:right;
}
.minprofile img {
	width:30px;
	border-radius:50%;
	margin-top:8px;
	border:1px #DEDEDE solid;
}
.minprofile p {
	font-weight:lighter;
}
.minprofile h4 { 
	 padding-bottom:8px;
	 text-transform:uppercase;
}
.minprofile div:before {
	content:"";
	display:block;
	width:130px;
	height:2px;
	background:radial-gradient(#00DF7E 2%,transparent 80%);
	position:relative;
	top:+24px;
}
.header {
	display:table;
	width:96%;
	margin:20px auto 0px auto;
}
.logo {
	width:400px;
	display:block;
	margin:0px auto 40px auto;
}
.state {
	color:blue;
	background:black;
	padding:20px 10px;
	position:absolute;
	bottom:0px;
	border-top:1px blue solid;
	
}
.blscreen {
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	position:absolute;
	top:0px;
	display:none;
}
.winblock {
	margin:125px auto;
	width:300px;
	height:400px;
	background:#1C201F;
	display:block;
}
.winblock h3 {
	color:#fbfbfb;
	text-align:center;
	padding-bottom:5px;
}
.winblock img {
	margin:0 auto;
	display:block;
	border:1px #00DF7E solid;
	box-shadow: 0 0 80px 1px rgba(0,220,100,0.4);
  height:150px;
  width:170px;
}
.winblock span {
	border:none;
}
.winbutt {
	color:#fbfbfb;
	margin:0 auto;
	display:block;
	padding:10px 55px;
	font-size:18px;
	background:linear-gradient(90deg, #4AFFBE, #00DF7E );
	border:none;
	border-bottom:3px #00BA84 solid;
}
.winblock h4 {
	text-align:center;
	text-transform:uppercase;
	color:#00DF7E;
	font-weight:lighter;
	padding:10px 0px 10px 0px;
}
.winblock p {
	color:#606663;
	font-size:14px;
	margin-left:40px;
}
.winblock span {
	padding:0;
	font-size:12px;
}
.close {
	background:none;
	color:#606663;
	font-size:35px;
	border:none;
	height:40px;
	position: relative;
	left: 90%;
}
.wininp {
	background:#1E1B1B;
	padding:15px 20px;
	border:1px #00DF7E solid;
	margin:10px auto;
	display:block;
	color:#fbfbfb;
}
</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function start()	{

	    var boxed = 3; // начинаем считать кейсы
		var righ = 0;   // делаем анимацию увеличивая позицию в право
		var speed = Math.floor(Math.random() * (20 - 25 + 1)) + 25;  // Скорость прокрутки рулетки
		var delbox = 164; //Ширина кейса для удаления его
		var tim = setInterval(animated,10); 
		 
		$("button").css("opacity","0.5");
		$(".mainbutt").removeAttr("onclick");

	 function animated() {
	    var imgs = Math.floor(Math.random() * (7 - 1 + 1)) + 1; //Случайная картинка
	    var child3 = $(".tape:nth-child(3) img"); // Подсвечиваем товар которdый по середине
	    var firS = $(".tape:first-child");
	    var cons = righ - delbox;	 //считаем на сколько блок зашел за границу
	
	 if (righ >= delbox) { 		//если блок за границей
	     firS.remove();			// удаляем его
	      $("#boxes").append("<li class='tape'><img src='https://pp.userapi.com/c851532/v851532508/152849/I6lkylgXSXM.jpg' alt="+imgs+" class='tape-img'></li>");//И добавляем новый
	      	righ = cons + speed; 
		  $(".tape").css("right",righ + "px");
	     boxed++; // Считаем кол-во блоков		
	} else {
		if(speed <= 2) {
			speed -= 0.003;
		} else if (speed <= 6) {
			speed -= 0.007;
		} else {
 	  	    speed -= 0.02;
 	}
 	   righ += speed;
 		$(".tape").css("right",righ + "px");
 	}
 	if (speed <= 0) {
 	  clearInterval(tim);
 	 	$(".tape").animate({right: "95px"},2400);
		$(".addimg img").attr("src"	,"img/20181001_"+child3.attr("alt")+".png");
	  setTimeout(swi,2500);
 	}
		$(".state").html("бокс: "+boxed+"<br>Позиция: "+ righ+"<br>Скорость: "+speed+"<br> Отступ: "+cons); 					
		}
	}
function swi() {
	 	var nnu = $(".tape:nth-child(3) img").attr("alt");
	
		 $(".mainbutt").attr("onclick","start()");
	 	 $(".blscreen").toggle(400);
	 	 $("button").css("opacity","1");	
	 	
	 		switch(nnu) {
			case "1":
				$(".winblock h4").text("VIP'ка");
				$(".winblock span").text("300р");
			break;
			 case "2":
				$(".winblock h4").text("ADM + VIP");
				$(".winblock span").text("600р");
			break;
			 case "3":
				$(".winblock h4").text("Повышение звания");
				$(".winblock span").text("100р");
			break;
			 case "4":
				$(".winblock h4").text("Префикс");
				$(".winblock span").text("50р");
			break;
			 case "5":
				$(".winblock h4").text("Ник под пароль");
				$(".winblock span").text("75р");
			break;
			 case "6":
				$(".winblock h4").text("Смотритель");
				$(".winblock span").text("800р");
			break;
			 case "7":
				$(".winblock h4").text("Админка");
				$(".winblock span").text("400р");
			break;
		}
}
//делаем список что выпадает
$(function () {
	    $("span").click(function () {
	 		$(".opn").toggle(300);
	});
	$(".close,.winbutt").click(function () {
		$(".blscreen").toggle(400);
	})
 });
</script>

	</head>

s88s · 13.08.2019, 15:53

Часть № 2

Код:

	<body>
		<div id="main"> 
        <div id="mxwidth">
            <ul id="boxes">
                <li class="tape"><img src="https://pp.userapi.com/c851532/v851532508/15281f/HID0UQTAJGM.jpg" alt="1" class="tape-img"></li>
                <li class="tape"><img src="https://pp.userapi.com/c851532/v851532508/152826/wjzAUrH-pdw.jpg" alt="2" class="tape-img"></li>
                <li class="tape"><img src="https://pp.userapi.com/c851532/v851532508/15282d/vovZIefw-pU.jpg" alt="3" class="tape-img"></li>
                <li class="tape"><img src="https://pp.userapi.com/c851532/v851532508/152834/UuRT1wYIYRA.jpg" alt="4" class="tape-img"></li>
                <li class="tape"><img src="https://pp.userapi.com/c851532/v851532508/15283b/aPRqEZjQyBs.jpg" alt="5" class="tape-img"></li>
                <li class="tape"><img src="https://pp.userapi.com/c851532/v851532508/152842/wx6nV0vdCSY.jpg" alt="6" class="tape-img"></li>
                <li class="tape"><img src="https://pp.userapi.com/c851532/v851532508/152849/I6lkylgXSXM.jpg" alt="7" class="tape-img"></li>
            </ul>
       </div>
       <div id="win">
       </div>
    </div>
    <button onclick="start()" class="mainbutt">Крутить</button>
	<div class="state"></div>	
	<div class="blscreen">
		<div class="winblock">
			<button class="close">×</button>
			<h3>Ваш выйгрыш</h3>
			<div class="addimg">
				<img alt="wins">
	  	</div>
	  	<h4>Повышение звания</h4>
	  	<p>Стоимость: <span>2000р</span></p>
	  	<input type="name" placeholder="Ваш ник" class="wininp">
	  	    <button onclick="start()" class="winbutt">Крутить еще</button>
		</div>
	</div>

	</body>
</html>

пример этого скрипта тут

s88s · 14.08.2019, 17:10

Помогите пожалуйста в этой рулетке не много доработать

При прокрутке рулетки изображения прокручиваются вверх я хотел бы что бы они прокручивались влево и по бокам еще добавить по одному окну но выигрыш был бы только в центре

Код:

<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <title>Roulette</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <style>
div.roulette {
  margin-top: 35px;
}

div.roulette-inner {
  left: 33px;
}

div.roulette {}

div.roulette_container {
  background-color: rgb(253, 252, 253);
  width: 200px;
  height: 200px;
  border: 1px solid rgba(253, 252, 253, 0.31);
  box-shadow: 0px 0px 3px lightpink;
  margin: auto;
}
    </style>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
(function($) {
	var Roulette = function(options) {
		var defaultSettings = {
			maxPlayCount : null, // x >= 0 or null
			speed : 10, // x > 0
			stopImageNumber : null, // x >= 0 or null or -1
			rollCount : 3, // x >= 0
			duration : 3, //(x second)
			stopCallback : function() {
			},
			startCallback : function() {
			},
			slowDownCallback : function() {
			}
		}
		var defaultProperty = {
			playCount : 0,
			$rouletteTarget : null,
			imageCount : null,
			$images : null,
			originalStopImageNumber : null,
			totalHeight : null,
			topPosition : 0,

			maxDistance : null,
			slowDownStartDistance : null,

			isRunUp : true,
			isSlowdown : false,
			isStop : false,

			distance : 0,
			runUpDistance : null,
			slowdownTimer : null,
			isIE : navigator.userAgent.toLowerCase().indexOf('msie') > -1 // TODO IE
		};
		var p = $.extend({}, defaultSettings, options, defaultProperty);

		var reset = function() {
			p.maxDistance = defaultProperty.maxDistance;
			p.slowDownStartDistance = defaultProperty.slowDownStartDistance;
			p.distance = defaultProperty.distance;
			p.isRunUp = defaultProperty.isRunUp;
			p.isSlowdown = defaultProperty.isSlowdown;
			p.isStop = defaultProperty.isStop;
			p.topPosition = defaultProperty.topPosition;

			clearTimeout(p.slowDownTimer);
		}

		var slowDownSetup = function() {
			if(p.isSlowdown){
				return;
			}
			p.slowDownCallback();
			p.isSlowdown = true;
			p.slowDownStartDistance = p.distance;
			p.maxDistance = p.distance + (2*p.totalHeight);
			p.maxDistance += p.imageHeight - p.topPosition % p.imageHeight;
			if (p.stopImageNumber != null) {
				p.maxDistance += (p.totalHeight - (p.maxDistance % p.totalHeight) + (p.stopImageNumber * p.imageHeight))
						% p.totalHeight;
			}
		}

		var roll = function() {
			var speed_ = p.speed;

			if (p.isRunUp) {
				if (p.distance <= p.runUpDistance) {
					var rate_ = ~~((p.distance / p.runUpDistance) * p.speed);
					speed_ = rate_ + 1;
				} else {
					p.isRunUp = false;
				}

			} else if (p.isSlowdown) {
				var rate_ = ~~(((p.maxDistance - p.distance) / (p.maxDistance - p.slowDownStartDistance)) * (p.speed));
				speed_ = rate_ + 1;
			}

			if (p.maxDistance && p.distance >= p.maxDistance) {
				p.isStop = true;
				reset();
				p.stopCallback(p.$rouletteTarget.find('img').eq(p.stopImageNumber));
alert(p.stopImageNumber);
				return;
			}
			p.distance += speed_;
			p.topPosition += speed_;
			if (p.topPosition >= p.totalHeight) {
				p.topPosition = p.topPosition - p.totalHeight;
			}
			// TODO IE
			if (p.isIE) {
				p.$rouletteTarget.css('top', '-' + p.topPosition + 'px');
			} else {
				// TODO more smooth roll
				p.$rouletteTarget.css('transform', 'translate(0px, -' + p.topPosition + 'px)');
			}
			setTimeout(roll, 1);
		}

		var init = function($roulette) {
			$roulette.css({ 'overflow' : 'hidden' });
			defaultProperty.originalStopImageNumber = p.stopImageNumber;
			if (!p.$images) {
				p.$images = $roulette.find('img').remove();
				p.imageCount = p.$images.length;
				p.$images.eq(0).bind('load',function(){
					p.imageHeight = $(this).height();
					$roulette.css({ 'height' : (p.imageHeight + 'px') });
					p.totalHeight = p.imageCount * p.imageHeight;
					p.runUpDistance = 2 * p.imageHeight;
				}).each(function(){
					if (this.complete || this.complete === undefined){
						var src = this.src;
						// set BLANK image
						this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
						this.src = src;
					}
				});
			}
			$roulette.find('div').remove();
			p.$images.css({
				'display' : 'block'
			});
			p.$rouletteTarget = $('<div>').css({
				'position' : 'relative',
				'top' : '0'
			}).attr('class',"roulette-inner");
			$roulette.append(p.$rouletteTarget);
			p.$rouletteTarget.append(p.$images);
			p.$rouletteTarget.append(p.$images.eq(0).clone());
			$roulette.show();
		}

		var start = function() {
			p.playCount++;
			if (p.maxPlayCount && p.playCount > p.maxPlayCount) {
				return;
			}
			p.stopImageNumber = $.isNumeric(defaultProperty.originalStopImageNumber) && Number(defaultProperty.originalStopImageNumber) >= 0 ?
									Number(defaultProperty.originalStopImageNumber) : Math.floor(Math.random() * p.imageCount);
			p.startCallback();
			roll();
			p.slowDownTimer = setTimeout(function(){
				slowDownSetup();
			}, p.duration * 1000);
		}

		var stop = function(option) {
			if (!p.isSlowdown) {
				if (option) {
					var stopImageNumber = Number(option.stopImageNumber);
					if (0 <= stopImageNumber && stopImageNumber <= (p.imageCount - 1)) {
						p.stopImageNumber = option.stopImageNumber;
					}
				}
				slowDownSetup();
			}
		}
		var option = function(options) {
			p = $.extend(p, options);
			p.speed = Number(p.speed);
			p.duration = Number(p.duration);
			p.duration = p.duration > 1 ? p.duration - 1 : 1;
			defaultProperty.originalStopImageNumber = options.stopImageNumber;
		}

		var ret = {
			start : start,
			stop : stop,
			init : init,
			option : option
		}
		return ret;
	}

	var pluginName = 'roulette';
	$.fn[pluginName] = function(method, options) {
		return this.each(function() {
			var self = $(this);
			var roulette = self.data('plugin_' + pluginName);

			if (roulette) {
				if (roulette[method]) {
					roulette[method](options);
				} else {
					console && console.error('Method ' + method + ' does not exist on jQuery.roulette');
				}
			} else {
				roulette = new Roulette(method);
				roulette.init(self, method);
				$(this).data('plugin_' + pluginName, roulette);
			}
		});
	}
})(jQuery);
</script>

s88s · 14.08.2019, 17:10

Код:

<script type="text/javascript">

$(document).ready(function () {
function randomInteger(min, max) {
  var rand = min + Math.random() * (max - min)
  rand = Math.round(rand);
  return rand;
}

let rull = $('div.roulette');
  var option = {
    speed: 4,
    duration: 5,
    stopImageNumber: 1,
    startCallback: function() {
      console.log('start');
    },
    slowDownCallback: function() {
      console.log('slowDown');
    },
    stopCallback: function($stopElm) {
      console.log($stopElm);
      $('#win').html('<img src="' + $stopElm[0].currentSrc + '" width="130" style="display: block;">');
    }
  }

  rull.roulette('option', option);
  
$('#button_buy').on('click', function() {
  rull.roulette('start');
});
});
</script>

</head>

<body>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-md-12">
                <div class="roulette_container">
                  <div class="roulette">
                    <img src="https://freshcoal.com/images/main/42db67b6-9dd1-4bfe-b478-8829c1.png" width="130">
                    <img src="https://freshcoal.com/images/main/e25bd6ef-8c67-497b-be71-48923b.png" width="130">
                    <img src="https://freshcoal.com/images/main/d0f793ff-b041-427c-bc24-440834.png" width="130">
                    <img src="https://freshcoal.com/images/main/2ab25358-deaa-46b7-b351-d9732a.png" width="130">
                    <img src="https://freshcoal.com/images/main/23378bd2-28e5-4d7e-8d39-621b73.png" width="130">
                    <img src="https://freshcoal.com/images/main/7ceb88b2-7f5f-4399-abb9-706825.png" width="130">
                    <img src="https://freshcoal.com/images/main/664dd492-3fcd-443b-9e61-4c7ebd.png" width="130">
                    <img src="https://freshcoal.com/images/main/87324464-1700-468f-8333-e7779e.png" width="130">
                  </div>
                </div>
                <div class="col-md-12 text-center mt-4">
                  <button class="btn btn-success" id="button_buy">
                                    Крутить
                                </button>
                </div>
                <div class="col-md-12 text-center mt-4">
                  <p id="win" class="text-center mx-auto"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

изменил
p.$rouletteTarget.css('transform', 'translate(0px, -' + p.topPosition + 'px)');
на
p.$rouletteTarget.css('transform', 'translate( -' + p.topPosition + ', 0px)');

Прокрутка пошла влево как мне и надо вот только изображения располдожены вертикально а не горизонтально ... float:left не помогает

Пример тут

s88s · 15.08.2019, 16:52

Кто то может мне помочь решить данную задачу с рулеткой?

Я сам JS очень плохо знаю =(

s88s · 16.08.2019, 16:54

Мда я всегда думал что форумы существуют для того что бы помогать друг другу ... так сказать поставить на путь истинный но увы похоже я ошибся =(

Я не думаю что нет не одного человека который бы не знал и не знает решения данной задачи ... да и в принципе это уже не важно так как почти всё уже решил сам осталось пару мелочей, которые рано или поздно все равно преодолею ... и всё же всё равно хочется верить что когда то мир наш изменится и люди начнут помогать друг другу ... Всем МИРА и ДОБРА!!!

Мaкс · 22.08.2019, 18:06

Цитата:

Сообщение от s88s

Мда я всегда думал что форумы существуют для того что бы помогать друг другу ...

Мне кажется слишком большой код вот и не помогли.

Serge_Bliznykov · 22.08.2019, 22:46

Цитата:

Сообщение от Мaкс

Мне кажется слишком большой код вот и не помогли.

я общался с s88s, поэтому сообщаю, что он сам упорно и настойчиво разбирался в коде и, в конце концов, добился того, что хотел.

Вадим Мошев · 24.08.2019, 10:29

s88s, Если вы решили проблему, то расскажите, как вы это сделали. Это может быть полезно другим.

15.08.2019, 16:52	#5
s88s Форумчанин Регистрация: 02.01.2014 Сообщений: 369	Кто то может мне помочь решить данную задачу с рулеткой? Я сам JS очень плохо знаю =( "Я не волшебник, я только учусь"

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Рулетка	Михаил Юрьевич	Общие вопросы Delphi	1	15.01.2017 00:11
Сайт-рулетка.	Сергей27	Помощь студентам	0	06.02.2013 21:13
Паскаль Рулетка	stop74	Помощь студентам	1	17.05.2012 14:02
Рулетка	Julila	Помощь студентам	0	15.03.2012 22:02
русская рулетка	13th	Свободное общение	79	23.08.2010 12:41

16.08.2019, 16:54	#6
s88s Форумчанин Регистрация: 02.01.2014 Сообщений: 369	Мда я всегда думал что форумы существуют для того что бы *помогать друг другу* ... так сказать поставить на путь истинный но увы похоже я ошибся =( Я не думаю что нет не одного человека который бы не знал и не знает решения данной задачи ... да и в принципе это уже не важно так как почти всё уже решил сам осталось пару мелочей, которые рано или поздно все равно преодолею ... и всё же всё равно хочется верить что когда то мир наш изменится и люди начнут помогать друг другу ... Всем МИРА и ДОБРА!!! "Я не волшебник, я только учусь"

24.08.2019, 10:29	#9
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	s88s, Если вы решили проблему, то расскажите, как вы это сделали. Это может быть полезно другим.