Node.js에서 'Snake' 미니 game_javascript 기술 작성-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Node.js에서 'Snake' 미니 game_javascript 기술 작성

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:25 PM

js 게임 뱀

스네이크의 어린 시절 추억, 오늘 막 배웠으니 하나 만들어서 나도 배웠으니, 내가 마스터해야 할 지식:

　1. JS 기능 숙련도,

2. JS 배열 적용

3. JS와 AJAX의 작은 부분 배우기

4. JS에서 splice, Shift 등의 기능 적용

기본적으로 핵심 사항은 다음과 같습니다.
프런트 엔드 페이지는 자체적으로 레이아웃할 수 있습니다. 여기에서 나만의 레이아웃을 제공합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">                     
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>贪吃蛇</title>
  <link rel="stylesheet" type="text/css" href="./css.css">
  <script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="./js.js"></script>
</head>
<body>
  <div id="info">  
    <div id="score">0</div>
    <form action="" id="form" name="form">
      <input type="radio" name='time' value="500" checked='checked'/>简单
      <input type="radio" name='time' value="300"/>中等
      <input type="radio" name='time' value="150"/>高级
      <input type="radio" name='time' value="50"/>神速
      <input type="button" value="开始" class="button" id="start"/>
      <input type="button" value="重玩" class="button" id="res"/> 
    </form>
     
  </div>
  <div id="main">
    <div id="home">
      <!--<div style="background:url(./images/snake0.png) no-repeat;"></div>
      <div style="background:url(./images/snake1.png) no-repeat; left:20px;"></div>
      <div style="background:url(./images/snake2.png) no-repeat; left:40px;"></div>
      <div style="background:url(./images/snake3.png) no-repeat; left:60px;"></div>-->
    </div>
    <div class="wall left"></div>
    <div class="wall right"></div>
    <div class="wall top"></div>
    <div class="wall bottom"></div>
  </div>                            
</body> 
</html>

로그인 후 복사

CSS 코드는 다음과 같습니다.

*{padding: 0px; margin: 0px;font-size: 12px}
body{background: #ccc}
input.button{
  width: 60px;
  cursor: pointer;
}
#info{
  width: 540px;
  height: 30px;
  margin: 30px auto 5px;
  line-height: 30px;
}
#score{
  width: 73px;
  height: 28px;
  padding-left: 64px;
  background: url(./images/score.png) no-repeat;
  float: left;
  font-size: 14px;
  font-weight: 700;
  font-style:italic;
  font-family: '微软雅黑';
}
#form{
  float: right;
}
#form input{
  vertical-align: middle;
  margin-right: 5px;
}
#main{
  width: 540px;
  height: 500px;
  margin: 0 auto;
  position: relative;
  /*background: #71a000*/
 
}
#main div{
  width: 20px;
  height: 20px;
  position: absolute;
}
#main #home{
  width: 500px;
  height: 460px;
  left: 20px;
  top: 20px;
  position: relative;
  background: url(./images/background.jpg) no-repeat;
}
#main #home div{
  position: absolute;
}
#main div.wall{
  width: 540px;
  height: 20px;
  background: url("./images/div.jpg") repeat-x;
  position: absolute;
}
#main div.top{
  left:0px;
  top:0px;
}
 
#main div.bottom{
  left:0px;
  top:480px;
}
#main div.left{
  width: 20px;
  height: 500px;
  background: url(./images/div.jpg) repeat-y;
  left:0px;
  top:0px;
}
#main div.right{
  width: 20px;
  height: 500px;
  background: url(./images/div.jpg) repeat-y;
  left:520px;
  top:0px;
}
 
.l{
  -moz-transform:rotate(0deg);  
  -o-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);
  /* IE8+ - must be on one line, unfortunately */  
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";   
  /* IE6 and 7 */ 
  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=1,      M12=0,      M21=0,      M22=1,      SizingMethod='auto expand');
}
.t{
  -moz-transform:  rotate(90deg);   -o-transform:   rotate(90deg);   -webkit-transform: rotate(90deg);   transform:     rotate(90deg);
  /* IE8+ - must be on one line, unfortunately */  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1.8369701987210297e-16, M12=-1, M21=1, M22=-1.8369701987210297e-16, SizingMethod='auto expand')";   /* IE6 and 7 */  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=-1.8369701987210297e-16,      M12=-1,      M21=1,      M22=-1.8369701987210297e-16,      SizingMethod='auto expand');
 
}
.r{
  -moz-transform:  rotate(180deg);   -o-transform:   rotate(180deg);   -webkit-transform: rotate(180deg);   transform:     rotate(180deg);
   /* IE8+ - must be on one line, unfortunately */  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";   /* IE6 and 7 */  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=-1,      M12=1.2246467991473532e-16,      M21=-1.2246467991473532e-16,      M22=-1,      SizingMethod='auto expand');
 
}
.b{
  -moz-transform:  rotate(270deg);   -o-transform:   rotate(270deg);   -webkit-transform: rotate(270deg);   transform:     rotate(270deg);
  /* IE8+ - must be on one line, unfortunately */  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, SizingMethod='auto expand')";   /* IE6 and 7 */  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=6.123233995736766e-17,      M12=1,      M21=-1,      M22=6.123233995736766e-17,      SizingMethod='auto expand');
   
}

