JavaScript 탐식 뱀 작은 구성 요소 인 스 턴 스 코드

17120 단어 js탐식 사게임.
1.앞 에 써 주세요.
보아하니《JavsScript 고급 프로 그래 밍》은 작은 demo 가 자신의 손 을 연습 하고 싶 어서 뱀 을 탐식 하 는 게임 을 선택 한 것 같다.예전 에는 c\#로 썼 기 때문에 탐식 뱀 을 한 종류 에 쓴 다음 에 작은 방법 으로 나 누 어 제공 해 야 할 방법 만 제공 합 니 다.이렇게 하면 뱀 을 탐식 하 는 것 을 하나의 모듈 로 삼 아 어느 곳 에서 든 재 활용 할 수 있다.그러나 js 로 작성 할 때 js 언어의 특성 을 잘 이용 하여 모듈 화 프로 그래 밍 을 할 수 없 기 때문에 1 판 의 실현 은 완전히 프로 세 스 를 향 한 방식 으로 함수 에 필요 한 변 수 를 전역 변수 로 설명 합 니 다.이렇게 하면 기능 도 실현 할 수 있 지만 재 활용 이 불가능 하고 가장 많은 최상 위 변 수 를 정의 하여 전체 변 수 를 오염 시 켰 다.다 쓴 후에 자신 이 쓴 것 을 다시 한 번 밀봉 하여 제공 해 야 할 변수 나 기능 함수 인터페이스 만 제공 하려 고 합 니 다.많은 자 료 를 조사 하여 js 의 포장 에 대해 폐쇄 적 인 방식 으로 실현 할 수 있다.함수 내부 에서 부분 변수 와 패 킷 함 수 를 설명 함으로써 유형의 개인 변수 와 함수 로 하고 this 를 통 해 대상 에 게 개발 해 야 할 인 터 페 이 스 를 제공 합 니 다.
2 뱀 을 탐식 하 는 구성 요소 의 사용
2.1 초급 예시
예제 코드 1 은 다음 과 같다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>     </title>
</head>
<body>
 <canvas width="600" height="600" id="gameScense"></canvas>
</body>
<script src="SnakeGame.js"></script>
<script>
 var snakeGame = new SnakeGame("gameScense",{
 });
 snakeGame.startGame();
</script>
</html>
먼저 Snake Game.js 구성 요 소 를 도입 한 다음 에 Snake Game 대상 을 예화 하고 Snake Game 구조 함수 에 두 개의 인 자 를 전달 합 니 다.첫 번 째 매개 변 수 는 canvas 의 id 이 고 두 번 째 매개 변수 게임 설정 대상 입 니 다.비어 있 으 면 기본 설정 을 사용 합 니 다.마지막 으로 대상 의 startGame()방법 을 호출 하면 뱀 을 탐식 하 는 논 리 를 실현 할 수 있다.기본 방향 제어 키 는 상하 좌우 버튼 이 고 일시 정 지 는 빈 칸 입 니 다.효 과 는 다음 과 같 습 니 다.

우 리 는 실례 화 할 때 들 어 오 는 설정 대상 을 변경 함으로써 게임 에 대한 더 많은 제 어 를 실현 할 수 있다.
 예제 코드 2:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>     </title>
</head>
<body>
 <canvas width="600" height="600" id="gameScense"></canvas>
</body>
<script src="SnakeGame.js"></script>
<script>
 var snakeGame = new SnakeGame("gameScense",{
  snakeColor:"red",
  foodColor:"green",
  scenseColor:"blue",
  directionKey:[68,83,65,87],
 });
 snakeGame.startGame();
</script>
</html>
매개 변수의 이름 을 통 해 뱀,음식,게임 배경의 색깔 을 설정 하고 게임 의 방향 키 를 제어 할 수 있 습 니 다.방향 순 서 를[왼쪽,아래,오른쪽,위]로 설정 합 니 다.효 과 는 다음 과 같 습 니 다:

