• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Animacja lotto 49 kul | Js / HMTL / CSS

VPS Starter Arubacloud
0 głosów
539 wizyt
pytanie zadane 23 listopada 2016 w JavaScript przez Widemo Użytkownik (920 p.)

Witam, chce napisac strone losujaca lotto i wiem jak zrobic randomowe przemieszczanie sie div'a po oknie przegladarki, ale nie wiem jak zastosowac to do 49 div'ow zeby kazdy szedl w inna strone strona w linku i wklejam tez kod

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="style.css"/>
		<link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700&amp;subset=latin-ext" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Bungee+Inline&amp;subset=latin-ext" rel="stylesheet">
		<title>LOTTO - Witryny</title>
	</head>
	<body onload="siteStyle();">
	<div class="lotto" id="lotto">
					<div class="lottoResult" id="lottoResult">
					</div>
					<div class="lottoContainer" id="lottoContainer">
					</div>
				</div>
		<div class="container" id="container">
			<div class="header">
			 &lt; LOTTO &gt;
			</div>
			<div class="menu" id="menu">
				<ul>
					<li><button class="button">LOTTO</button></li>
					<li><button class="button">ABSOLUTE</button></li>
				</ul>
			</div>
			<div class="content" id="content">
				<ul>
				<li><button class="button" onclick="showScript">SCRIPT</button></li>
				<li><button class="button" onclick="lotto();">PLAY</button></li>
				<li><button class="button" onclick="showScript">RELOAD</button></li>
				</ul>
				<textarea class="scriptBox" readonly>
				</textarea>
				
			</div>
			<div class="footer">
				LOTTO | LAST MODIFIED: <script>document.write(document.lastModified); </script>
			</div>
		</div>
		<script src="jquery.js"></script>
		<script src="script.js"></script>
	</body>
</html>
html, body{
	margin: 0;
	padding: 0;
	font-family: 'Amatic SC', cursive;
	/* font-family: 'Bungee Inline', cursive; */
	text-align:center;
}

li, ul{
	list-style:none;
	padding:none;
	margin:none;
	-webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
}

a{
	color:inherit;
	text-decoration:inherit;
}

.button{
	height:38px;
	line-height:40px;
	font-size:30px;
	border:none;
	outline:none;
	background:#751313;
	color:#fff;
	font-family: 'Amatic SC', cursive;
	transition:all ease 600ms;
	margin:1px 0px 1px 0px;
}

.button:hover{
	box-shadow:inset 0 0 15px 1px rgba(0,0,0,0.5);
	cursor:pointer;
	color:#751313;
	background:#fff;
}

.container{
	width:800px;
	margin: 20px auto 0 auto;
	box-shadow: 0 0 25px 1px rgba(0,0,0,0.5);
}

.header{
	width:100%;
	height:100px;
	line-height:100px;
	color:#751313;
	font-size:75px;
}

.menu{
	width:200px;
	height:100%;
	float:left;
}

.menu  .button{
	width:200px;
}

.content{
	width:600px;
	box-sizing:border-box;
	float:left;
	padding: 0 5px 0 5px;
}

.content > ul > li{
	float:left;
	margin:0 1px 0 1px;
}

.scriptBox{
	width:calc(100% - 2px);
	height:400px;
	border:none;
	padding:0;
	box-shadow:inset 0 0 15px 1px rgba(0,0,0,0.5);
	margin-top:5px;
	resize: none;
	outline: 1px solid #751313;
}

.footer{
	color:#751313;
	clear:both;
	width:100%;
	height:40px;
	line-height:40px;
	font-size:25px;
	font-weight:700;
	}
	
	/* LOTTO ELEMENTS */
	
	.lotto{
		width:100%;
		height:100%;
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background:rgba(0,0,0,1);
		display:none;
	}
	
	.lottoResult{
		width:100%;
		height:100px;
		background:#fff;
		box-shadow:inset 0 0 40px 2px rgba(0,0,0,0.7);
		display:none;
	}
	
	.lottoContainer{
		width:100%;
		height:100%;
		display:none;
	}
	
	.lottoBall{
		width:60px;
		height:60px;
		line-height:60px;
		border-radius:50%;
		box-shadow:inset 0 0 20px 1px rgba(0,0,0,0.5);
		background:#d1bf3c;
		font-size:30px;
		font-weight:700;
		display:inline-block;
		margin: 1px;

	}
