이 기사의 예제는 참조를 위해 JS Snake 게임의 관련 코드를 공유합니다. 특정 내용은 다음과 같습니다
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 뱀 게임 </title> <style>*{margin : 0; 패딩 : 0;} 헤더 {display : 블록; 여백 : 0 Auto; 너비 : 500px; 텍스트-정렬 : 센터;} 헤더 h1 {font-family : arial; Font-Weight : Bold;} 헤더 #NewGameButton {Display : Block; 마진 : 20px 자동; 너비 : 100px; 패딩 : 10px 10px; 배경색 : #8F7A66; 글꼴 패밀리 : arial; 색상 : 흰색; Border-Radius : 10px; 텍스트 설명 : 없음;} 헤더 #NewGameButton : 호버 {배경색 : #9F8B77;} 헤더 p {font-family : arial; 글꼴 크기 : 25px; 여백 : 20px auto;} canvas {display : block; 국경 : 중간 더블 블랙; 마진 : 4px auto;} </style> </head> <body> <Header> <H1> 뱀 게임 </h1> <a href = "javaScript : newGame ();" id = "NewGameButton"> New Game </a> <p> 점수 : <span id = "score"> 0 </span> </p> </header> <canvas id = "canvas"> 브라우저는 <code> canvas </code> 요소를 지원하지 않습니다. </canvas> <cript> var canvas = document.getElementById ( "canvas"); var ctx = canvas.getContext ( "2d"); var snake = new array (); // 대기열 dir = "오른쪽"으로 뱀 바디 var를 시뮬레이션합니다. // 뱀 머리의 방향을 제어하는 데 사용됩니다. var size = 20; // 뱀 바디 var varx = 0의 너비; // 음식의 x 좌표 var foody = 0; // 음식의 y 좌표 var headx = 0; // 뱀 헤드 var heady = 0의 x 좌표; // 뱀 머리 var maxwidth = 200의 y 좌표; // 캔버스의 높이 var maxheight = 200; // 캔버스의 너비 var time = 400; // 뱀 var 스코어의 속도 = 0; // 플레이어 점수를 계산합니다. var interval = null; canvas.width = maxwidth; canvas.height = maxheight; wind // 대기열을 사용하여 뱀 바디 DIR = "오른쪽"을 시뮬레이션합니다. // 뱀 머리의 방향을 제어하는 데 사용됩니다. headx = 0; // 뱀 머리의 x 좌표 = 0; // 뱀 헤드 스코어의 y 좌표 = 0; Window.clearInterval (간격); 간격 = null; // CANVAS CTX.CLEARRECT (0, 0, MaxWidth, MaxHeight)를 초기화합니다. // 뱀 드로우 드로 스네이크 (); // 포트 푸드 세트 푸드 (); // 뱀 간격 이동 = wind "오른쪽": headx = headx+size; break; 사례 "다운": heady = heady+size; break; 사례 "왼쪽": headx = headx-size; break; } if (headx> maxWidth-size || heady> maxHeight-size || headx <0 || heady <0) {alert ( "당신의 점수는"+score+"포인트, 계속 열심히 일하십시오! 실패의 이유 : 나는 벽으로 달려 갔다 ......"); Window.location.reload (); } for (var i = 1; i <snake.length; i ++) {if (snake [i] [0] == 뱀 [0] [0] && 뱀 [i] [1] == 뱀 [0] [1]) {알림 ( "당신의 점수는"+점수+"포인트입니다! Window.location.reload (); }} if (snake.length == maxWidth *maxHeight) {alert ( "So Awesome! ~"); Window.location.reload (); } MoveIn (headx, heady); // 하나의 그리드 이동} document.onkeydown = function (e) {// 뱀 방향 변경 var code = e.keycode -37; 스위치 (코드) {case 1 : dir = "up"; break; // 사례 2 : dir = "right"; break; // 오른쪽 사례 3 : dir = "down"; break; // dow case 0 : dir = "왼쪽"; break; // 왼쪽} // =============================================================================================================================== ============================================================== ================================================================= ============================================================== ================================================================= ================================================================= ================================================================= 뱀 .push ([headx, heady]); // 스네이크 바디 스위치 그리기 (dir) {case "up": drawbody (headx, heady + size, headx, heady + 2 * size); 부서지다; 사례 "오른쪽": DrawBody (Headx -Size, Heady, Headx -2 * 크기, Heady); 부서지다; CASE "DOWN": DrawBody (Headx, Heady -Size, Headx, Heady -2 * 크기); 부서지다; 사례 "왼쪽": DrawBody (Headx + Size, Heady, Headx + 2 * 크기, Heady); 부서지다; }} 함수 DrawBody (x1, y1, x2, y2) {ctx.fillRect (x1, y1, 크기, 크기); ctx.fillRect (x2, y2, 크기, 크기); 뱀 .push ([x1, y1]); Snake.push ([x2, y2]);} // =============================================================== =========================================================================== =========================================================================== =========================================================================== =========================================================================== =========================================================================== =========================================================================== =========================================================================== foody, size, size);} 함수 foodinsnake () {for (var i = 0; i <snake.length; i ++) {if (foodx == 뱀 [i] [0] && foody == 뱀 [i] [1]) {return true; } } 반품 거짓;} // =================================================================================================== =============================================================================================================== =============================================================================================================== ===================================================================================================================================== ctx.fillRect (x, y, size, size); // 뱀 머리를 다시 주도하십시오 // 새 뱀 헤드를 뱀 어레이에 var var newsnake = [[x, y]]; 뱀 = newsnake.concat (뱀); if (false == eatfood ()) {// 음식을 먹지 않으면 뱀 꼬리 var var snaketail = snake.pop (); // 뱀 꼬리 위치 ctx.clearrect (snaketail [0], snaketail [1], size, size); // eatfood (headx =) {foodx = geadx =) {headx =) {foodx = reme re eatfood () {headx = reme re eatfood () ctx.fillstyle = "block"; ctx.fillRect (foodx, foody, size, size); setfood (); 점수 ++; //$("#score").text(score); document.getElementById ( "score"). innerHtml = score; 진실을 반환하십시오. } return false;} </script> </html>생식 이미지 :
아이디어 :
기능 newGame () {뱀과 분수의 데이터를 재설정합니다. 명확한 간격; 캔버스를 초기화하십시오. 뱀을 그리십시오. 음식을 배치하십시오. 타이머 (setInterval)를 사용하여 뱀 (이동 함수)을 움직입니다. } 함수 move () {방향에 따라 뱀 머리의 다음 위도의 위치를 변경합니다. 게임이 끝났는지 여부와 끝의 이유 (승리 또는 패배 포함)를 결정하십시오. 뱀은 하나의 위도를 움직입니다 (Movein Function). } 키보드의 방향 키를 모니터링하고 글로벌 변수 DIR의 값을 수정합니다 (방향 저장에 사용). 기능 movein () {새 뱀 머리로 뱀 머리의 이전 위도에 위도를 추가하고 뱀 머리의 좌표를 뱀을 나타내는 배열에 첫 번째 요소로 추가합니다. 경우 (음식을 먹지 않았다) {뱀 꼬리에 위도를 삭제하고 캔버스를 변경하는 경우; }}JS의 캔버스의 너비와 높이를 설정 해야하는 경우 다른 CSS 속성을 설정하는 것과 약간 다릅니다.
canvas.width = maxwidth; canvas.height = maxheight;
편집자는 또한 모든 사람을위한 훌륭한 주제를 준비했습니다 : 클래식 JavaScript 게임의 요약
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.