물론 더 많은 설정 이 있 습 니 다.점수 가 바 뀐 리 셋 함수 와 게임 이 끝 날 때의 리 셋 함수 등 도 정의 할 수 있다.설정 인자 와 Snake Game 대상 이 공유 하 는 방법 을 소개 합 니 다.
2.2 공유 방법
•startGame():게임 을 시작 합 니 다.이 방법 에 서 는 각종 설정 을 초기 화 합 니 다.예 를 들 어 점수,뱀 몸,속도 등 을 리 셋 합 니 다.
•changeGames Status():게임 상 태 를 바 꾸 는 것,즉 일시 정지 와 시작 입 니 다.Snake Game 대상 에는 게임 의 상태 변수 로 개인 변수 가 있 습 니 다.
2.3 게임 매개 변 수 를 설정 하 는 대상 gameConfigObj 속성,
gameConfigObj 대상 은 모두 10 개의 속성,3 개의 반전 함수 가 있어 야 합 니 다.
속성
•size:뱀 덩어리 와 음식의 크기,기본 20
•rowCount:줄,기본 30 줄
•colCount:열,기본 30 열
•snakeColor:뱀 몸 색깔,기본 green
•foodColor:음식 색깔,기본 노란색
•scenseColor:게임 장면 배경 색,묵 블랙
•directionKey:방향 키,기본[39,40,37,38]상하 좌우
•pasueKey:일시 정지 키,기본 32,스페이스 바
•levelCount:속도 등급 제어,기본 10.
•curSpeed:초기 속도,기본 200 밀리초
리 턴 함수
•onCountChange:이벤트,모든 음식,점수 가 바 뀌 고 이 방법 을 호출 합 니 다.매개 변수(count)가 있 습 니 다.
•onGamePause:이벤트,게임 상태 가 바 뀌 었 을 때 이 방법 을 호출 합 니 다.매개 변수 1 을 가지 고 있 습 니 다.일시 정지,0 을 의미 합 니 다.게임 이 진행 되 고 있 음 을 의미 합 니 다.
•onGameover:이벤트,게임 이 끝 날 때 이 방법 을 사용 합 니 다.
2.4 사용 진급
위의 속성 을 통 해 우 리 는 상호작용 이 더욱 강 화 된 프로그램 을 설계 할 수 있다.코드 는 다음 과 같 습 니 다.
 예시 3

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>     </title>
 <style type="text/css">
  *{
   margin:0px;
   padding:0px;
  }
  #gamebd{
   width:850px;
   margin:50px auto;
  }
  #gameScense{
   background-color:green;
   float:left;
  }
  #gameSet{
   margin-left:10px;
   float:left;
  }
  .gameBoxStyle{
   margin-bottom:7px;
   padding:5px 10px;
  }
  .gameBoxStyle h3{
   margin-bottom:7px;
  }
  .gameBoxStyle p{
   line-height: 1.7em;
  }
  .gameBoxStyle input{
   margin-top:7px;
   background-color: white;
   border:1px gray solid;
   padding:3px 9px;
   margin-right:9px;
  }
  .gameBoxStyle input[type=text]{
   width:90px;
  }
  .gameBoxStyle input:hover{
   background-color: #e2fff2;
  }
  .gameBoxStyle #txtValue{
   color:red;
  }
 </style>
</head>
<body>
<div id="gamebd">
 <canvas id="gameScense" width="600" height="600">
 </canvas>
 <div id="gameSet">
  <div id="gameControl" class="gameBoxStyle">
   <h3>    </h3>
   <p>   ： , , , </p>
   <p>  /  ：  </p>
  </div>
  <div id="gameStatus" class="gameBoxStyle">
   <h3>    </h3>
   <p>   ：<input type="text" placeholder="     :" id="txtUserName" value="  123"/> </p>
   <p>    1  ：<span id="txtValue">0</span></p>
   <input type="button" value="    " id="btnStart"/>
   <input type="button" value="  " id="btnPause"/>
  </div>
  <div id="game" class="gameBoxStyle">
   <h3>    </h3>
   <a href="#" rel="external nofollow" rel="external nofollow" >      </a>
  </div>
 </div>
