자바스크립트 스네이크 구현 code_javascript 기술

연습과정에서 JS를 이용하여 뱀게임을 구현해 보았습니다. 실제로 효과가 있었습니다.
아이디어: 10px*10px div 레이어를 사용하여 "픽셀" 역할을 한 다음 160 "픽셀"의 40*40 매트릭스를 사용하여 게임 인터페이스를 구성합니다.
코드는 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다.

// JavaScript 문서
alert("키보드의 화살표 키는 방향을 제어하고 스페이스바는 일시 중지됩니다. LIFE 제작 nhttp://blog.csdn.net/anhulife");
// 기본 그래픽 블록 추가, 즉 160개의 10 * 10 레이어로 구성된 2차원 행렬
var rowindex = new Array( 40 );
var colindex;
//이미지 단위 정의
var backcolor = "black"
for(var i = 0; i < 40; i )
{
colindex = new Array(40);
for(var j = 0; j < 40; j )
{
// 각 셀의 속성을 설정합니다
cell = document.createElement("div");
cell.style.backcolor = backcolor;
cell.style.width = "10px";
cell.style.height = "10px"; 🎜 >cell.style.position = "절대";
cell.style.left = "" (j * 10 100) "px"
cell.style.top = "" (i * 10 100) " px";
cell.style.overflow = "hidden";
// 셀 추가
document.body.appendChild(cell)
// 열 그룹 채우기
colindex[j ] = cell;
}
// 행 그룹 채우기
rowindex[i] = colindex;
}
// 기본 이미지 단위를 기준으로 스네이크 유형 정의
function snake ()
{
// 뱀의 몸체를 정의하고 초기화합니다.
this.bodycolor = "white";
this.bodys = new Array()
for(var i = 20; i < 25; i )
{
rowindex[20][i].style.BackgroundColor = this.bodycolor
//rowindex의 첫 번째 좌표는 행 인덱스입니다. is Column index
this.bodys.push(rowindex[20][i]);
}
// 뱀 머리의 좌표를 정의합니다. 첫 번째는 행 인덱스이고 두 번째는 열 인덱스
this.head = [20, 20];
// 뱀의 방향을 정의합니다. 0은 왼쪽, 1은 아래쪽, 2는 오른쪽, 3은 위쪽
this.direct = 0;
}
//모듈 이동
function move()
{
// 순방향에 따른 머리 좌표 계산
switch(this.direct)
{
케이스 0 :
this.head[1] -= 1;
break
케이스 1 :
this.head[0] = 1;
케이스 2:
this.head[1] = 1;
break;
케이스 3:
this.head[0] -= 1; }
// 범위를 벗어났는지 확인
if(this.head[0] < 0 || this.head[0] > 39 || this.head[1] < 0 || this .head[1] > 39)
{
// 범위를 벗어나면 false를 반환합니다.
false를 반환합니다.
}
else
// 범위를 벗어나면 범위를 벗어나면 다음 원소의 성질을 확인하고, 식품이고 식품으로 재생되면 섭취한다.그 자체인 경우 false를 반환
if(this.head[0] == food[0] && this.head[1] == food[1])
{
//인 경우 음식
rowindex[this.head[0]][this.head[1]].style.backColor = this.bodycolor
this.bodys.unshift(rowindex[this.head[0]][this . head[1]]);
score ;
makefood();
return
}
else
// if(rowindex[ this .head[0]][this.head[1]].style.BackgroundColor == this.bodycolor)
{
if(rowindex[this.head[0]][this.head[1] ] == this.bodys.pop())// 꼬리인 경우
{
this.bodys.unshift(rowindex[this.head[0]][this.head[1]]);
true 반환
}
// 꼬리가 아닌 경우
false 반환
}
// 해당 사항 없음
this.bodys.pop().style .BackgroundColor = 배경색;
rowindex[this.head[0]][this.head[1]].style.groundColor = this.bodycolor
this.bodys.unshift(rowindex[this.head[0) ]] [this.head[1]]);
return true;
}
snake.prototype.move = move;
// 음식 모듈 생성
var foodcolor = "blue" ;
var food = [20, 17];
rowindex[food[0]][food[1]].style.backColor = foodcolor;
function makefood()
{
var tempfood ;
var tempelement
out :
while(true)
{
tempfood = [Math.round(Math.random() * 39), Math.round(Math. 무작위( ) * 39)];
tempelement = rowindex[tempfood[0]][tempfood[1]]
for(var i in s.bodys)
{
if(s. bodys[ i] == tempelement)
{
// 무작위로 생성된 음식이 뱀의 몸에 있으면 뛰어내려 계속합니다.
계속 나가세요
}
// 음식을 성공적으로 생성합니다.
브레이크 아웃;
}
}
food = tempfood;
rowindex[food[0]][food[1]].style.BackgroundColor =
}
// 모듈 전환 및 모듈 일시 중지
document.onkeydown = Turnorstop;
functionturnorstop(event)
{
if(window.event != undefine)
{
if( parseInt(window .event.keyCode)==32)
{
alert("휴식을 취하세요");
}
else
{
switch(parseInt(window.event) .keyCode))
{
case 37:
if(s.direct!=2)
s.direct = 0
break
case 38:
if (s.direct !=1)
s.direct = 3;
break
case 39:
if(s.direct!=0)
s.direct
break;
사례 40:
if(s.direct!=3)
s.direct = 1
break; >else
{
if(parseInt(event.which)==32)
{
alert("휴식을 취하세요")
}
else
{
switch(parseInt (event.which))
{
case 37 :
if(s.direct!=2)
s.direct = 0
break; 사례 38:
if(s.direct!=1)
s.direct = 3;
break
사례 39:
if(s.direct!=0)
s.direct = 2 ;
break;
case 40:
if(s.direct!=3)
s.direct = 1
}
}
}
}
//게임 모듈 시작
var s = new snake()
var time = 60;//Snake의 속도 지수
function startmove()
{
if(s.move())
{
setTimeout(startmove, time)
}
else
{
alert("GAME OVERn 점수 is:" 점수 "점");
}
}
//점수 설정
var 점수 = -1;
//게임 실행
startmove();


웹 페이지에서 JS 파일을 연결하면 됩니다.