贪吃蛇个人作品视频链接地址
作品
贪吃蛇个人作品视频链接地址
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪吃蛇</title>
</head>
<style>
body{ margin:0px;
padding:0px;
background-image: url(images/beijing.jpg);}
#main{ margin:100px;}
.btn{ width:100px;
height:40px;}
.gtitle{
font-size:25px;
font-weight:bold;}
#gnum{ color:#F00;}
</style>
<body> <div id="main">
<input class="btn" type="button" value="开始游戏" id="begin"/>
<input class="btn" type="button" value="暂停游戏" id="pause"/>
<span class="gtitle">第<span id="gnum">1</span>关</span>
<script>
var main=document.getElementById('main');
var showcanvas=false;
function Map(atom,xnum,ynum){
this.atom=atom;
this.xnum=xnum;
this.ynum=ynum;
this.canvas=null;
this.create=function(){
this.canvas=document.createElement('div');
this.canvas.style.cssText="position: relative ; top:40px; border:1px solid darkred; background-color:#FAFAFA";
this.canvas.style.width=this.atom*this.xnum+'px';
this.canvas.style.height=this.atom*this.ynum+'px';
main.appendChild(this.canvas);
if(showcanvas){
for(var y=0;y<xnum;y++){
for(var x=0;x<xnum;x++){
var a=document.createElement('div');
a.style.cssText="border:1px solid yellow";
a.style.width=this.atom+'px';
a.style.height=this.atom+'px';
a.style.backgroundColor="white";
this.canvas.appendChild(a);
a.style.position='absolute';
a.style.left=x*this.atom+'px';
a.style.top=y*this.atom+'px';
}
}
}
}
}
function Food(map){
this.width=map.atom;
this.height=map.atom;
this.bgcolor="rgb("+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+")";
this.x=Math.floor(Math.random()*map.xnum);
this.y=Math.floor(Math.random()*map.ynum);
this.flag=document.createElement('div');
this.flag.style.width=this.width+'px';
this.flag.style.height=this.height+'px';
this.flag.style.backgroundColor=this.bgcolor;
this.flag.style.borderRadius='50%';
this.flag.style.position='absolute';
this.flag.style.left=this.x*this.width+'px';
this.flag.style.top=this.y*this.height+'px';
map.canvas.appendChild(this.flag);
}
function Snake(map){
this.width=map.atom;
this.height=map.atom;
this.direction='right';
this.body=[{x:2,y:0},{x:1,y:0},{x:0,y:0}
//,{x:null,y:null,flag:null}
];
this.display=function(){
for(var i=0;i<this.body.length;i++){
if(this.body[i].x!=null){
var s= document.createElement('div');
this.body[i].flag=s;
s.style.width=this.width+'px';
s.style.height=this.height+'px';
s.style.backgroundColor="rgb("+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+")";
s.style.position='absolute';
s.style.left=this.body[i].x*this.width+'px';
s.style.top=this.body[i].y*this.height+'px';
map.canvas.appendChild(s);
}
}
}
this.run=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;
}
switch(this.direction){
case "left": this.body[0].x-=1; break;
case "right": this.body[0].x+=1; break;
case "up": this.body[0].y-=1; break;
case "down": this.body[0].y+=1; break;
}
if(this.body[0].x==food.x&&this.body[0].y==food.y){
this.body.push({x:null,y:null,flag:null});
if(this.body.length>l.slength){
l.set();
}
map.canvas.removeChild(food.flag);
food=new Food(map);
}
if(this.body[0].x<0||this.body[0].x>map.xnum-1||this.body[0].y<0||this.body[0].y>map.ynum-1){clearInterval(timer);
alert(" 你个弟弟,撞墙getover啦");
restart(map.this);
return false; }
for(var i=4;i<this.body.length;i++){
if(this.body[0].x==this.body[i].x&&this.body[0].y==this.body[i].y){clearInterval(timer);
alert(" 小弟弟,getover啦");
restart(map.this);
return false; } }
for(var i=0;i<this.body.length;i++){
if(this.body[i].flag!= null){
map.canvas.removeChild(this.body[i].flag)
}
}
this.display();
}
}
function restart(map,snake){
for(var i=0; i<snake.body.length;i++){
map.canvas.removeChild(snake.body[i].flag);}
snake.body=[{x:2,y:0},{x:1,y:0},{x:0,y:0}
//,{x:null,y:null,flag:null}
];
snake.direction='right';
snake.display();
map.canvas.removeChild(food.flag);
food=new Food(map);
}
function level(){
this.num=1;this.speed=300;
this.slength=8;
this.set=function(){
this.num++;
if(this.speed<=50){
this.speed=50;
}else{
this.speed-=50;}
this.slength+=3; this.display();start();}
this.display=function(){
document.getElementById('gnum').innerHTML=this.num;
}
}
var l=new level();
l.display();
var map=new Map(20,80,40);
map.create();
var food=new Food(map);
var snake=new Snake(map);
snake.display();
window.onkeydown=function(e){
var event=e||window.event;
switch(event.keyCode){
case 38: if( snake.direction !="down"){ snake.direction="up";}s
break;
case 40: if( snake.direction !="up"){snake.direction="down";} break;
case 37: if( snake.direction !="right") {snake.direction="left"; } break;
case 39: if( snake.direction !="left"){snake.direction="right";} break;
}
}
var timer;
function start(){
clearInterval(timer);
timer=setInterval(function(){
snake.run();},l.speed);}
document.getElementById('begin').onclick=function(){
start();
}
document.getElementById('pause').onclick=function(){
clearInterval(timer);
}
</script>
</div>
</body>
</html>
思路
创建页面布局,将每一个小格放到数组里面,通过行列构造一个二维数组,方便接下来的判断和一系列的操作。
创建蛇的身体,并通过计时器让蛇身体移动
控制蛇的移动,并加判断防止重复按键
创建食物,通过随机数函数来创建生成食物的位置,并进行判断防止和蛇身重合
对蛇运动情况进行判断: