JQuery_jquery로 만든 간단한 조명 게임 공유

최근 diaosi는 TypeScript를 강제로 학습하므로(안 배우면 퇴학당함, 5555) JavaScript를 먼저 배워야 합니다. 웹 관련 사항을 모두 이해해야 합니다. , 그렇지 않으면 BOSS를 속일 수 없습니다.

오늘은 잠시 JavaScript를 배웠습니다. 여기서는 기술을 연습하기 위해 간단한 라이트업 게임을 만들었습니다. JQuery가 사용됩니다. 그렇지 않으면 이벤트 바인딩이 어려울 수 있습니다.

JavaScript의 Hello World로서 이는 다음과 같습니다. 구현 방법에 대해 간략하게 소개합니다.

렌더링:

먼저 스타일 시트를 정의하세요. 맞춤 요소 앞에 점을 추가하는 것을 잊지 마세요. 그렇지 않으면 유효하지 않습니다. (초보자는 이 문제로 여러 번 피해를 입었습니다.)
app.css

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

몸
{
글꼴 계열: 'Segoe UI', sans-serif;
}

스팬 {
글꼴 스타일: 기울임체
}

.darkButton {
너비:70px;
높이:70px;
배경색:녹색;
}

.lightButton {
너비:70px;
높이:70px;
배경색:연한 파란색;
}

.return {
글꼴 크기:작음;
}

다음으로 body 태그에 있는 전체 레이아웃을 구현해 보겠습니다. 이는 매우 간단하고 말할 것도 없습니다.

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

할 수 있으면 전구를 모두 켜세요!

안녕하세요

           가로:
           
           세로:
          
           게임 시작

0 단계를 이동했습니다.

그런 다음 먼저 시작 버튼을 클릭한 후 사용자 입력이 숫자인지, 4~9 범위에 있는지 확인하는 매우 간단한 검증을 구현합니다.

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

$(문서).ready(함수 () {
$(startButton).click(함수 () {
If (단계 > 0) {
If (confirm('게임을 다시 시작하시겠습니까?') === false)
                  반품;
}

if (isNaN($(X).val()) || isNaN($(Y).val())) {
Alert('가로 및 세로 셀에 숫자를 입력할 수 있습니다.');
             반품;
}
else if ($(X).val() = 10 || $(Y).val( ) >= 10) {
                 Alert('가로선과 세로선의 개수는 4개 이상, 9개 이상일 수 없습니다.');
             반품;
}

startGame();
});   });

$()는 사용되는 JQuery 라이브러리입니다. 기본적으로 여기에서 사용되는 선택기는 다음과 같습니다. $("#xxx") ID가 xxx인 첫 번째 요소; $(".xxx") 스타일이 xxx인 모든 요소.

step은 제가 정의한 변수로, 사용자가 이를 몇 번이나 누르는지 기록합니다.

사용자가 시작 버튼을 누를 때마다 원래 그려진 버튼(있는 경우)을 지웁니다. JQuery로 구현하기 쉽습니다. 일치하는 스타일을 사용하면 됩니다.

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

$(".darkButton").remove();
$(".lightButton").remove();
$(".return").remove();

그러면 여러 개의 버튼이 생성됩니다. 이는 매우 일반적이며 설명이 필요하지 않습니다.

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

var Grid = document.getElementById('content');

for (var i = 1; i <= x; i ) {
for (var j = 1; j <= y; j ) {
        var 버튼 = createButton('bt' i j);

grid.appendChild(버튼);
}

var ret = document.createElement('br');
ret.className = "반환";

grid.appendChild(ret);
}

createButton은 html 요소를 생성하고 설정하는 데 사용되는 메소드입니다. 여기서 버튼의 id 네이밍은 bt 행번호 열번호로 하여 앞으로 어떤 버튼이 눌려졌는지 쉽게 알 수 있도록 한다. 마침표를 용이하게 하기 위해 행 번호와 열 번호가 10보다 작아야 한다고 규정했기 때문에(너무 게으르기 때문에) 마지막에서 첫 번째 또는 두 번째 문자만 가져와도 좌표 값을 알 수 있습니다.