</div>
<script src="js/SnakeGame.js"></script>
</body>
<script src="SnakeGame.js"></script>
<script>
 var btnStart=document.getElementById("btnStart");
 var btnPasue=document.getElementById("btnPause");
 var gameSnake = new SnakeGame("gameScense",{
  snakeColor:"red",
  onCountChange:function(count){
   var txtScore=document.getElementById("txtValue");
   txtScore.innerText=count.toString( );
   txtScore=null;
  },
  onGamePause:function(status){
   if(status){
    btnPasue.value = "  ";
   }else {
    btnPasue.value = "  "
   }
  },
  onGameOver:function (status) {
   alert("    ");
  }
 });
 btnStart.onclick=function(event){
  if(checkUserName()){
   gameSnake.startGame();
   btnStart.blur();
  }
 }
 btnPasue.onclick=function(event) {
  gameSnake.changeGameStatus();
  btnStart.blur();
 }
 function checkUserName(){
  var txtUserName = document.getElementById("txtUserName");
  if(txtUserName.value.length==0){
   alert("       ");
   return false;
  }else {
   return true;
  }
 }
</script>
</html>
위의 코드 는 OnChangeCount,onGamePause,onGameOver,세 개의 반전 함 수 를 설정 하여 인터페이스 와 구성 요소 의 상호작용 을 실현 합 니 다.효 과 는 다음 과 같 습 니 다:

'자 바스 크 립 트 고급 프로 그래 밍'이라는 책 에서 모듈 모드 를 말 하지만,이 모드 는 단일 모드,즉 패 키 지 를 닫 고 마지막 으로 글자 의 대상 을 되 돌려 주 는 것 이다.하지만 저 는 한 페이지 에서 뱀 을 탐식 하 는 두 개의 창 을 동시에 열 수 있어 야 합 니 다.두 게임 은 서로 다른 방향 키 와 버튼 을 설정 하여 두 사람 이 동시에 할 수 있 도록 해 야 합 니 다.그래서 Snake Game 구성 요 소 를 실현 할 때 더 글 러 스 가 말 한 모듈 모드 를 사용 하지 않 았 습 니 다.한 페이지 에서 두 사람 이 동시에 게임 을 할 수 있 는 방법 을 보 여 준다.코드 는 다음 과 같 습 니 다: 
예시
우선 html 파일 을 만 듭 니 다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Jaume's   </title>
 <link rel="stylesheet" href="css/gameStyle.css" rel="external nofollow" >
</head>
<body>
<div id="gamebd">
 <canvas id="gameScense" width="600" height="600">
 </canvas>
 <canvas id="gameScense1" width="600" height="600" style="background-color: black">
 </canvas>
 <div id="gameSet">
  <div id="gameControl" class="gameBoxStyle">
   <h3>    </h3>
   <p>   ： , , , </p>
   <p>  /  ：  </p>
  </div>
  <div id="gameStatus" class="gameBoxStyle">
   <h3>    </h3>
   <p>    1  ：<span id="txtValue">0</span></p>
   <p>    2  ：<span id="txtValue1">0</span></p>
   <input type="button" value="    " id="btnStart"/>
  </div>
  <div id="game" class="gameBoxStyle">
   <h3>    </h3>
   <a href="#" rel="external nofollow" rel="external nofollow" >      </a>
  </div>
 </div>
</div>
<script src="js/SnakeGame.js"></script>
<script src="js/UIScript.js"></script>
</body>
</html>
스타일 파일 은 다음 과 같 습 니 다:

*{
 margin:0px;
 padding:0px;
}
#gamebd{
 /*width:850px;*/
 /*margin:50px auto;*/
 width:100%;
}
#gameScense{
 background-color:green;
 float:left;
}
#gameSet{
 margin-left:10px;
 float:left;
}
.gameBoxStyle{
 margin-bottom:7px;
 padding:5px 10px;
}
.gameBoxStyle h3{
 margin-bottom:7px;
}
.gameBoxStyle p{
 line-height: 1.7em;
}
.gameBoxStyle input{
 margin-top:7px;
 background-color: white;
 border:1px gray solid;
 padding:3px 9px;
 margin-right:9px;
}
.gameBoxStyle input[type=text]{
 width:90px;
}
.gameBoxStyle input:hover{
 background-color: #e2fff2;
}
.gameBoxStyle #txtValue{
 color:red;
}
html 에 두 개의 파일 을 끌 어 들 였 습 니 다.하 나 는 뱀 을 탐식 하 는 구성 요소 이 고 다른 하 나 는 UIScript.js 입 니 다.그 중의 코드 는 다음 과 같 습 니 다.

