자바 스 크 립 트 뱀 잡 아 먹 기 게임 쓰기(초 상세)

뱀 을 탐 내 서 다 해 봤 는데 만 들 줄 알 아 요?듣 기 에 매우 어 려 운 것 같은 데,사실은 매우 간단 해서,말 을 많이 하지 않 고 바로 코드 를 붙인다.
우리 먼저 dom 구 조 를 써 보 자.

<div id="content">
      <div id="snake">
          <div class="box head"></div>
          <div class="box"></div>

      </div>
  
    </div>

그 중에서 content 는 전체 구조의 큰 상자 입 니 다.snake 는 뱀 입 니 다.안의 box 는 바로 그의 몸 입 니 다.머리 를 구분 하기 위해 우 리 는 첫 번 째 box 에 head 이름 을 붙 여 구분 합 니 다.다음은 css 를 추가 합 니 다.

<style>
    .box{
      width: 60px;
      height: 60px;
      background-color: red;
      position:absolute;
      left: 0;
      top: 0;
      line-height: 60px;
    }
    .head{
      background-color: yellowgreen;
    }
  </style>

우 리 는 뱀 에 게 각 절의 너비 와 높이 를 60 픽 셀 로 설정 하고 포 지 셔 닝 을 주 었 습 니 다.포 지 셔 닝 을 하지 않 으 면 문서 흐름(페이지 에서 떠 오 르 는 것)에서 벗 어 날 수 없 으 며 나중에 left 와 top 을 통 해 그의 좌 표를 판단 할 수 없 기 때 문 입 니 다.

좋 습 니 다.그러면 우 리 는 귀여운 뱀 한 마 리 를 얻 었 습 니 다.뭐?너 는 나 에 게 그의 머리 가 어디로 갔 느 냐 고 물 었 다.아주 간단 하 다.원소 에 위 치 를 정 한 후에 뒤의 원 소 는 앞의 원 소 를 덮어 버 릴 것 이다.그래서 머리 와 몸 이 겹 쳐 서 보이 지 않 을 뿐이다.
그 후에 우 리 는 이 뱀 을 움 직 여야 한다.그렇지?그러면 우 리 는 어떻게 그 를 움 직 이게 할 수 있 을 까?원 리 는 매우 간단 합 니 다.우 리 는 타 이 머 를 설정 할 수 있 습 니 다.시간 이 지나 면 그 에 게 움 직 이게 할 수 있 습 니 다.어떻게 그 를 움 직 이게 할 수 있 습 니까?하나의 수치 만 설정 하면 이 값 이 움 직 일 때마다+=60 을 설정 한 다음 에 상하 동 인지 좌우 동 인지 판단 하여 요소 의 left 와 top 에 값 을 부여 합 니 다.우 리 는 논 리 를 코드 로 쓰 고 다음 과 같은 코드 가 나 왔 다.

<script>
    var boxs = document.querySelectorAll(".box");
    var snake_x = 0;
    var snake_y = 0;
    var turn  = "right";
    setInterval(function(){
      snakeMove();
    },100)
    function snakeMove(){ 
      switch( turn ){
        case "right": snake_x += 60;break;
        case "left" : snake_x -= 60;break;
        case "top"  : snake_y -= 60;break;
        case "bottom": snake_y += 60;break;
      }

      for(var i = boxs.length - 1; i > 0 ; i --){
        boxs[i].style.left = boxs[i - 1].style.left;
        boxs[i].style.top = boxs[i - 1].style.top;
        
      }
      boxs[i].style.left = snake_x + "px";
      boxs[i].style.top = snake_y + "px";

    }
document.onkeydown = function(evt){
      var e = evt || event;
      var keyCode = e.keyCode || e.which;
      switch( keyCode ){
        case 37 : turn = "left";break;
        case 38 : turn = "top";break;
        case 39 : turn = "right";break;
        case 40 : turn = "bottom";break;
      }
    }

</script>

상기 코드 에서 우 리 는 작은 뱀의 초기 위치 에 있 는 x 와 y 의 좌 표를 0 으로 설정 하고 기본 적 으로 오른쪽으로 가 며 키보드 의 방향 키 입력 을 통 해 그의 방향 을 바 꿉 니 다.난점

for(var i = boxs.length - 1; i > 0 ; i --){
        boxs[i].style.left = boxs[i - 1].style.left;
        boxs[i].style.top = boxs[i - 1].style.top;
        
      }
      boxs[i].style.left = snake_x + "px";
      boxs[i].style.top = snake_y + "px";

이 코드 는 이 코드 의 목적 은 뒤의 요 소 를 앞 에 있 는 것 을 따라 가게 하 는 것 입 니 다.즉,뱀의 모든 몸 을 따라 운동 하 게 한 다음 에 머리 에 snake 로 설정 하 는 것 입 니 다.x 와 snakey 현재 값 이면 됩 니 다.이렇게 해서 첫 번 째(머리)좌 표를 형성 합 니 다.snake_x,snake_y실시 간 으로 변화 하 는 값 으로 두 번 째 조각 은 첫 번 째 조각 전의 값 이 고 세 번 째 조각 은 두 번 째 조각 전의 값 이다.이런 식 으로 유추 하면 한 몸 이 머리 를 따라 가 는 효 과 를 얻 을 수 있다.