로그인 후 복사

JS 공개 파일

var home = $('#home');
  var snakeArr = [];
  var direcation = 'l';
  var speed = 0;
  var timer = '';
  //460/20
  var rows = 23;
  var cols = 25;
  var die = false;      //用于判断是否game over
  var food = [];
  var sorce = 0;       //得分的显示

로그인 후 복사

우선 뱀을 갖고 싶다면 뱀을 만들어야 하고,

for( var i=0; i<4; i++ ){
    //var snakeDiv = document.createElement("div");
    //snakeDiv.style = 'background:url(./images/snake' + i + '.png) no-repeat;';
    var snakeDiv = $('<div style="background:url(./images/snake' + i + '.png) no-repeat;z-index:999"></div>');
    home.append(snakeDiv);
    snakeArr[i] = {r : 10, c : 10 + i, div : snakeDiv, d : direcation};
    setPosition(snakeArr[i]); 
  }

로그인 후 복사

뱀이 있으면 이동하는 것이 당연합니다.

function move(){
    var timer = setInterval(function(){
    for( var i=snakeArr.length -1; i>0; i-- ){
      snakeArr[i].c = snakeArr[i-1].c;
      snakeArr[i].r = snakeArr[i-1].r;
      snakeArr[i].d = snakeArr[i-1].d;
      }
 
      switch(direcation){
      case 'l' :
        snakeArr[0].c--;
        snakeArr[0].d = 'l';
        break;
 
      case 'r' :
        snakeArr[0].c++;
        snakeArr[0].d = 'r';
        break;
 
      case 't' :
        snakeArr[0].r--;
        snakeArr[0].d = 't';
        break;
 
      case 'b' :
        snakeArr[0].r++;
        snakeArr[0].d = 'b';
        break;
    }
 
    //snake的方向控制
    $(window).keydown(function(event){
      switch(event.keyCode){
        case 37 :
          direcation = 'l';
          break;
 
        case 38 :
          direcation = 't';
          break;
 
        case 39 :
          direcation = 'r';
          break;
 
        case 40 :
          direcation = 'b';
          break;
      }
    });
 
      //snake事故
      //1. snake撞墙
      if( snakeArr[0].c < 0 || snakeArr[0].r < 0 || snakeArr[0].c >= cols || snakeArr[0].r >= rows ){
          clearInterval(timer);
          die = true;
          alert('GAME OVER');
      }
 
      //2. snake撞到自己
      for( var i=1; i<snakeArr.length; i++ ){
        if( snakeArr[0].c == snakeArr[i].c && snakeArr[0].r == snakeArr[i].r ){
           clearInterval(timer);
           die = true;
           alert('GAME OVER');
        }
      }
 
      //snake吃水果
      if( snakeArr[0].c == food[0].c && snakeArr[0].r == food[0].r ){
        food[0].div.css({background : 'url(./images/snake2.png) no-repeat'});
        snakeArr.splice(snakeArr.length - 1, 0, food[0]);
        food.shift();
        sorce += 10;
        $('#score').html(sorce);
      }
 
      //snake产生水果
      if( food.length == 0 ){
        createFood(); 
      }
 
 
      for(var i = 0; i < snakeArr.length; i++){
        setPosition(snakeArr[i]);
      }
    },speed);
 
}

로그인 후 복사

식품 생산:

function createFood(){
    var r = parseInt(rows * Math.random());
    var c = parseInt(cols * Math.random());
    var casrsh = false;
     
    //2个水果出现的位置不能一样
    while( food.length == 0 ){
      //判断snake的位置，不能与snake相撞
      for( var i = 0; i < snakeArr.length; i++ ){
        if( r == snakeArr[i].r && c == snakeArr[i].c ){
          casrsh = true;
        }
      }
      //当位置不重叠的时候，产生水果
      if( !casrsh ){
        var i = parseInt(4 * Math.random());
        var foodDiv = $('<div style="background:url(./images/fruit'+ i +'.png);"></div>');
        home.append(foodDiv);
        food.push({r : r, c : c, div : foodDiv});
        setPosition(food[0]);
      }
    }
     
  }