/**
 * Created by tjm on 8/16/2017.
 */
var btnStart=document.getElementById("btnStart");
var gameSnake = new SnakeGame("gameScense",{
 snakeColor:"red",
 directionKey:[68,83,65,87],
 pauseKey:81,
 onCountChange:function(count){
  var txtScore=document.getElementById("txtValue");
  txtScore.innerText=count.toString( );
  txtScore=null;
 },
 onGameOver:function (status) {
  alert("    ");
 }
});
var gameSnake1 = new SnakeGame("gameScense1",{
 snakeColor:"green",
 size:20,
 onCountChange:function(count){
  var txtScore=document.getElementById("txtValue1");
  txtScore.innerText=count.toString();
  txtScore=null;
 },
 onGameOver:function (status) {
  alert("    ");
 }
});
btnStart.onclick=function(event){
  gameSnake.startGame();
  gameSnake1.startGame();
  btnStart.blur();
}
두 개의 Snake Game 대상 을 예화 합 니 다.한 대상 은 기본 상하 좌우 키 와 스페이스 바 를 방향 키 와 일시 정지 키 로 사용 하고 다른 하 나 는 W,A,S,D 와 Q 를 방향 키 와 일시 정지 키 로 사용 합 니 다.효 과 는 다음 과 같 습 니 다:

흠,그래,완벽 하 게 이 루어 졌 다.Snake Game 이라는 구성 요 소 를 사용 하여 뱀 을 게 걸 스 럽 게 먹 는 게임 을 만 드 는 것 은 이렇게 간단 합 니 다.다음은 구성 요소 의 실현 방식 을 간단하게 소개 합 니 다.
3 탐식 뱀 모듈 실현 방식
지난 절 에서 언급 했 듯 이 콜 라 스 의 디자인 모델 을 사용 하지 않 았 고 다음은 뱀 을 탐식 하 는 디자인 구 조 를 제시 했다.구체 적 인 소스 코드 는 뒤의 링크 에서 다운로드 할 수 있 습 니 다.코드 는 다음 과 같 습 니 다:

/**
 * Created by tjm on 8/18/2017.
 */