그러나 코드 를 넣 은 후에 운행 하면 이 작은 뱀 은 너무 장난 이 심해 서 경계 에 도착 한 후에 도 무한 정 앞으로 나 아 갈 수 있다 는 것 을 알 게 될 것 이다.그러면 안 된다.뱀 을 도망 가게 할 수 는 없 기 때문에 작은 뱀 에 게 경 계 를 더 해 야 한다.

  var snake_x_max = document.documentElement.clientWidth ;
    var snake_y_max = document.documentElement.clientHeight;
if(snake_x > snake_x_max){
        snake_x = 0;
      }
      if(snake_x < 0){
        snake_x = snake_x_max;
      }
      if(snake_y > snake_y_max){
        snake_y = 0;
      }
      if(snake_y < 0){
        snake_y = snake_y_max;
      }

여기 서 우 리 는 x 와 y 의 최대 치 를 현재 창의 너비 와 높이 로 설정 한 다음 에 if 문 구 를 통 해 판단 합 니 다.만약 에 현재 좌표 가 최대 치 보다 크 면 현재 좌표 가 0 으로 돌아 가 고 0 보다 작 으 면(즉 왼쪽 경계 로 달 려 가 는 것)현재 좌 표를 최대 치 로 설정 하면 경 계 를 얻 을 수 있 습 니 다.

너 는 이렇게 하면 끝 날 것 이 라 고 생각 하 니?nonono,먹 을 것 이 없 는 뱀 을 어떻게 탐식 뱀 이 라 고 할 수 있 습 니까?그것 은 영혼 이 없습니다.이제 우 리 는 음식 을 만 들 기 시작 했다.

<div id="food">
  
      </div>

그리고 css 를 넣 어 주세요.

#food{
    width: 60px;
    height: 60px;
    position: absolute;
    background: greenyellow;
  }

그 다음 에 요 소 를 연결 하고 그의 left 와 top 값 을 범위 내 난수 로 설정 하면 랜 덤 위치 생 성 을 할 수 있 습 니 다.

var fd=document.getElementById("food");
    fd.style.left=Math.random()*snake_x_max+"px";
    fd.style.top=Math.random()*snake_y_max+"px";

좋 습 니 다.이렇게 해서 저희 가 랜 덤 으로 생 성 된 음식 을 얻 었 습 니 다.

하지만 우리 작은 뱀 은 음식 에 관심 이 없 는 것 같 습 니 다.지나 가면 먹 지 않 습 니 다.그래서 우 리 는 그 에 게 부 딪 히 는 검 사 를 해 야 합 니 다.부 딪 히 는 검 측 논 리 는 간단 합 니 다.음식의 left 값 과 머리의 left 값 을 감소 시 키 는 절대 치<=음식의 크기,그리고 음식의 top 값 과 머리의 top 값 을 감소 시 키 는 절대 치<=음식의 크기,설정 이 작 다 는 것 은 똑 같이 판단 하려 면 두 요소 가 완전히 겹 쳐 야 하기 때 문 입 니 다.우 리 는 가장자리 에 부 딪 혀 도 늦 더 라 도 두 수치 로 상쇄 하 는 것 이 필요 합 니 다.그리고 머리 와 음식 이 부 딪 혔 을 때 뱀의 신체 부분 을 복제 하여 뱀의 몸 에 넣 고 음식의 위 치 를 다시 갱신 시킨다 고 판단 한다.createElement를 통 해 신체 블록 을 새로 만 들 고className를 추가 한 후 부모 요소 에 추가 해 야 합 니 다.다음은 논 리 를 코드 로 바 꿉 니 다.

var dl=snake_x;
    var dt=snake_y;
    var fl=fd.style.left;
    var ft=fd.style.top;
    var dv=document.querySelectorAll("#snake div");
    var sk=document.getElementById("snake");
    var a2=Number(fl.substring(0,fl.indexOf("px")));
    var b2=Number(ft.substring(0,ft.indexOf("px")));
    if(Math.abs(dl-a2)<=60&&Math.abs(dt-b2)<=60){
       fd.style.left=Math.random()*1000+"px";
       fd.style.top=Math.random()*800+"px";
       sk.appendChild(dv[1].cloneNode());
       boxs = document.querySelectorAll(".box");
    }

그 중 에 긴 문자열 의 substring 방법 은 left 와 top 의 값 형식 이'200 px'와 같은 배열 이기 때문에 수학 연산 을 할 수 없 기 때문에 px 를 자 르 고 남 은 문자열'200'을 number 형식 으로 변환 해 야 수학 연산 을 할 수 있 습 니 다.

이렇게 간단하게 뱀 만 먹 으 면 돼 요.
뭐?너 는 나 에 게 자신 을 만나면 죽 는 것 과 같은 더 많은 규칙 체 제 를 왜 쓰 지 않 았 느 냐 고 물 었 는데,틀림없이 내 가 게 으 르 기 때 문 일 것 이다!저 는 createElement 도 직접 복제 하 는 것 이 귀 찮 습 니 다.어떻게 이렇게 많은 메커니즘 을 보완 할 수 있 습 니까?하하.기초 체 제 는 제 가 이미 썼 습 니 다.각종 기괴 한 체 제 는 아이들 에 게 자 유 롭 게 발휘 하도록 남 겨 두 세 요~
PS:여러분 은 머리 배경 사진 을 친구 사진 으로 바 꿀 수 있 습 니 다.그리고 음식 을 먹 여주 고 싶 은 것 으로 바 꿀 수 있 습 니 다.패러디 를 할 수 있 습 니 다.하하 하.
자 바스 크 립 트 에 대해 뱀 을 잡 아 먹 는 작은 게임(초 상세)을 쓰 는 글 을 소개 합 니 다.더 많은 js 뱀 을 잡 아 먹 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!