jQuery 미니게임의'뱀 탐식'
4051 단어 JavaScript
Document
var position='absolute';
var foods=[];
function Shiwu(x,y){
this.x=x;
this.y=y;
this.width=20;
this.height=20;
this.color='green';
}
var suiji={
getRandom:function(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
}
Shiwu.prototype.weizhi=function(map){
shan()
var shi=document.createElement('div');
map.appendChild(shi);
foods.push(shi)
this.x=suiji.getRandom(0,map.offsetWidth/this.width-1)*this.width;
this.y=suiji.getRandom(0,map.offsetHeight/this.height-1)*this.height;
shi.style.position=position;
shi.style.left=this.x+'px';
shi.style.top=this.y+'px';
shi.style.width=this.width+'px';
shi.style.height=this.height+'px';
shi.style.background=this.color;
}
function shan(){
for (var i = foods.length-1; i>=0; i--) {
foods[i].parentNode.removeChild(foods[i]);
foods.pop();
};
}
/********************* ********************/
(function(){
var elments=[];
function Snake(){
this.width=20;
this.height=20;
this.you='right';
this.body=[{x:3,y:2,color:'blue'},{x:2,y:2,color:'red'},{x:1,y:2,color:'red'}];
this.position='absolute';
}
Snake.prototype.render=function(map){
shan()
for (var i = 0; i < this.body.length; i++) {
var she=document.createElement('div');
map.appendChild(she);
elments.push(she)
she.style.width=this.width+'px';
she.style.height=this.height+'px';
she.style.left=this.body[i].x*this.width+'px';
she.style.top=this.body[i].y*this.height+'px';
she.style.background=this.body[i].color;
she.style.position=this.position;
};
map.children[1].style.zIndex=1000;
function shan(){
for(var i=elments.length-1;i>=0;i--){
elments[i].parentNode.removeChild(elments[i])
elments.pop()
}
}
}
Snake.prototype.move=function(){
for(var i=this.body.length-1;i>0;i--){
this.body[i].x=this.body[i-1].x;
this.body[i].y=this.body[i-1].y;
}
var head=this.body[0];
switch(this.you){
case'right':
head.x+=1;
break;
case'left':
head.x-=1;
break;
case'top':
head.y-=1;
break;
case'bottom':
head.y+=1;
break;
}
}
window.Snake=Snake;
})()
/***************** *******************/
function Game(map){
this.time;
Game.prototype.start=function(map){
this.snake=new Snake()
this.snake.render(map)
this.snake.move()
this.snake.render(map)
this.food=new Shiwu();
this.food.weizhi(map);
}
Game.prototype.end=function(map){
this.a=this.snake.body[0].x*this.snake.width;
var b=window.getComputedStyle(map,null).width;
this.c=this.snake.body[0].y*this.snake.height;
var d=window.getComputedStyle(map,null).height;
if (this.a<0||this.a>=parseInt(b)||this.c<0||this.c>=parseInt(d) ){
clearInterval(this.time)
alert(' ')
}
}
Game.prototype.sheChi=function(){
if (parseInt(this.a)==this.food.x&&parseInt(this.c)==this.food.y) {
this.food.weizhi(rong);
var last=this.snake.body[this.snake.body.length-1];
console.log(last);
this.snake.body.push({
x:last.x,
y:last.y,
color:last.color,
})
};
}
}
var rong=document.getElementById('rong')
var game=new Game()
game.start(rong)
function runshe(){
game.time=setInterval(function(map){
game.snake.move()
game.snake.render(map)
game.end(rong)
game.sheChi()
},200,rong)
document.addEventListener('keydown',function(e){
e=e||window.e;
if (e.keyCode==37) {
game.snake.you='left';
}else if (e.keyCode==38) {
game.snake.you='top';
}else if (e.keyCode==39) {
game.snake.you='right';
}else if (e.keyCode==40) {
game.snake.you='bottom';
};
},false)
}
runshe()
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