로그인 후 복사

또 다른 중요한 기능은 위치를 재설정하는 것입니다.

function setPosition(obj){
    obj.div.css({left : obj.c * 20, top : obj.r * 20}); 
    obj.div.removeClass().addClass(obj.d);
  }
  createFood();  //那页面一被加载出来就显示出食物！

로그인 후 복사

이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7627

Cakephp 튜토리얼

1389

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

140

Related knowledge

게임할 때 CPU 사용률은 얼마나 되어야 합니까? Feb 19, 2024 am 11:21 AM

게임이 많은 리소스를 소비하기 때문에 컴퓨터 속도가 느려지는 것은 흔한 일입니다. 게임을 할 때 CPU 사용량을 이해하여 과부하를 방지하는 것이 중요합니다. 따라서 적절한 CPU 사용량을 추적하는 것이 게임 경험을 원활하게 유지하는 데 중요합니다. 이 문서에서는 게임이 실행되는 동안 달성해야 하는 적절한 CPU 사용량을 살펴보겠습니다. 게임 중 CPU 사용률 CPU 사용률은 프로세서 작업 부하를 나타내는 중요한 지표이며 CPU의 성능 사양에 따라 달라집니다. 더 강력한 CPU는 일반적으로 사용량이 더 높습니다. 코어와 스레드가 더 많은 CPU는 시스템의 전반적인 성능을 향상시킬 수 있습니다. 멀티스레딩 지원은 CPU의 잠재력을 최대한 활용하는 데 도움이 됩니다. 게임에서 CPU 사용량은 프로세서 활용도에 따라 달라지며, 이는 게임에 영향을 미칠 수 있습니다.

Nvgpucomp64.dll로 인해 Windows PC 게임이 중단됩니다. Mar 26, 2024 am 08:20 AM

Nvgpucomp64.dll로 인해 게임이 자주 충돌하는 경우 여기에 제공된 해결 방법이 도움이 될 수 있습니다. 이 문제는 일반적으로 오래되거나 손상된 그래픽 카드 드라이버, 손상된 게임 파일 등으로 인해 발생합니다. 이러한 문제를 해결하면 게임 충돌을 처리하는 데 도움이 될 수 있습니다. Nvgpucomp64.dll 파일은 NVIDIA 그래픽 카드와 연결되어 있습니다. 이 파일이 충돌하면 게임도 충돌합니다. 이는 일반적으로 LordsofttheFallen, LiesofP, RocketLeague 및 ApexLegends와 같은 게임에서 발생합니다. Nvgpucomp64.dll이 N인 경우 Windows PC에서 게임과 충돌함

게임에 대한 NAT Boost와 Qos 중 어느 것이 더 낫습니까? Feb 19, 2024 pm 07:00 PM

거의 모든 게임이 온라인으로 진행되는 오늘날의 상황에서 홈 네트워크의 최적화를 무시하는 것은 바람직하지 않습니다. 거의 모든 라우터에는 사용자의 게임 경험을 향상시키도록 설계된 NATBoost 및 QoS 기능이 탑재되어 있습니다. 이 기사에서는 NATBoost 및 QoS의 정의, 장점 및 단점을 살펴보겠습니다. 게임에 대한 NATBoost와 Qos 중 어느 것이 더 낫습니까? 네트워크 주소 변환 부스트(Network Address Translation Boost)라고도 알려진 NATBoost는 성능을 향상시키는 라우터에 내장된 기능입니다. 이는 게임 장치와 서버 간에 데이터가 전송되는 데 걸리는 시간인 네트워크 대기 시간을 줄이는 데 도움이 되기 때문에 게임에 특히 중요합니다. NATBoost는 라우터 내의 데이터 처리 방법을 최적화하여 더 빠른 데이터 처리 속도와 더 낮은 대기 시간을 달성하여

NVIDIA, RTX HDR 기능 출시: 지원되지 않는 게임은 AI 필터를 사용하여 HDR의 화려한 시각 효과를 구현합니다. Feb 24, 2024 pm 06:37 PM

2월 23일 이 웹사이트의 소식에 따르면 NVIDIA는 어젯밤 NVIDIA‏‏ 애플리케이션을 업데이트하고 출시하여 플레이어에게 새로운 통합 GPU 제어 센터를 제공하고 플레이어가 게임 내 플로팅에서 제공하는 강력한 녹화 도구를 통해 멋진 순간을 포착할 수 있도록 했습니다. 창문. 이번 업데이트에서 NVIDIA는 RTXHDR 기능도 도입했습니다. 공식 소개는 다음과 같습니다. RTXHDR은 HDR(High Dynamic Range)의 화려한 시각 효과를 게임에 원활하게 도입할 수 있는 새로운 AI 기반 프리스타일 필터입니다. HDR을 지원합니다. 다양한 DirectX 및 Vulkan 기반 게임에서 이 기능을 사용하려면 HDR 호환 모니터만 있으면 됩니다. 플레이어가 RTXHDR 기능을 활성화하면 HD를 지원하지 않더라도 게임이 실행됩니다.

