(요즘 디자인 패턴에 좀 푹 빠져서 순수 js만 보면 좀 지루하네요 -_-. 그래서 재미를 더하려고 재미있는 글을 썼습니다)
이제 캔버스는 새로운 것은 아니지만 일상 업무에서 흔히 사용되지 않기 때문에 오늘은 간단한 캔버스 미로를 구현하는 방법을 공유하겠습니다. 이 예제는 "html5 cheats"의 두 번째 버전에서 가져온 것이며 코드가 약간 조정되었습니다.
캔버스를 이용하여 이미지 정보를 얻으려면 중간 단계가 있기 때문에 서버 환경을 이용해야 합니다. 그래서 모두가 먼저 효과를 경험할 수 있도록 먼저 샘플을 작성해서 서버에 던졌습니다. (성취감을 원동력으로 삼아보세요 ㅎㅎㅎ)
체험하려면 클릭하세요
자식 주소
텍스트이 작은 게임을 구현하는 것은 어렵지 않습니다. 미로 게임의 기본 요소를 생각해 보겠습니다.
물론 먼저 지도가 있어야 하고, 그 다음에는 움직이는 악당이 있어야 합니다. 우리는 이 두 가지를 그리기 위해 캐번을 사용합니다.
다음은 객체 이동 프로그램입니다. 이 프로그램은 주로 두 가지 측면을 포함합니다.
1. 우리가 지정한 지시에 따라 물체를 움직이게 하세요.
2. 물체가 벽에 닿거나 나가는지 감지합니다.
미로의 지도 그리기 및 움직이는 인물
지도 그리기의 주요 단계는 다음과 같습니다.
미로 지도 생성은 Google의 온라인 미로 생성기의 도움으로 얻을 수 있습니다.
악당을 그리는 경우에도 마찬가지입니다. 다만 여기서 주목해야 할 점은 나중에 모바일 충돌 감지를 해야 하기 때문에 사각형 그림을 찾아야 한다는 것입니다. 판단하기가 더 쉽습니다.
다음으로 미로와 악당을 그리는 주요 기능을 작성하겠습니다.
function drawMaze(mazeFile, StartingX, StartingY) { var imgMaze = new Image() imgMaze.onload = function () { // 캔버스 크기 조정 canvas.width = imgMaze.width canvas.height = imgMaze.height // 웃는 얼굴 그리기 var imgFace = document.getElementById(얼굴) context.drawImage(imgMaze, 0, 0) x = 시작X y = 시작Y context.drawImage(imgFace, x, y) context.Stroke() } imgMaze.src = mazeFile}mazeFile은 미로의 이미지 주소이고, StartingX 및 StartingY는 시작점의 좌표입니다. 여기서 사진을 소개하는 방법은 2가지가 있습니다. 그 이유는 악역 사진을 자주 바꾸지 않기 때문에 페이지에 직접 작성하는 방식으로 미로의 지도를 가변적으로 작성하기 위한 것입니다. js를 사용하여 직접 import하면 문제가 없습니다. 다른 부분은 상대적으로 간단하므로 다시 설명하지 않겠습니다.
이동 기능운동의 주요 원리는 다음과 같습니다.
지정된 사용자 입력(이 경우 방향 키에 응답)을 수락하고 이를 해당 이동 명령으로 변환합니다. 그런 다음 주기적으로 이동 지침을 확인하고 해당 목표 위치를 그립니다. 간단한 예를 들어보세요:
예를 들어 위쪽 방향 키를 누를 때마다 위쪽으로 이동해야 한다고 기록하고, 100ms마다 현재 이동 명령을 확인하고 이동해야 할 대상 위치를 그리는 과정을 반복합니다. 코드도 비교적 간단합니다.
// 이동 함수 function processKey(e) { dx = 0 dy = 0 // 상하좌우 방향키 감지 if (e.keyCode === 38) { dy = -1 } if (e.keyCode = == 40) { dy = 1 } if (e.keyCode === 37) { dx = -1 } if (e.keyCode === 39) { dx = 1 }}// 프레임 그리기 function drawFrame() { if (dx != 0 || dy != 0) { // context.clearRect(x,y,canvas.width,canvas.height) // 이동 궤적 컨텍스트를 그립니다. startPath(); context.fillStyle = rgb(254,244,207) context.direct(x, y, 15, 15) context.fill() x += dx y += dy // 충돌 감지 if (checkForCollision()) { x -= dx y -= dy dx = 0 dy = 0 } //악당이 이동할 위치를 그립니다. var imgFace = document.getElementById( ' 얼굴') context.drawImage(imgFace, x, y) if (canvas.height - y < 17) { // isFirst = false Alert('게임 완료를 축하합니다') return false } // 여기에서 재설정하면 비자동 이동이 됩니다. 즉, 방향 키를 누를 때마다 현재 경험 이후 한 단계만 앞으로 이동하게 됩니다. 좋지 않습니다. 지금은 재설정하지 않겠습니다./ / dx = 0 // dy = 0 } setTimeout(drawFrame, 20)}위 코드에서 이동 함수는 상대적으로 간단합니다. 프레임 그리기에서 더 중요한 함수는 충돌 감지 함수입니다. 이에 대해서는 아래에서 자세히 설명합니다.
충돌 감지객체가 벽과 충돌하는지 감지하려면 일반적으로 지도 정보를 먼저 메모리에 저장한 다음 객체를 이동할 때 현재 벽과 충돌하는지 감지해야 합니다. 그러나 우리 지도의 배경은 검은색이고 흰색 미로에서는 색상을 사용하여 충돌을 감지할 수 있습니다. 구체적인 방법은 다음과 같습니다.
현재 객체의 좌표 위치를 가져오고 캔버스를 사용하여 현재 지도에서 이 위치의 색상이 검은색인지 여부를 감지합니다. 그렇다면 벽이라고 하며 이동을 수행해서는 안 됩니다. 다음은 코드입니다.
function checkForCollision() { var imageData = context.getImageData(x - 1, y - 1, 15 + 2, 15 + 2) var 픽셀 = imageData.data for (var i = 0, len = pixel.length; i < len ; i++) { var 빨간색 = 픽셀[i], 녹색 = 픽셀[i + 1] 파란색 = 픽셀[i + 2] 알파 = 픽셀[i + 3] // 검은 벽에 부딪혔는지 확인 if (red === 0 && green === 0 && blue === 0) { return true } } return false}여기서 15는 악당의 너비입니다. 코드에서 악당의 양쪽에서 1px 범위(getImageData(x - 1, y - 1, 15 + 2, 15 + 2에 해당)를 감지합니다. 왜 여기서 +인지. 2) 검은색이면 충돌이 감지되었음을 의미합니다.
나머지코드에 답변 프롬프트 등과 같은 다른 기능을 추가했습니다. 지도를 변경하는 방법은 비교적 간단합니다. 지도에 해당하는 파일 주소, 시작점 좌표, 응답 이미지 경로 등을 객체에 저장한 다음 지도 배열을 설정하고 지도를 전환하고 클릭하면 다시 렌더링합니다. 다음과 같이 아직 최적화할 가치가 있는 영역이 있습니다.
관심 있는 학생들은 직접 구현해 볼 수 있습니다.
요약이 예제는 비교적 간단하며 js에 대한 요구 사항이 높지 않습니다.
그러다가 매번 똑같은 결말이 나오네요. 내용에 오류가 있으면 지적해 주시고, 도움이 되셨다면 좋아요와 저장 부탁드리며, 출처를 밝혀주세요. 질문이 있으시면 비공개 메시지를 통해 소통하실 수 있습니다. 홈페이지 이메일 주소가 있어요~ 빠져나갔습니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.