var container = document.getElementById("container");
var menu = document.getElementById("menu");
var content = document.getElementById("content");

function siteStyle(){
	container.style.height = window.innerHeight - 40 + "px";
	menu.style.height = window.innerHeight - 180 + "px";
	content.style.height = window.innerHeight - 180 + "px";
	
	setTimeout("siteStyle()",50);
}

function lotto(){
	var numTable = [];
	var resultTable = [];
	var numCount = 49;
	var lotto = document.getElementById("lotto");
	var lottoContainer = document.getElementById("lottoContainer"); 
	
	
	$("#lotto").slideDown(1500);	
	$("#lottoResult").delay(1500).slideDown(1000);
	$("#lottoContainer").delay(2500).fadeIn(1000);

	
	
	for(i=1; i<=numCount; i++){
		var a = i;
		numTable.push(i);
		var element = document.createElement("div"); 
		element.id = "lottoBall" + i;		
		element.className = "lottoBall";				
		lottoContainer.appendChild(element).innerHTML = i;
		
		if(i % 7 == 0){		
			lottoContainer.innerHTML = lottoContainer.innerHTML + "<br>";
		}
	}
	
	for(i=0; i<6; i++){
		var num = Math.round(Math.random()*--numCount);
		resultTable.push(numTable[num]);
		numTable.splice(num,1);
	}
}

http://www67.zippyshare.com/v/sWCkowxl/file.html

1 odpowiedź

+2 głosów
odpowiedź 25 listopada 2016 przez ShiroUmizake Nałogowiec (46,300 p.)
wybrane 1 lutego 2017 przez Widemo
 
Najlepsza

Zaintersuj się OBIEKTOWOŚCIĄ. Bo praktycznie każda kula, będzie miała to samą metodę jak. Po drugie dziel kod na mniejsze funkcję/metody bo jak widzę takie coś to nie chcę mi się wchodzić co i jak działa. A jak widzę nazwę funkcji to już wiem co to robi. Po trzecie nazwa funkcji ma mówić co ona robi, bo nazwa lotto nie wiele mi mówi.

Po czwarte, lepiej by to byłoby zrobić w canvasie. Nie wiem jak chcesz zrealizować odbijanie kul od ściany, nawet zakładając najprotsze rozwiązanie jakim jest odbicie kuli jak w teori światła od powierzchni płaskiej. Tu mi chodzi o kąt nachylenia odbicia.

Poniżej masz przykład. Jakbym zbudował kule.

Powiedzmy że builder zwrócił nam 49 divów.

