<HTML.CSS.JS>로또 추첨 게임

제로초님의 강의를 보고 만들었습니다.

실행 링크 https://RoTTo.goldchae.repl.co

Lottogame

-array(숫자) 

숫자만큼의 공간이 있는 빈 배열 생성

 

-empty는

반복 불가

 

-배열 map() 메서드

 

-Math의 random() 함수는 진짜 랜덤하지 않다.

"유사난수" 사용. https://ko.wikipedia.org/wiki/%EC%9C%A0%EC%82%AC%EB%82%9C%EC%88%98

 

-splice() 함수

splice(a) a(인덱스번호)부터 끝까지 가져옴

splice(a,b) a부터 끝까지

- slice()함수

slice(a,b) a(인덱스번호)부터 b까지

 

slice() 함수는 splice() 함수와 달리 아무리 많이 호출해도 원본 배열의 값은 절대 건드리지 않습니다.

https://www.daleseo.com/js-array-slice-splice/

자바스크립트 배열의 slice()와 splice() 함수

-sort()

파이썬과 다르게각 숫자 큰 자릿수 크기로 정렬 ( 1, 10, 2, 24..)

sort(function(p, c){ return p-c; }) 사용 --> 빼서 영보다 작으면 순서가 바뀌는 원리

sort(function(p, c){ return c-p; }) 은 내림차순 정리

 

-비동기 <-> 동기

 

동기(Synchronized)란 쉽게 설명해서 프로그램이 작성된 순서대로 실행되는 것

 

비동기(Asynchronized)란 동기적 실행이 하나의 타임라인으로 A가 완료되면 B가 실행되고 B가 완료되면 C가 실행되는 것과는 달리 비동기 프로그래밍은 타임라인의 분기를 나눠서 두개이상 함수가 동시에 동작하는 것이다

-콜백함수

 

매개변수로 전달받아서 실행하는 함수이다.

https://lunuloopp.tistory.com/entry/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%9D%98-%EC%9D%B4%ED%95%B4-callback%ED%95%A8%EC%88%98-promise-async-await

동기/ 비동기의 이해 - callback함수, promise, async, await

 

-setTimeout(function, 시간밀리초)

시간 텀을 주고 실행(비동기)

 

 

-getElementsByClassName

html에서 요소 가져오기

-createElement

요소 생성하기

-textContent

요소에 내용 넣기.바꾸기

-appendChild

자식 노드로 집어넣기

 

-js에서 css 다루기

변수이름.style.css요소

 

-prompt( , )

첫번째칸에  안내내용, +로 연결해야함!

두번째칸에 예시 내용(입력창 위치)

 

---

JS (+ HTML + CSS)

alert('1부터 45까지의 숫자 중 7개를 중복 없이 입력하세요!')
var userArray = [];
for(var i= 1;i<8;i++){
  var num = prompt(i+'번째 숫자를 입력하세요!','')
  var Num = Number(num)
  userArray.push(Num)
}
userArray.sort(function(p, c){return p-c;});
console.log(userArray)

//
var Lottoball = Array(45);
var Lottoballs = Lottoball.fill(); //empty 반복 불가해서 fill 써야 함
var ballMap = Lottoballs.map(function(ballNumber,key) {
  return key +1;
});
//뽑기
var picking = [];
while (ballMap.length > 0) {
  var Value = ballMap.splice(Math.floor(Math.random()*ballMap.length),1)[0];
  picking.push(Value)
}
var bonusNumber = picking[picking.length -1];
var LottoNumbers = picking.slice(0,6)
console.log("당첨숫자는",LottoNumbers.sort(function(p, c){ return p-c;}),"보너스",bonusNumber)
var resultwindow = document.getElementById('resultwindow');
function coloring(num,resul){
  var ball = document.createElement('div');
  ball.textContent = num;
  ball.style.display ='lineline-block';
  ball.style.border ='2px solid black';
  ball.style.borderRadius = '20px';
  ball.style.width = '40px';
  ball.style.height = '40px';
  ball.style.textAlign ='center';
  ball.style.fontSize = '30px';
  ball.style.marginBottom = '20px';
  ball.style.marginLeft ='20px'
  var backgroundcolor;
  if (num <= 10){
    backgroundcolor ='red'
  }else if(num <=20 ){
    backgroundcolor ='orange'
  }else if(num <=30 ){
    backgroundcolor ='yellow'
  }else if(num <= 40){
    backgroundcolor ='blue'
  }else{
    backgroundcolor ='green'
  }
  ball.style.background = backgroundcolor;
  resul.appendChild(ball);
}

setTimeout(function callbackfunc(){
  coloring(LottoNumbers[0],resultwindow)
},1000)
setTimeout(function callbackfunc(){
  coloring(LottoNumbers[1],resultwindow)
},2000)
setTimeout(function callbackfunc(){
  coloring(LottoNumbers[2],resultwindow)
},3000)
setTimeout(function callbackfunc(){
  coloring(LottoNumbers[3],resultwindow)
},4000)
setTimeout(function callbackfunc(){
 coloring(LottoNumbers[4],resultwindow)
},5000)
setTimeout(function callbackfunc(){
 coloring(LottoNumbers[5],resultwindow)
},6000)

setTimeout(function callbackfunc(){
  var bonusroom = document.getElementsByClassName('bonuswindow')[0];
  var bonusball = document.createElement('div');
  bonusball.textContent = bonusNumber;
  bonusball.style.display ='lineline-block';
  bonusball.style.border ='2px solid black';
  bonusball.style.borderRadius = '20px';
  bonusball.style.width = '40px';
  bonusball.style.height = '40px';
  bonusball.style.fontSize = '30px';
  bonusball.style.marginLeft ='20px'
  bonusball.style.textAlign ='center';
  var backgroundcolor;
  if (bonusNumber <= 10){
    backgroundcolor ='red'
  }else if(bonusNumber <=20 ){
    backgroundcolor ='orange'
  }else if(bonusNumber <=30 ){
    backgroundcolor ='yellow'
  }else if(bonusNumber <= 40){
    backgroundcolor ='blue'
  }else{
    backgroundcolor ='green'
  }
  bonusball.style.background = backgroundcolor;
  bonusroom.appendChild(bonusball);
},8000)

var reresult = userArray.filter(it => LottoNumbers.includes(it));
var realresult = reresult.length
var realresultwindow = document.getElementsByTagName('h1');
setTimeout( function gogo(){document.write(realresult,"개 맞췄습니다!" + realresultwindow[0].innerText)}, 9000);

---

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Lottogame</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div><b > ** 당첨 숫자 **</b></div>
  <div id='resultwindow'></div>
  <div><b> * 보너스 숫자! *</b></div>
  <div class='bonuswindow'></div>

  <div style="position:absolute; bottom:0px; left:10px;">도박문제 전문상담 <br>
  <b>1336</b></div>

 <div style="position:absolute; width:220px; height:400px; top:0px; right:10px;"><img src="./image/a.gif" width="220" height="400">
  <br><br><div id='this' ><h1></h1></div>
  <script src="script.js"></script>


  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script> 
</body>

</html>

 

 

 

 

 

 

 

 

구현 화면

몇 개 맞았는지도 씀