var SnakeGame = function () {
 /*        */
 function SnakeBlock(row,col){
  this.row=row;
  this.col=col;
 }
 SnakeBlock.prototype.draw = function(graphic,color,size){
  graphic.fillStyle=color;
  graphic.fillRect(size*this.col,size*this.row,size-2,size-2);
 }
 SnakeBlock.prototype.clearDraw = function(graphic,color,size){
  graphic.fillStyle=color;
  graphic.fillRect(size*this.col,size*this.row,size,size);
 }
 SnakeBlock.prototype.equal = function(snakeBlock){
  if(snakeBlock.row==this.row && snakeBlock.col==this.col){
   return true;
  }else{
   return false;
  }
 }
 /*      */
 function SnakeGame(gameScenseId, gameConfigObj) {
  //     
  var gameScense = document.getElementById(gameScenseId);
  var graphic = gameScense.getContext("2d");
  var count = 0;
  var snake;
  var curFood;
  var runId;
  var isMoved = false;//     ，              。
  var gameStatus = false;
  var curDirection = 1;
  var size = gameConfigObj.size || 20;
  var rowCount = gameConfigObj.rowCount || 30;
  var colCount = gameConfigObj.colCount || 30;
  var snakeColor = gameConfigObj.snakeColor || "green";
  var foodColor = gameConfigObj.foodColor || "yellow";
  var scenseColor = gameConfigObj.scenseColor || "black";
  var directionKey = gameConfigObj.directionKey || [39, 40, 37, 38];
  var pauseKey = gameConfigObj.pauseKey || 32;
  var levelCount = gameConfigObj.levelCount || 10;
  var curSpeed = gameConfigObj.curSpeed || 200;
  //    
  var onCountChange = gameConfigObj.onCountChange || null; //      
  var onGamePause = gameConfigObj.onGamePause || null; //      
  var onGameOver = gameConfigObj.onGameOver || null;
  //  
  if(gameScense.width != size*rowCount || gameScense.height != size*colCount){
   throw "           *    ";
  }
  //    
  this.startGame = startGame;
  this.changeGameStatus = changeGameStatus;
  //   dom     
  var preFunc = document.onkeydown;
  document.onkeydown = function (e) {
   var key = (e || event).keyCode;
   handleKeyInput(key);
   if (typeof preFunc == "function") {
    preFunc(e);
   }
  }
  //    
  /*     */
  function initSnake(){
   ・・・
  }
  /*       */
  function initScense(){
   ・・・
  }
  /*    */
  function genFood(){
   ・・・
  }
  /*   */
  function eatFood(snakeHead){
   ・・・
  }
  /*        */
  function gameOver(){
   ・・・
  }
  /*   */
  function snakeMove(){
   ・・・
  }
  function changeSpeed(){
   ・・・
  }
  function handleKeyInput(key){
   ・・・
  }
  function initGame(){
   ・・・
  }
  function triggerEvent(callback,argument){
   ・・・
  }
  function runGame(){
   ・・・
  }
  function pauseGame() {
   ・・・
  }
  function changeGameStatus(){
   ・・・
  }
  function startGame(){
   ・・・
  }
 }
 return SnakeGame; //            
}();
위 에 매우 중요 한 부분 이 있 는데 바로 키보드 등록 코드 를 따로 열거 하여 분석 하 는 것 이다.

var preFunc = document.onkeydown;
  document.onkeydown = function (e) {
   var key = (e || event).keyCode;
   handleKeyInput(key);
   if (typeof preFunc == "function") {
    preFunc(e);
   }
  }
이 세그먼트 코드 의 논 리 는 document 에 onkeydown 이벤트 가 등록 되 어 있 는 지 여 부 를 먼저 판단 하고 이 사건 이 등록 되 어 있 으 면 인 용 된 이벤트 처리 프로그램 을 저장 한 다음 에 onkeydown 이벤트 프로그램 을 리 셋 한 다음 에 새로운 이벤트 처리 프로그램 에서 이전 이벤트 처리 프로그램 을 호출 하여 이벤트 가 발생 한 후에 모든 감청 프로그램 을 호출 하 는 것 입 니 다.직접 덮어 쓰 는 게 아니 라
또한 뱀 을 게 걸 스 럽 게 먹 는 디자인 논리 에 대해 저 는 다른 글 을 참고 할 수 있 습 니 다.개인 적 으로 상세 하 게 말 했다 고 생각 합 니 다.글:콘 솔 을 바탕 으로 뱀 을 게 걸 스 럽 게 먹 는 게임 을 실현 합 니 다.
3 소결
이번 탐식 뱀 구성 요소 의 디자인 을 통 해 js 의 모듈 화 디자인 에 대해 조금 알 게 되 었 습 니 다.그러나 저 는 앞에서 실현 한 탐식 뱀 모듈 에 어떤 결함 이 있 는 지 모 르 겠 습 니 다.신 이 이 글 을 보고 지 도 를 해 주 기 를 바 랍 니 다.물론 이 구성 요 소 는 게임 의 사각형 을 그림 으로 바 꾸 는 등 한층 더 확장 할 수 있 습 니 다.관심 있 는 것 은 아래 링크 에서 다운로드 할 수 있 습 니 다.변경 후 공유 하 는 것 을 잊 지 마 세 요.
원본 다운로드 링크:https://github.com/StartAction/SnakeGame
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 자 바스 크 립 트 가 뱀 을 탐식 하 는 작은 구성 요소 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다!
jQuery 표 동결 표시 줄 효과 구현
React Native 환경 구축 강좌

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage