진동, 진동, 진동, 충격!20 줄 코드 를 뭘 할 수 있 습 니까?
나 는 코드 를 약간 수정 하고 주석 을 추가 하여 이해 하기 편리 했다.
<html lang="en">
<head> <meta charset="UTF-8"> <title> title> <style>
body {
display: flex;
height: 100vh;
margin: 0;
padding: 0;
justify-content: center;
align-items: center;
}
style>
head>
<body>
<canvas id="can" width="400" height="400" style="background-color: black"> ， canvascanvas>
<script>
var snake = [41, 40],
//snake ，
direction = 1,
//1 ，-1 ，20 ，-20
food = 43,
//
n,
//
box = document.getElementById('can').getContext('2d');
// 0 399 box [0~19]*[0~19] ， 20px
function draw(seat, color) {
box.fillStyle = color;
box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
// color ， x，y ， 。
}
document.onkeydown = function(evt) {
// direction
direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
};
!function() {
snake.unshift(n = snake[0] + direction);
// n ，n
if(snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19) { //if ， ，
return alert("GAME OVER!");
}
draw(n, "lime");
//
if(n == food) {
// ， ，
while (snake.indexOf(food = ~~(Math.random() * 400)) > 0);
draw(food, "yellow");
} else {
// ，
draw(snake.pop(),"black");
}
setTimeout(arguments.callee, 150);
// 0.15 ，
}();
script>
body>
html>우선, 우 리 는 탐식 뱀 이 되 는 가장 중요 한 것 이 무엇 인지, 뱀 이 활동 하 는 장소 와 뱀 을 어떻게 움 직 이 는 지 알 아야 한다.
우 리 는 먼저 뱀 이 활동 하 는 장 소 를 본다.
<canvas id="can" width="400" height="400" style="background-color: black">
， canvas
canvas>
box = document.getElementById('can').getContext('2d');이것 은
400px*400px 의 canvas 이다. 사고방식 은 20px*20px 을 하나의 격자 로 하여 20 행 20 열의 방진 을 구성 하 는 것 이다. 모두 400 칸 을 만 든 다음 에 녹색 으로 채 워 진 칸 은 뱀 몸 을 나타 내 고 노란색 으로 음식 을 나타 낸다.이 400 칸 과 숫자 0~399 가 일일이 대응 하 는데 대응 하 는 방식 은 20 을 기수 로 하고 n / 20 재 조정 은 몇 번 째 줄 을 나타 내 며 n % 20 몇 번 째 열 을 나타 낸다.행 수 와 열 수 는 모두 0~19 로 표시 한다.뱀 은 1 차원 배열 로 모든 값 이 이
400 개의 숫자 중 하나 이 고 var snake = [41, 40]; 로 이 뱀 을 초기 화 하 며 색인 0 은 뱀 머리 라 고 표시 했다.food 음식의 위 치 를 나타 내 고 direction 뱀 머리 다음 운동 의 방향 을 나타 낸다.뱀의 운동 은 배열 요 소 를 추가 하고 삭제 하 는 것 으로 이 루어 진다. 매번 뱀 머리 를 그 리 며 뱀 꼬리 를 제거 하고 순환 적 으로 뱀 운동 을 한다. 아래 는 함수 운행 의 시작 부분 부터 볼 수 있 습 니 다.!function() {}();무슨 귀신 이 야?이것 은 사실 즉시 실행 함수
IIFE 의 또 다른 서법 이다.계속 내 려 다 보면 뱀 머리 에 노드 n 를 추가 하고 그 수 치 는 현재 뱀 머리의 값 에 direction 의 값 을 더 하면 왜 20 으로 아래로, -20 로 위로 표시 하 는 지 이해 할 수 있다.다음 줄 은 하나의 if 문구 로 그 중에서 주의해 야 할 것 은 && 의 우선 순위 가 || 보다 높다 는 것 이다. 이 문 구 는 곧 나타 날 뱀 머리 가 뱀 몸 에 속 하 는 지 아 닌 지 를 판단 하거나 box 밖으로 뛰 어 나 간 것 이다.사망 하지 않 았 다 면 이 뱀 머리 를 그 려 보 세 요. 아래 에 그 려 진 코드 를 보 세 요.function draw(seat, color) {
box.fillStyle = color;
box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
}채 울 때
18*18 픽 셀 을 채 우 고 1px 테 두 리 를 남 깁 니 다..fillRect() 에서 첫 번 째 매개 변 수 는 사각형 x 좌표 seat % 20 *20 + 1 를 그 리 는 것 이다. 즉, 그 리 려 는 사각형 블록 이 방진 에 있 는 위 치 를 먼저 얻 는 것 이다. ~~(seat / 20) 줄, seat % 20 열, 그리고 * 20 + 1 구체 적 으로 픽 셀 점 까지.이것 ~~ 은 이해 하기 어 려 울 것 같 습 니 다. 저 는 여기 서 의 용 도 는 Math.floor() 와 차이 가 많 지 않 을 것 같 습 니 다. 부동 소수점 형의 수 를 반 으로 취하 고 반 으로 취하 면 얻 은 수 는 작은 숫자의 정 수 를 없 애 는 것 입 니 다.앞으로 돌아 가면 또 하나의 판단 문 으로 다음 뱀 머리 에 나타 날 위치 가 현재 의 음식의 위치 와 같 는 지 판단 한다. 만약 에 같다 면 다음 음식 을 생 성하 고 음식의 위 치 는 임 의 수 이지 만 이 점 이 현재 의 뱀 에 나타 나 는 것 이 아니 라 음식 을 그 려 야 한다.먹 이 를 먹 지 못 하면 뱀 이 정상적으로 운동 할 때 앞으로 한 번 씩 뱀 꼬리 를 튕 기 고 그 반환 값 을 이용 해 이 점 을 검은색 으로 다시 그립 니 다.
마지막
setTimeout 은 현재 함 수 를 순환 적 으로 실행 하고 실행 주 기 를 설정 하여 뱀의 이동 속 도 를 조절 합 니 다.여기까지 와 서 우 리 는 이 뱀 이 이미 움 직 일 수 있다 는 것 을 발견 했다. 게다가 키보드 의 조작 이 완성 되 었 다.
document.onkeydown = function(evt) {
direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;};이 함 수 를 키보드 이벤트 에 연결 합 니 다.
evt || event 용법 의 원인 은 여기 서 상세 한 설명 이 있 습 니 다. 호 환 ie 을 위 한 것 입 니 다.세 개의 연산 자
? 앞의 판단 문 구 는 두 부분 으로 나 눌 수 있다.snake[1] - snake[0] 의 값 은 -direction 일 것 이다. 이치 에 따 르 면 여기 서 -direction 는 원래 의 효과 와 같 아야 한다. 그런데 왜 이렇게 하지 않 았 을 까? 이렇게 쓰 면 게이머 들 은 한 함수 주기 에 여러 번 direction 의 값 을 바 꾸 고 마지막 에 direction 과 현재 의 진정한 운동 방향 이 일치 하지 않 아 게임 이 무 너 질 수 있 기 때문이다.== 뒤쪽, [-1, -20, 1, 20][(evt || event).keyCode - 37] 가운데 앞쪽 [] 은 하나의 배열 이 고 뒤쪽 [] 은 색인 을 취하 고 왼쪽 위, 오른쪽 아래 네 개의 키 keyCode 는 각각 37, 38, 39, 40 이 며 계 산 된 색인 은 0, 1, 2, 3 으로 방향 키 와 direction 의 수치 가 대응 하도록 한다.여기 서 교묘 한 점 은 누 른 버튼 이 방향 키 가 아니라면 배열 에서 대응 하 는 값 을 얻 지 못 하고 되 돌아 오 는 것 이다 undefine.이때 이후 || 연산 자 때문에 n 원래 값 을 얻는다.세 개의 연산 자 를 사용 하여 버튼 방향 이 반대 방향 이 아니라면 값 을 업데이트
direction 합 니 다.이상 은 기본 적 인 것들 이지 만 재 미 있 을 것 같 아 요.잘못 이해 한 것 이 있 으 면 지적 하고 함께 발전 하 기 를 바란다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
