JavaScript 웹 페이지 판 뱀 탐식 게임 실현
<!DOCTYPE html>
<html>
<head><title> </title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
var canv=document.getElementById("canvas");
var ctx=canv.getContext("2d");
var score=0;
//
var Block=function(col,row,size)
{
this.col=col;
this.row=row;
this.size=size;
};
// Block draw；
Block.prototype.draw =function()
{
ctx.fillRect(this.col*this.size,this.row*this.size,this.size,this.size)
}
//
var snake ={
body:[
new Block(20,20,10),
new Block(20,21,10),
new Block(20,22,10)
],
direction:"right",
};
//
snake.draw=function()
{
for(var i=0;i<this.body.length;i++)
{
this.body[i].draw();
}
};
snake.move = function()
{
var head = this.body[0];
if(snake.direction=="right")
{
var newhead=new Block(head.col+1,head.row,head.size)
}
if(snake.direction =="left")
{
var newhead = new Block(head.col-1,head.row,head.size);
}
if(snake.direction=="up")
{
var newhead=new Block(head.col,head.row-1,head.size)
}
if(snake.direction=="down")
{
var newhead=new Block(head.col,head.row+1,head.size)
}
if(newhead.col<0 || newhead.col>39 )
{
clearInterval(intervalId);
gameover();
}
if(newhead.row<0 || newhead.row>39 )
{
clearInterval(intervalId);
gameover();
}
for(var i=0;i<this.body.length;i++)
{
if(this.body[i].col==newhead.col &&this.body[i].row==newhead.row)
{
clearInterval(intervalId);
gameover();
}
}
this.body.unshift(newhead);
if(newhead.col==apple.posX &&newhead.row==apple.posY)
{
score=score+100;
while(true)
{
var checkApple =false;
apple.posX=Math.floor(Math.random()*40);
apple.posY=Math.floor(Math.random()*40);
for(var i=0; i<this.body.length;i++)
{
if(this.body[i].col==apple.posX &&this.body[i].row==apple.posY)
checkApple=true;
}
if(!checkApple)
break;
}
}
else{
this.body.pop();
}
};
//
var apple={
posX:Math.floor(Math.random()*40),
posY:Math.floor(Math.random()*40),
sizeR:5
}
//
apple.draw=function()
{
ctx.fillStyle="Green";
ctx.beginPath();
ctx.arc(this.posX*10+5,this.posY*10+5,5,0,Math.PI*2,false);
ctx.fill();
ctx.fillStyle="Black";
};
//
var gameover=function()
{
ctx.font="60px Comic Sans MS";
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.fillText("GAME OVER!",200,200)
};
//
var intervalId=setInterval (function ()
{
ctx.clearRect(0,0,400,400);
ctx.font="20px Arial";
ctx.fillText("Score:"+score,5,15);
snake.draw();
snake.move();
apple.draw();
ctx.strokeRect(0,0,400,400);
},200);
//
$("body").keydown(function(event)
{
console.log(event.keyCode);
if(event.keyCode==37 &&snake.direction!="right")
{
snake.direction="left";
}
if(event.keyCode==38 &&snake.direction!="down")
{
snake.direction="up";
}
if(event.keyCode==39 &&snake.direction!="left")
{
snake.direction="right";
}
if(event.keyCode==40 &&snake.direction!="up")
{
snake.direction="down";
}
}
);
</script>
</body>
</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