import {Ball} from "./ball.js"
export default class Builder {
constructor (stockBall){
this.stockBall = stockBall;
this.constructedBalls  = new Array(stockBall);
}

build (){
let Object;
for (let i = 0l i > this.stockBall; i++){
 Object = this.ConstructedObject = this.buildToDOM();
 Object = this.ConstructedObject = this.buildToBall();
this.setConstructObject(Object);
}
}

buildToDOM(){
return this.getConstructDOMElement("div");
}

buildToBall(){
return new Ball ();
}

getConstructDOMElement(domElement){
return document.createElement('domElement);
}

setConstructedObject(Object){
this.constructedBalls.push(Object)
}

getConstructedObject(){
return this.constructedBalls;
}

Powiedzmy, że lotto.js jest naszą klasą główną naszego API. A client.js jest głównym widokiem na API.

import {LottoAPI} from "./.lotto.js"
document.getelementById('jakisButton').addEventListener('click' , run, false);

function run (){
var LottoAPI = new LottoAPI(49);
LottoAPI.run();
}

Zadaniem LottoAPI jest inicjonowanie krok po kroku każdego naszego kolejnego modułu.

Po kolei:

  • Budujemy obiekty. (Warto by było sprawdzić, czy jeżeli doszło kolejnego losowania bez odświeżania strony, czy kule istnieją) (Builder)
  • Uruchamiamy interfejs graficzny API (start/lub kolejne losowanie itd) , jego zadaniem będzie uchwycenie zdarzeń oraz przekazanie swojego statusu do lottoAPI. (EventMenager)
  • lottoAPI po uzyskaniu statusu EventMenagera. Jeżeli nastąpił start uruchamia GameMenager i przekazuje te konstruowane obiekty. Od teraz GameMenager będzie nadzorował grę.
  • GameMenager na początku ustawia pozycje kul. (Oczywiście musisz te wszystkie DOM sobie gdzieś zagniedzić oraz ustalić generowanie pozycji);
setStartPosition (posX, posY){
this.balls.forEach(function(ball){
ball.setPosX(posX);
ball.setPosY(posY);
});
}

Założmy, że czas losowania to 10 sekund. Utwórzmy to jako pole dla GameMenagera

export defualt GameMenager {
constructor (balls){
this.balls = balls;
this.maxTimeLifeSpan = 10000.
this.curentLifeSpan = 0;
this.idTimeout;
}
 // Dalsze metody

Powiedzmy, że co 100 ms ma wywoływać funkcję render{

run (){
//
this.setStartPosition(this.jakasMetodaGenerujacaX() this.jakasMetodaGenerujacaY() );
this.idTimeout = setTimeOut(render,100);

 

}

render (){
this.curentLifeSpan =+ 100;
if (this.isMax()){
this.removeEvent();
}
else{
this.balls.forEach(function(ball)){
ball.move(this.jakasMetodaObliczeniowaX(), this.jakasMetodaObliczeniowaY());
});
}

Co tu się stało , wiemy że nasz budowlaniec, do którego użyliśmy dosyć prostej implementacji wzorca projektowego - Builder ,który  zbudował 49 kul, przekazaliśmy je gameMenager formie tablicy obiektów. Dla każdego obiektu wywołujemy metodę move co każde 100 ms. jeżeli nasz currentLifeSpanTime jest równy maxTimeLifeSpan kończymy zdarzenie render. Następnie wypadało by zrobić obserwatora który przekaże stan zakończenia losowania, by na podstawie tego gameMenager zdecydował co ma robić dalej.

Specjalnie tak napisałem, bo nie wiem jak dokładnie chcesz odwzorować ruch kul stosując prawa fizyki.

Przejdżmy teraz do samej kuli. Wiemy, że każda kulka jest obiektem o typie DOM (czyli ma dostęp do pól np: style itd) wiemy, też że nasza kulka jest obiektem o typie kulka (taaa...). To oznacza, że mamy dostęp do metod typowych dla DOM oraz do metod np: move.

Przejdżmy do ciała kulki.

class ball{
constructor (){
this.posX = 0;
this.posY = 0;
}

// tu są settery dalej, zobacz na necie co to są settery.

move (posX, posY){
thisposX =+ posX;
this.posY =+posY;
this.style.transform = "translate (" + this.posX +" , " + this.posY +")" + "";
}

}

Przez to , że jest tot DOMObject mogę wywołać metodę style.transform, ą że ma być wywołana metoda na tym konkretnym obiekcie używam this. To jest przykład jak można przesuwać kulami względem osi X i osiY. Nie jest to łatwe zadanie, aczkolwiek myśle, że podołasz. Powodzenia :)/

Podobne pytania

0 głosów
1 odpowiedź 372 wizyt
pytanie zadane 12 lutego 2019 w HTML i CSS przez Anetka Początkujący (260 p.)
0 głosów
0 odpowiedzi 234 wizyt
pytanie zadane 11 lutego 2019 w HTML i CSS przez Anetka Początkujący (260 p.)
0 głosów
1 odpowiedź 328 wizyt
pytanie zadane 19 grudnia 2018 w HTML i CSS przez kubekszklany Gaduła (3,170 p.)

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...