javascript 뱀 탐식 연습 실현

6410 단어 js뱀을 탐내다
본고의 실례는 여러분에게 js가 뱀을 탐식하는 구체적인 코드를 공유하여 참고하도록 하였으며, 구체적인 내용은 다음과 같다.
게임 사고방식:
  • 네모난 블록, 제어 단추(showBlock)를 생성합니다
  • 네모난 블록이 이동합니다(시작을 클릭하면 앞의 네모난 블록을 계속 만들고 제거하여 대기열이 먼저 나가는 데 사용)
  • 이동 제어(doUp\doDown\doLeft\doRight, 키보드 제어 추가)
  • 음식 네모난 덩어리(generate Food)가 생성된다
  • 음식을 먹으면 길어진다(네모난 위치와 동시에 음식을 먹는다)
  • 벽에 부딪히고 자신의 게임이 끝났다고 판단한다
  • 포인트 설정
    • 
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>

<body>
 <style>
 body {
  margin: 0;
  padding: 0;
 }

 .content {
  width: 800px;
  height: 400px;
  background-color: gray;
  display: absolute;

 }
 </style>

 <div id="content" class="content">
 </div>
 <button onclick="start()"> </button>
 <button onclick="doUp()"> </button>
 <button onclick="doDown()"> </button>
 <button onclick="doLeft()"> </button>
 <button onclick="doRight()"> </button>
 <div id="score">0</div>

 <script>
 // 
 var snackBlock = {};
 snackBlock.top = 20;
 snackBlock.left = 20;
 var firstDiv = showBlock(snackBlock.left, snackBlock.top, "red");
 var snackDivArray = [];// 
 snackDivArray.push(firstDiv);

 var left = 1, right = 2, up = 3, down = 4;
 var direction = right;
 var food = generateFood();// 
 var hasEat = false;
 var score = 0;


 function generateFood() {

  var left = getRandomNum(39);
  var top = getRandomNum(19);
  var foodBlock = showBlock(left, top, "pink");
  foodBlock.left = left;
  foodBlock.top = top;
  return foodBlock;
 }

 function getRandomNum(max) {
  return Math.round(Math.random() * max) * 20;
 }

 function start() {
  var interval = setInterval(function () {
  var newBlock = {};
  switch (direction) {
   case up:
   newBlock.top = snackBlock.top - 20;
   newBlock.left = snackBlock.left;
   break;
   case down:
   newBlock.top = snackBlock.top + 20;
   newBlock.left = snackBlock.left;
   break;
   case left:
   newBlock.top = snackBlock.top;
   newBlock.left = snackBlock.left - 20;
   break;
   case right:
   newBlock.top = snackBlock.top;
   newBlock.left = snackBlock.left + 20;
   break;

  }


  var currentLeft = newBlock.left;
  var currentTop = newBlock.top;
  var eat = false;

  // 
  if (currentLeft == food.left && currentTop == food.top) {
   removeBlock(food);
   food = generateFood();
   eat = true;
   hasEat = true;
   score += 10;// 10 
   document.getElementById("score").innerHTML = score;// div
  }

  snackBlock = newBlock;
  // 
  if (currentLeft < 0 || currentLeft >= 800 || currentTop < 0 || currentTop >= 400) {
   alert("game over!");
   clearInterval(interval);
   return;
  }
  if (eat == false) {
   // 
   removeBlock(snackDivArray.shift(div));
  }
  // 
  snackDivArray.forEach(function (item, index, array) {
   if (item.top == currentTop && item.left == currentLeft) {
   alert("game over!");
   clearInterval(interval);
   return;
   }
  });

  // 
  var div = showBlock(newBlock.left, newBlock.top, "red");
  div.left = newBlock.left;
  div.top = newBlock.top;
  snackDivArray.push(div);

  }, 300);

 }

 // 
 function doUp() {
  if (direction == down && hasEat) {
  return;
  }
  direction = up;
 }
 function doDown() {
  if (direction == up && hasEat) {
  return;
  }
  direction = down;
 }
 function doRight() {
  if (direction == left && hasEat) {
  return;
  }
  direction = right;
 }
 function doLeft() {
  if (direction == right && hasEat) {
  return;
  }
  direction = left;
 }

 function showBlock(left, top, color) {// 
  var content = document.getElementById("content");
  var snackDiv = document.createElement("div");
  snackDiv.style.width = "20px";
  snackDiv.style.height = "20px";
  snackDiv.style.left = left + "px";
  snackDiv.style.top = top + "px";
  snackDiv.style.background = color;
  snackDiv.style.position = "absolute";
  content.appendChild(snackDiv);
  return snackDiv;
 }
 function removeBlock(div) {// 
  div.parentNode.removeChild(div);
 }
 // 
 document.onkeydown = function (e) {
  if (e && e.keyCode == 38) {
  doUp();
  } else if (e && e.keyCode == 40) {
  doDown();
  } else if (e && e.keyCode == 37) {
  doLeft();
  } else if (e && e.keyCode == 39) {
  doRight();
  }
 }
 </script>
</body>

</html>
    더 많은 재미있는 고전 작은 게임이 주제를 실현하여 여러분에게 공유합니다.
    C++ 클래식 게임 요약
    python 클래식 게임 총집합
    python 러시아 블록 게임 집합
    JavaScript 클래식 게임은 끊임없이 진행됩니다.
    java 클래식 게임 요약
    javascript 클래식 게임 총집합
    이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.
    [프로그래머스] Lv3 멀리 뛰기
    원생 js 랜덤 출석체크 실현

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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