체스 게임의 4 개 쌍을 달성 하기 위해 HTML5 코드의 백 라인

이 기사는 매우 어려운 프로그래밍, 코드, 약 10000 문자 또는 이렇게, 100 줄에서는, Gobang, 4 아들 체스를 달성 하 고 이중 체스 게임의 체스 4 개의 종류를 뒤집기 때문에 이다. 참고로이 4 개의 체스 게임은 기본 프로그래머의 연습, 대신, 그것은 체스판, 3 차원 조각, 이벤트, 이동 규칙 판단, 이기 든 지 든 완전 한 체스 게임의 심판을 고를 오프 라인으로 저장 될 수 있다 기차, 관광 명소에서 수 있습니다, IPad, 안 드 로이드 태블릿, 상상,이 게임을 태블릿에 다운로드 체스 할 신호가 있을 때에, 하지에 태블릿의 기능 확장, 매우 즐거운 것은 아니다. 또한, 열쇠는이 프로그램은 그림에는 없습니다, 응용 프로그램 저장소 Http://www.aliyun.com/zixun/aggregation/34594.html에 갈 필요가 없습니다 "> 다운로드 지불, 사용 하는 유일한 코드 100 줄을 쓸 HTML5 기술 절대적으로 현재 가장 집착 2 인용 체스 게임 소스. (편집자 참고 사항: 페이지 코드의 폭 제한 때문에, 그래서 다양 한 줄 바꿈 처리 후 작가 코드 나 이로써 설명.) )

대상

전체 이중 게임을 하기 위해 할 최소한 다음과 같은 것 들, 첫 번째 단계: 체스판을 그립니다. 이 동적 처리; 수행할 필요가 다른 다른 보드 게임 체스판, 2 단계: 조각을 그립니다. 설명, 이동, Gobang, HTML5 시대에는 그림에 대해 걱정 하지 마십시오, 코드를 사용 하 여 3 차원 라운드를 얻을 수 있습니다 우리 같은이 라운드 아, 제발로 조각, 제 3 단계: drop 이벤트를 판단. 물론, 손가락의 위치를 찾으려면, 체스의 4 개의 종류 어떤가 상자에 및 일부 처리 필요 동적 바둑판의 십자에 떨어지고 있다, 4 단계: 판사 드롭 규칙. 체스에 있는 규칙, 코드 덜, 규칙 것 때문에 할인 된, 그렇지 않으면 미 숙, 프로그램 될 것입니다 아 이들의 장난감, 5 단계: 승리를 판단 하거나 잃을. 마지막으로, 우리는 승리와 패배를 판단 해야 합니다. 그 아이를, 체스는 항상 심판; 필요 하기 때문에이 프로그램에 의해 수행 되어야 6 단계: 태블릿 시대, 우리는 오프 라인 응용 프로그램을 구현 하는. 이것은 너무 중요 하다, 그렇지 않으면, 당신이 데스크톱 컴퓨터에 있다면, 재생, 게임의 네트워크가 되었습니다 사방, 암소, 무슨 소용이 작성? 이동 하는 신호가 있는 곳에, 시장이 있다, 지금 평면, 스마트 폰 많은 장소에서 네트워크 신호가 없을 경우에 꺼내 모바일 장치 재생 체스, 그래서 매우 불 일.

체스판을 그리기

이전에서는, Gobang, 4-아이 체스와 플립 체스 보드 동일 하지 않습니다, 그리고가 18 세로 및 가로, 체스의 다른 3 종류 8 격자 이다. 그래서 그것은 체스판을 그리는 매개 변수를 걸립니다. 이것은 작은 문제, 큰 질문은, 체스판을 그리는 방법의 선택은 무엇?

HTML5 프레임, 3 방법이 있다: 캔버스 라인으로 첫 번째, 두 번째, 행 및 열 특성 DIV, CSS3;에 추가 됩니다 테이블 태그와 함께 세 번째.

빠르고 적은 코드는? 대답은: 3. 다소 실망 HTML5 않다 능. 자세한 코드는 다음과 같습니다.

This.board=function (이름, 너비, 높이, rowbak, colbak) {/ * 그릴 체스판/namebak = 이름; ("회전율" 이름 = =) {행 8; = 열 = 8;} 다른 면 ("Gogame" = = 이름) {행 18; = 열 = 18} var Aw=math.floor (width/(col+2)), Ah=math.floor (height/(row+2)); Minl = (AW > 아? 아: AW)-4, //This 빼기 중요 하다, 그렇지 않으면 양식을 것입니다 수 내놓고 공백. Var 배열에서 채울 때 = 새로운 배열 ("< div 스타일 \ =" 여백: "+ minl +" px; \ ">" + "< 표 테두리 1 cellspacing = 0 = = \ "" + (Aw * 열) + "\" 높이 = \ "" + (아 * 행) + ">"); 대 한 (Var 나 = 0; 난 < 행; i + +) {Array.push ('< tr >');에 대 한 (Var j = 0; j < 열; j + +) {Array.push ("< td 정렬 센터 = >" + evt (I, J, MINL, MINL, AW * J + MINL/2 + 8, 아 * 나 + MINL/2) + "< 신안 >");} 경우 (namebak! = "4" & & namebak! "매출 달성" =) / * 추가 이벤트 Table/Array.push (EVT (나, 열, minl, minl, 아 * 열 + minl / 2 + 8, 아 * 나 + MINL/2)); Array.push ("< /tr >"); } 경우 (namebak! = "4" & & namebak! "매출 달성" =) {대 한 (Var j = 0; j < = 열; j + +) {Array.push (evt J + MINL / 2 + 8, 아 * 행 + MINL/2)); } document.write (Array.join ("") + "< / 테이블 >< / div >"); Setclick (행, 열, MINL, MINL); / * 초기화 이벤트 * * 스타t (); * 폰 초기화 /}

위의 코드에서 가장 중요 한 코드의 6 라인은 굵게, 두 가지 팁가지고 있는 첫 번째 테이블의 정의 고 두 번째 배열 배열을 사용 하는. 왜 배열을 사용 하 여 문자열을 정의 하는 대신? 대답은 배열 배열의 push 메서드는 더하기 보다 훨씬 빠르게 최적화 + 문자열 문자열의 동작. 코드, 회화, 체스판의 16 라인의 총 물론, 이건 그냥 선, 거기 처리 조각, 이벤트 정 및 전화의 다른 방법, 다음 토론 될 것 이다.