JavaScript 예--포커 카드 섞기 기능을 구현하는 방법을 가르칩니다.javascript 기술

우리는 보통 무작위로 뽑은 카드를 작은 것부터 큰 것 순으로 분류합니다(어렸을 때 카드 두 벌을 잡지 못했던 기억이 납니다). 이 에세이는 이 기능에 익숙해지기 위한 것입니다. 예를 들어 js의 배열 정렬과 같은 것입니다.

사용된 지식:

1. 팩토리 모드에서 객체 생성

2.js 배열 sort() 메서드

코드 복사 코드는 다음과 같습니다.

var testArr = [1, 3, 4 , 2] ;
testArr.sort(function (a,b) {
return a - b;
})
Alert(testArr.toString());//1,2,3 ,4
testArr.sort(function (a, b) {
return 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단계: 먼저 카드 객체를 생성하는 메서드를 작성해야 합니다.

코드 복사 코드는 다음과 같습니다.

/*공장 모드에서는 다양한 카드가 생성됩니다
* number:카드에 적힌 숫자
*type:카드의 모양
*/
var Cards = (function () {
var Card = function (숫자, 유형) {
this.number = 숫자;
this.type = 유형;
}
반환 함수(숫자, 유형) {
return new Card(숫자, 유형);
}
})()

2단계: 카드 만들기, 섞기 및 저장

코드 복사 코드는 다음과 같습니다.

var RadomCards = [];//무작위 카드 저장 배열
var MyCards = [];// 뽑은 카드 저장


//슈트 0-스페이드 1-클럽 2-다이아몬드 3-하트 4-큰 유령 5-작은 유령
//숫자 0-13은 유령, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, J ,Q, K;
function CreateCompeleteCard() {
var index = 2;
var arr = [];
for (var i = 0; i If (i == 0) {
arr[0] = 새 카드(i, 4);
arr[1] = 새 카드(i, 5);
} else {
for ( var j = 0; j arr[index] = new Cards(i, j);
index ;
}
                                                                   
RadomCards = SortCards(arr );
Show();//현재 카드를 페이지에 표시
}
//카드 섞기
function SortCards(arr) {
arr .sort(function (a, b) {
             0.5를 반환 - Math.random();
3단계: 카드 그리기 시작 카드를 뽑을 때는 먼저 삽입 위치를 결정한 다음 새 카드를 지정된 위치에 삽입하여 새로운 깔끔한 순서를 형성해야 합니다.

코드 복사

코드는 다음과 같습니다.

//카드 뽑는 방법
function GetCards(CardObj) {
var k = InCardsIndex(MyCards, CardObj);//삽입 위치 고려
MyCards.splice(k, 0 , CardObj); // 삽입하여 새 시퀀스 형성
}
/*[카드를 삽입해야 하는 위치 가져오기]
*arr: 현재 손에 있는 카드
*obj: 새로 뽑은 카드
*/
function InCardsIndex(arr, obj) {
var len = arr && arr.length || 0;
if (len == 0) {
return 0 ;
                                                                                                                                Return 0;
}
} else {
var backi = -1;
for (var i = 0; i
if (obj. number                                                                                    
 ~                                               
알겠습니다! HTML의 버튼을 사용하여 카드 그리기를 시작하고 한 번에 카드 하나씩 클릭하세요! 보여주세요





코드 복사


코드는 다음과 같습니다.


function Start() {//방법 카드 뽑기, 한 번 터치 "No more" ; lenNew = MyCards.length;

var html = ""; var html = "";

lenNew for (var i = 0; i var html = "

< ;b>" RadomCards[i].type "-

" RadomCards[i].number "

";

}

" MyCards[i].type " b>-

" MyCards[i].number "

> ;

";

       }         document.getElementById("new").innerHTML =html;                                                                                 

html 및 css 코드 업로드

코드 복사 코드는 다음과 같습니다.