우리는 보통 무작위로 손질 된 카드를 작고 작은 것에서 순서대로 정리합니다 (내가 어렸을 때 플레이어는 두 카드 데크를 모두 잡을 수 없었습니다). 이 에세이는이 기능을 실현하여 JS 및 다른 것들의 분류 어레이에 대한 관련 지식에 익숙해지는 것입니다.
지식 포인트 사용 :
1. 공장에서 물체를 만듭니다
2.js 배열 정렬 () 메소드
코드 사본은 다음과 같습니다.
var testarr = [1, 3, 4, 2];
testarr.sort (function (a, b) {
반환 a -b;
})
alert (testarr.toString ()); // 1,2,3,4
testarr.sort (function (a, b) {
반환 b- a;
})
ALERT (testarr.toString ()); // 4,3,2,1
3.js-math.radom () 랜덤 번호
math.random (); // 0-1 획득 한 무작위 숫자는 0보다 크거나 1보다 작습니다.
4.JS 배열 스플 라이스 사용
코드 사본은 다음과 같습니다.
// 첫 번째 매개 변수는 삽입의 시작 위치입니다.
// 두 번째 매개 변수는 시작 위치에서 삭제되는 요소 수입니다.
// 세 번째 매개 변수는 시작 위치에 삽입되기 시작하는 요소입니다.
//예
var testarr = [1, 3, 4, 2];
testarr.splice (1, 0, 8);
ALERT (testarr.toString ()); // 1,8,3,4,2
var testarr1 = [1, 3, 4, 2];
testarr1.splice (1, 1, 8);
ALERT (testarr1.toString ()); // 1,8,3,4,2
5.JS 배열 시프트 사용
코드 사본은 다음과 같습니다.
// 배열에서 첫 번째 요소를 반환하고 배열에서 첫 번째 요소를 삭제합니다.
//예
var testarr = [1, 3, 4, 2];
var k = testarr.shift ();
alert (testarr.toString ()); // 3,4,2
경고 (k); // 1
이러한 기본 지식으로 카드 놀이를 시작할 수 있습니다. 한 사람이 카드를 만지고 트럼프 카드가 무작위라고 가정합니다. 카드를 그릴 때마다 카드를 손에 넣는 카드에 삽입하여 주문이 작아서 큰 것까지 보장해야합니다!
1 단계 : 먼저 카드 재생 카드 개체를 생성하는 방법을 작성해야합니다.
코드 사본은 다음과 같습니다.
/*공장 모드에서 다양한 카드를 만듭니다
*번호 : 카드의 번호
*유형 : 카드 색상
*/
var cards = (function () {
var card = 함수 (번호, 유형) {
this.number = 숫자;
this.type = 유형;
}
반환 함수 (번호, 유형) {
새 카드를 반환합니다 (번호, 유형);
}
}) ()
2 단계 : 카드 놀이를 만들고 셔플하고 저장하십시오.
코드 사본은 다음과 같습니다.
var radomcards = []; // 랜덤 카드 스토리지 배열
var mycards = []; // 만진 카드를 저장합니다
// 꽃 색상 0-spad 1- 플러스 꽃 2-Current 3-heart 4-big Ghost 5-Little Ghost
// 값 0-13은 고스트, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, J, Q, k를 나타냅니다.
함수 creatCompeleteCard () {
var index = 2;
var arr = [];
for (var i = 0; i <= 13; i ++) {
if (i == 0) {
ARR [0] = 새로운 카드 (i, 4);
ARR [1] = 새로운 카드 (i, 5);
} 또 다른 {
for (var j = 0; j <= 3; j ++) {
ARR [index] = 새 카드 (i, j);
색인 ++;
}
}
}
Radomcards = SortCards (ARR);
show (); // 페이지에 현재 카드를 표시합니다
}
// 카드를 닫습니다
함수 정렬 카드 (ARR) {
arr.sort (function (a, b) {
0.5 -Math.random ();
})
반환 ARR;
}
3 단계 : 카드를 만지기 시작합니다. 카드를 터치 할 때 먼저 삽입 위치를 결정한 다음 새 카드를 지정된 위치에 삽입하여 새 깔끔한 순서를 형성해야합니다.
코드 사본은 다음과 같습니다.
// 카드를 만지는 방법
함수 getcards (cardobj) {
var k = incardsindex (mycards, cardobj); // 삽입 위치를 고려하십시오
mycards.splice (k, 0, cardobj); // 새 순서를 형성하려면 삽입합니다
}
/*【카드를 삽입 해야하는 위치를 얻습니다.
*ARR : 현재 카드
*OBJ : 새로 터치 된 카드
*/
함수 incardsIndex (arr, obj) {
var len = arr && arr.length || 0;
if (len == 0) {
반환 0;
} else if (len == 1) {
if (obj.number> = arr [0] .number) {
반환 1;
} 또 다른 {
반환 0;
}
} 또 다른 {
var backi = -1;
for (var i = 0; i <len; i ++) {
if (obj.number <= arr [i] .number) {
backi = i;
부서지다;
}
}
if (backi == -1) {
backi = len;
}
반환 backi;
}
}
좋아요! HTML의 버튼 버튼을 시작하여 카드를 터치하고 한 번에 하나의 카드를 클릭하고 터치하십시오! 그리고 그것을 보여주십시오
코드 사본은 다음과 같습니다.
function start () {// 카드를 터치하는 방법, 한 번에 하나씩 터치
if (radomcards.length> 0) {
getcards (radomcards.shift ());
보여주다();
} 또 다른 {
경고 ( "아니오");
}
}
//이 쇼 메소드는 페이지의 현재 카드 이동을 표시하는 데 사용됩니다.
함수 show () {
var lenold = radomcards.length;
var lennew = mycards.length;
var html = "";
for (var i = 0; i <lenold; i ++) {
html + = "<div class = 'pai'> <b>" + radomcards [i] .type + "</b>-<div class = 'nu'>" + radomcards [i] .number + "</div> </div>";
}
document.getElementById ( "Old"). innerHtml = html;
html = "";
for (var i = 0; i <lennew; i ++) {
html + = "<div class = 'pai new'> <b>" + mycards [i] .type + "</b>-<div class = 'nu'>" + mycards [i] .number + "</div> </div>";
}
document.getElementById ( "new"). innerhtml = html;
}
HTML 및 CSS에 대한 코드
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<스타일 유형 = "텍스트/CSS">
.팔{
너비 : 50px;
높이 : 50px;
테두리 : 단단한 1px 빨간색;
위치 : 절대;
상단 : 5px;
왼쪽 : 5px;
}
.pai
{
너비 : 50px;
높이 : 100px;
테두리 : 단단한 1px 빨간색;
마진 왼쪽 : 3px;
플로트 : 왼쪽;
}
.새로운
{
테두리 : 단단한 1px 블루;
}
.NU
{
텍스트 정렬 : 센터;
글꼴 크기 : 24px;
마진-탑 : 25px;
}
</스타일>
</head>
<body>
<!-<div> </div>->
<input type = "button"value = "start"onclick = "creaticpeletecard ()" />
<입력 유형 = "버튼"value = "카드를 터치"onclick = "start ()" />
<br/>
제목 카드 : <div id = "Old"> </div>
<div style = "clear : 둘 다"> </div>
<hr />
내가 만진 카드 : <div id = "new"> </div>
</body>
</html>