20DAY / JAVA Script / 카드게임만들기
2017. 4. 28. 09:39
자바스크립트사용
자바스크립트 변수
변수타입
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
// db -> select -> 배열
let card = [
{num:1, kind:"spade"}
,{num:2, kind:"spade"}
,{num:3, kind:"spade"}
,{num:4, kind:"spade"}
,{num:5, kind:"spade"}
,{num:6, kind:"spade"}
,{num:7, kind:"spade"}
,{num:8, kind:"spade"}
,{num:9, kind:"spade"}
,{num:10, kind:"spade"}
,{num:11, kind:"spade"}
,{num:12, kind:"spade"}
,{num:13, kind:"spade"}
,{num:1, kind:"heart"}
,{num:2, kind:"heart"}
,{num:3, kind:"heart"}
,{num:4, kind:"heart"}
,{num:5, kind:"heart"}
,{num:6, kind:"heart"}
,{num:7, kind:"heart"}
,{num:8, kind:"heart"}
,{num:9, kind:"heart"}
,{num:10, kind:"heart"}
,{num:11, kind:"heart"}
,{num:12, kind:"heart"}
,{num:13, kind:"heart"}
,{num:1, kind:"diamond"}
,{num:2, kind:"diamond"}
,{num:3, kind:"diamond"}
,{num:4, kind:"diamond"}
,{num:5, kind:"diamond"}
,{num:6, kind:"diamond"}
,{num:7, kind:"diamond"}
,{num:8, kind:"diamond"}
,{num:9, kind:"diamond"}
,{num:10, kind:"diamond"}
,{num:11, kind:"diamond"}
,{num:12, kind:"diamond"}
,{num:13, kind:"diamond"}
,{num:1, kind:"clover"}
,{num:2, kind:"clover"}
,{num:3, kind:"clover"}
,{num:4, kind:"clover"}
,{num:5, kind:"clover"}
,{num:6, kind:"clover"}
,{num:7, kind:"clover"}
,{num:8, kind:"clover"}
,{num:9, kind:"clover"}
,{num:10, kind:"clover"}
,{num:11, kind:"clover"}
,{num:12, kind:"clover"}
,{num:13, kind:"clover"}
];
window.addEventListener("load",function(){
let play = document.getElementById("play");
play.addEventListener("click", function(){
for(let i=0; i<10000; i++) {
let r = Math.floor(Math.random()*card.length); // 0 ~ 3
let temp = card[0];
card[0] = card[r];
card[r] = temp;
}
let str ="";
for(let i=0; i<5; i++) {
let fileName = card[i].kind+card[i].num+".JPG";
let path = "<img src='./imgs/"+fileName+"'>";
str += path;
}
let result = document.getElementById("result");
result.innerHTML = str;
});
});
</script>
</head>
<body class="container">
<button id="play" class="btn btn-primary">play</button>
<div id="result">
</div>
</body>
</html>
