javascript 뱀 탐식 게임 실현

11539 단어 js탐식 사
js 대상 을 대상 으로 프로 그래 밍 한 탐식 뱀 을 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
우선:대상 을 대상 으로 프로 그래 밍 을 하려 면 프로젝트 의 구체 적 인 대상 을 찾 아야 합 니 다.여 기 는(음식),뱀(snake)이 고 게임 자체(game)도 게임 자 체 를 대상 으로 하지 않 고 논리 적 으로 표현 하면 됩 니 다.
이어서 각 대상 의 구체 적 인 속성 과 방법 을 분석한다.
1)food 대상:속성:위치,크기,색상;방법 은 페이지 에 렌 더 링 하여 무 작위 로 서로 다른 위치 에서 생 성 합 니 다.
2)snake 대상:속성 은 위치,크기,총 절 수(점수 계산 이 편리 함),색상 이 있 습 니 다.방법 은 페이지 에 렌 더 링 하고 이동(이동 과정 에서 다른 것 을 판단)합 니 다.
3)game 대상:게임 논리의 작성;
ok.두 드 리 기:
1)간단 한 정적 페이지 작성(지도)
(1)html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="css/index.css" >
 <script src="js/food.js"></script>
 <script src="js/snake.js"></script>
 <script src="js/game.js"></script>
 <script src="js/main.js"></script>
 <title>   </title>
</head>
<body>
 <div class="map"></div>
</body>
</html>
(2)css(테두리 로 제 한 된 경계 로 한다 면 box-sizing 속성 은 없어 서 는 안 됩 니 다(음식 과 뱀 머리 좌표 사이 에 오차 가 발생 하지 않도록)

* {
 margin: 0;
 padding: 0;
}

.map {
 position: relative;
 height: 600px;
 width: 800px;
 border: 1px solid #333;
 margin: 0 auto;
 /*          */
 box-sizing: border-box;
}
2)food 대상 작성(자세 한 설명 포함)

//cwen        
window.addEventListener('load', function() {

 //cwen     ,         ,      
 (function() {

 //cwen      
 //    
 var elements = [];
 //cwen  
 function Food(options) {
  options = options || {};
  this.x = options.x || 0;
  this.y = options.y || 0;
  this.width = options.width || 20;
  this.height = options.height || 20;
  this.color = options.color || 'yellow';
 }


 //cwen     
 function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 //cwen  
 Food.prototype.render = function(map) {
  //       
  remove();
  //todo    div  
  var div = document.createElement('div');
  map.appendChild(div);
  // div     
  elements.push(div);
  //todo    x,y  (     )----- map       
  // !   = Math.floor(Math.random() *        +        )
  this.x = getRandom(0, map.offsetWidth / this.width - 1) * this.width;
  this.y = getRandom(0, map.offsetHeight / this.height - 1) * this.height;
  div.style.position = 'absolute';
  div.style.left = this.x + 'px';
  div.style.top = this.y + 'px';
  div.style.width = this.width + 'px';
  div.style.height = this.height + 'px';
  div.style.backgroundColor = this.color;
 }

 function remove() {
  //      ,            
  for (var i = elements.length - 1; i >= 0; i--) {
  //      div
  elements[i].parentNode.removeChild(elements[i]);
  //        1)     ,2)     
  elements.splice(i, 1);
  }
 }

 // Food    
 window.Food = Food;
 })()
 
 //cwen  
 // var map = document.querySelector('.map');
 // var options = { x: 20, y: 20, width: 30, height: 30, color: 'green' };
 // //todo         food
 // var food = new Food();
 // food.render(map);
})
3)snake 대상 작성()

window.addEventListener('load', function() {
 (function() {
 //       
 var elements = [];
 //cwen      ,       ,      
 function Snake(options) {
  options = options || {};
  //  ( )     
  this.width = options.width || 20;
  this.height = options.height || 20;
  //cwen     (  )
  this.mark = options.mark || 0;
  //       
  this.direction = options.direction || 'right';
  //     (  )
  this.kont = [{ x: 3, y: 2, color: 'red' }, { x: 2, y: 2, color: 'black' }, { x: 1, y: 2, color: 'black' }];
 }

 //cwen    
 Snake.prototype.render = function(map) {
  //      
  remove();
  //         (  )
  for (var i = 0, len = this.kont.length; i < len; i++) {
  var obj = this.kont[i];
  var div = document.createElement('div');
  map.appendChild(div);
  //        
  elements.push(div);
  //    
  div.style.position = 'absolute';
  div.style.width = this.width + 'px';
  div.style.height = this.height + 'px';
  div.style.left = obj.x * this.width + 'px';
  div.style.top = obj.y * this.height + 'px';
  div.style.backgroundColor = obj.color;
  }
 }

 //cwen        
 //todo  food,map  game   move          
 Snake.prototype.move = function(food, map) {
  //       (             )
  for (var i = this.kont.length - 1; i > 0; i--) {
  this.kont[i].x = this.kont[i - 1].x;
  this.kont[i].y = this.kont[i - 1].y;
  }

  //         ,        
  var head = this.kont[0];
  switch (this.direction) {
  case 'right':
   head.x += 1;
   break;
  case 'left':
   head.x -= 1;
   break;
  case 'top':
   head.y -= 1;
   break;
  case 'bottom':
   head.y += 1;
   break;
  }


  //         
  // cwen             
  var headX = head.x * this.width;
  var headY = head.y * this.height;
  if (headX == food.x && headY == food.y) {
  //1,    (        ,           )
  var last = this.kont[this.kont.length - 1];
  this.kont.push({ x: last.x, y: last.y, color: last.color });
  //cwen        (  )
  var mark = this.mark++;
  //2,      
  food.render(map);
  }
 }


 //      
 function remove() {
  for (var i = elements.length - 1; i >= 0; i--) {
  elements[i].parentNode.removeChild(elements[i]);
  elements.splice(i, 1);
  }
 }

 // Snake        
 window.Snake = Snake;
 })()
 //  
 // var map = document.querySelector('.map');
 // var snake = new Snake();
 // snake.render(map);
})
4)game 대상 작성,그 중 하 나 는 무적 버 전(자세 한 설명 포함)