프로그램의 가장 중요한 논리: 버튼을 누르면 자체 상태와 인접한 버튼의 상태가 변경됩니다. 좌표만 꺼내고 상, 하, 좌, 우 버튼의 상태를 변경하면 됩니다(범위 밖 상황 판단에 주의). 여기에 판단을 작성하세요.

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

$(".darkButton").click(함수 () {
ChangeButton(this.id);

var x = this.id.charAt(2);
var y = this.id.charAt(3);

if (x - 1 > 0) {
        changeButton('bt' (x - 1) y);
}

이는 JQuery에 정의되어 있습니다. JQuery 없이는 이것을 얻는 것이 쉽지 않습니다. 한 가지 기억해야 할 점은 다음 코드입니다.

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

var newX = 1 parsInt(x);
if (x 1 <= maxX) {
​changeButton('bt' newX y);
}

Int를 구문 분석하지 않으면 JavaScript가 1을 문자열로 처리하고 다음 x와 연결하므로 id가 잘못되므로 x를 int로 변환하고 추가하기만 하면 됩니다(할 필요 없음) 위의 뺄셈의 경우) ). 이는 유형이 지정되지 않은 언어의 단점 중 하나이며 이것이 TypeScript가 나타나는 이유입니다(Diaosi가 최근 배우고 있는 것).

이제 중요한 부분이 완료되었으므로 htm 파일의 코드를 모두 아래에 붙여넣습니다.

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

           $(document).ready(function () {
                 $(startButton).click(function () {
                       if (단계 > 0) {
If (confirm('게임을 다시 시작하시겠습니까?') === false)
                        반품;
                }

if (isNaN($(X).val()) || isNaN($(Y).val())) {
Alert('가로 및 세로 셀에 숫자를 입력할 수 있습니다.');
                    반품;
                }
else if ($(X).val() = 10 || $(Y).val( ) >= 10) {
Alert('가로선과 세로선의 개수는 4개보다 작을 수 없고 9보다 클 수 없습니다.');
                    반품;
                }

startGame();
            });                                                     });

      var maxX, maxY;

var 단계 = 0;

함수 startGame() {

               maxX = $(X).val();
               maxY = $(Y).val();
              makeGrid(maxX, maxY);
            단계 = 0;
                document.getElementById("step").innerHTML = 단계;
}

함수 makeGrid(x, y) {

               $(".darkButton").remove();
               $(".lightButton").remove();
               $(".return").remove();

var Grid = document.getElementById('content');

for (var i = 1; i <= x; i ) {

for (var j = 1; j <= y; j ) {
                  var 버튼 = createButton('bt' i j);

grid.appendChild(버튼);

                }

                var ret = document.createElement('br');
                ret.className = "반환";

                Grid.appendChild(ret);
            }

            $(".darkButton").click(function () {
                변경버튼(this.id);

                var x = this.id.charAt(2);
                var y = this.id.charAt(3);

                if (x - 1 > 0) {
                    changeButton('bt' (x - 1) y);
                }
                if (y - 1 > 0) {
                    changeButton('bt' x (y - 1));
                }

                var newX = 1parseInt(x);
                if (x 1 <= maxX) {
                    ChangeButton('bt' newX y);
                }
                var newY = 1 parsInt(y);
                if (y 1 <= maxY) {
                    ChangeButton('bt' x newY);
                }

                단계 ;

                document.getElementById("step").innerHTML = 단계;
            });
        }

        기능 변경버튼(id) {
            var 버튼 = document.getElementById(id);

            if (button.className === "darkButton") {
                버튼.클래스이름 = "라이트버튼";
            }
            그렇지 않으면 {
                버튼.클래스이름 = "어두운버튼";
            }
        }

        함수 createButton(id) {
            var 버튼 = document.createElement('버튼');
            버튼.id = id;
            버튼.클래스이름 = "어두운버튼";
            돌아가기 버튼;
        }
   

<본문>

할 수 있으면 전구를 모두 켜세요!

안녕하세요

           가로:
           
           세로:
          
           게임 시작

0 단계를 이동했습니다.