Рулетка - 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 Сообщений: 368	Кто то может мне помочь решить данную задачу с рулеткой? Я сам JS очень плохо знаю =( "Я не волшебник, я только учусь"

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

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

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

Опции темы
Версия для печати Отправить по электронной почте