window.addEventListener('load', function() {
 (function() {
 //      this  
 var that;

 function Game(map) {
  // var options = { x: 20, y: 20, width: 30, height: 30, color: 'green' };
  this.food = new Food();
  this.snake = new Snake();
  this.map = map;
  that = this;
 }
 //cwen  
 Game.prototype.start = function() {
  // 1.          
  this.food.render(this.map);
  this.snake.render(this.map);
  // 2.      
  //     
  //      
  // runSnake();
  //todo    (    ,    )
  goInput();
  //          
  //! keydown();
  //         
  // snake.js   
 }

 function goInput() {
  var it = prompt('try:
1
( )
') if (it == 1) { runSnake(); keydown(); } else if (it == ' ') { runSnake1(); keydown1(); } else { alert('you input could not be found!!!'); goInput(); } } // function runSnake() { var timeId = setInterval(function() { // var a = mark; that.snake.move(that.food, that.map); that.snake.render(that.map); // var maxX = (that.map.offsetWidth) / that.snake.width; var maxY = (that.map.offsetHeight) / that.snake.height; var headX = that.snake.kont[0].x; var headY = that.snake.kont[0].y; if (headX < 0 || headX >= maxX) { alert('Game Over ' + ' ' + that.snake.mark); clearInterval(timeId); } else if (headY < 0 || headY >= maxY) { alert('Game Over ' + ' ' + that.snake.mark); clearInterval(timeId); } }, 150) } // function runSnake1() { var timeId1 = setInterval(function() { that.snake.move(that.food, that.map); that.snake.render(that.map); // var maxX = (that.map.offsetWidth - that.snake.width) / that.snake.width; var maxY = (that.map.offsetHeight - that.snake.height) / that.snake.height; var headX = that.snake.kont[0].x; var headY = that.snake.kont[0].y; if (headX < 0) { that.snake.kont[0].x = (that.map.offsetWidth - that.snake.width) / that.snake.width; } else if (headX > maxX) { that.snake.kont[0].x = 0; } else if (headY < 0) { that.snake.kont[0].y = (that.map.offsetHeight - that.snake.height) / that.snake.height; } else if (headY > maxY) { that.snake.kont[0].y = 0; } }, 50) } // function keydown() { document.addEventListener('keydown', function(e) { // 37left,38top,39right,40bottom // console.log(e.keyCode); // if (e.keyCode == 37 && that.snake.direction != 'right') { that.snake.direction = 'left'; } else if (e.keyCode == 38 && that.snake.direction != 'bottom') { that.snake.direction = 'top'; } else if (e.keyCode == 39 && that.snake.direction != 'left') { that.snake.direction = 'right'; } else if (e.keyCode == 40 && that.snake.direction != 'top') { that.snake.direction = 'bottom'; } }); } function keydown1() { document.addEventListener('keydown', function(e) { // 37left,38top,39right,40bottom // console.log(e.keyCode); // if (e.keyCode == 37) { that.snake.direction = 'left'; } else if (e.keyCode == 38) { that.snake.direction = 'top'; } else if (e.keyCode == 39) { that.snake.direction = 'right'; } else if (e.keyCode == 40) { that.snake.direction = 'bottom'; } }); } // Game window.Game = Game; })() })
5)게임 메 인 오픈

window.addEventListener('load', function() {
 (function(window, undefind) {
 //  
 var map = document.querySelector('.map');
 var game = new Game(map);
 game.start();

 })(window, undefined)
})
last but not least
*모든 js 파일 을 같은 js 파일 에 쓰 면 로드 속 도 를 크게 높 일 수 있 습 니 다.모든 함수 가 즉시 실행 되 기 전에';'를 추가 하 는 것 을 주의 하 세 요.실수 하지 않도록.
편집장 은 또 모 두 를 위해 멋 진 주 제 를 준비 했다.javascript 고전 게임 모음
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기