슈퍼피플 게임 다운로드 및 설치 방법 소개 Mar 30, 2024 pm 04:01 PM

슈퍼피플 게임은 Steam 클라이언트를 통해 다운로드할 수 있습니다. 이 게임의 크기는 일반적으로 다운로드 및 설치에 1시간 30분 정도 걸립니다. 새로운 글로벌 비공개 테스트 신청 방법 1) 스팀 스토어에서 'SUPERPEOPLE' 검색(스팀 클라이언트 다운로드) 2) 'SUPERPEOPLE' 스토어 페이지 하단의 'SUPERPEOPLE 비공개 테스트 접근 권한 요청' 클릭 3) 접근 요청 버튼, "SUPERPEOPLECBT" 게임은 스팀 라이브러리에서 확인하실 수 있습니다. 4) "SUPERPEOPLECBT"에서 설치 버튼을 클릭하신 후 다운로드 받으세요.

win11에서 Spider Solitaire는 어디에 있습니까? Win11에서 Spider Solitaire 게임을 플레이하는 방법 Mar 01, 2024 am 11:37 AM

AAA 명작과 모바일 게임을 충분히 플레이한 친구들, 어린 시절의 컴퓨터 게임을 다시 경험하고 싶나요? 그렇다면 Windows 11의 Spider Solitaire를 함께 찾아보세요! 인터페이스에서 시작 메뉴를 클릭하고 "모든 앱" 버튼을 클릭합니다. Microsoft의 Solitaire 시리즈 게임 애플리케이션인 "MicrosoftSolitaireCollection"을 찾아 선택합니다. 로딩이 완료되면 선택 인터페이스로 들어가서 "스파이더 솔리테어"를 찾고 "스파이더 솔리테어"를 선택하세요. 인터페이스가 약간 바뀌었지만 여전히 이전과 동일합니다.

Thrustmaster 제어판이 작동하지 않거나 제대로 표시되지 않음 [수정됨] Feb 19, 2024 am 10:45 AM

Thrustmaster는 게임 휠 및 기타 게임 액세서리 생산을 전문으로 하는 회사입니다. 해당 휠 제품은 게임 커뮤니티에서 매우 인기가 있습니다. Thrustmaster 휠 설정은 Thrustmaster 제어판을 사용하여 설치하고 조정할 수 있습니다. 제어판이 작동하지 않거나 표시되지 않는 문제가 발생하면 게임 경험에 영향을 미칠 수 있습니다. 따라서 이런 경우에는 연결이 정상적인지 확인하고, 소프트웨어 드라이버가 올바르게 설치되었는지, 최신 버전으로 업데이트되었는지 확인해야 합니다. 또한 장치를 다시 시작하거나 장치를 다시 연결하여 가능한 오류를 해결할 수도 있습니다. 문제가 발생하면 Thrustmaster 공식 웹사이트를 참조하거나 고객 서비스에 문의하여 추가 도움을 받을 수 있습니다. Thrustma에 액세스하는 방법

Call of Duty: PC 또는 Xbox의 Ghosts가 로딩 화면에서 멈추거나 충돌하거나 멈춥니다. Feb 19, 2024 pm 12:03 PM

Call of Duty: Ghosts가 시작 화면에서 멈추거나 충돌하거나 멈추나요? 많은 플레이어들이 자신의 기기에서 게임이 제대로 작동하지 않는다고 보고했습니다. 시작할 때 검은색 빈 화면이 계속 표시되거나 중간에 멈추거나 무작위로 충돌이 발생합니다. 이러한 문제는 PC와 Xbox 콘솔 모두에서 보고되었습니다. 귀하가 영향을 받는 사용자 중 하나라면 이 문서는 Call of Duty: Ghosts의 성능 문제를 해결하는 데 도움이 될 것입니다. Call of Duty: Ghost가 로딩 화면에서 멈춤, PC 또는 Xbox에서 충돌 또는 정지 로딩 화면이 끊기거나 게임이 계속 정지되는 경우 다음 해결 방법이 Ghost 문제를 해결하는 데 도움이 될 수 있습니다. 호스트 또는 컴퓨터가 CodGhost 시스템 요구 사항을 충족하는지 확인하십시오. 본체를 다시 시작하세요. 작업 관리에

See all articles

Node.js에서 'Snake' 미니 game_javascript 기술 작성

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제