您的位置：首页 > Web前端 > JavaScript

js-->贪吃蛇小游戏,能成功玩

2017-05-19 12:48 381 查看
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>贪吃蛇小游戏</title><script type="text/javascript">//将地图声明为全局var plat=null;//请食物声明为全局var food=null;//请蛇声明为全局var snake =null;//定时器var setTime=null;//地图类function Plat(){//宽度this.width=1000;//高度this.height=600;//背景//this.color = 'url(images/sfq_3.jpg)';this.color="#eeeeee";//定位方式this.position='absolute';this.margin = "200";//保存地图对象this._plat=null;//创建地图的方法this.show = function(){//在内存中创建一个div对象this._plat = document.createElement("div");//添加样式this._plat.style.width=this.width+"px";this._plat.style.height=this.height+"px";//this._plat.style.backgroundImage=this.color;this._plat.style.backgroundColor=this.color;this._plat.style.position = this.position;this._plat.style.marginTop= this.margin+"px";this._plat.style.marginLeft= 400+"px";//将内存中的div放入到body对象中document.getElementsByTagName('body')[0].appendChild(this._plat);};//将食物添加到地图中this.AppendChild = function(obj){this._plat.appendChild(obj);}}//食物类function Food(){this.width = 20;this.height = 20;this.color="red";//this.color = 'url(images/furit_'+1+'.png)';this.position='absolute';this.radius="50%";//食物在地图中的横纵坐标值this.x=0;this.y=0;this._food=null;this.show = function(){if(this._food==null){this._food = document.createElement("div");this._food.style.width=20+'px';this._food.style.height=20+'px';this._food.style.borderRadius =this.radius;this._food.style.position = this.position;//document.getElementsByTagName('div')[0].appendChild(div);//通过地图对象中的方法把食物追加到地图中。plat.AppendChild(this._food);}//var i = Math.round(Math.random()*5+1);//this.color = 'url(images/furit_'+i+'.png)';//随机出x,y的坐标//this._food.style.backgroundImage=this.color;this._food.style.backgroundColor=this.color;this.x =Math.floor(Math.random()*50); //0-49this.y =Math.floor(Math.random()*30); //0-30this._food.style.left=(this.x*20)+"px";this._food.style.top =(this.y*20)+"px";};}//蛇类function Snake(){this.radius="50%";this.width=20;this.height=20;//记录蛇节的数目this.festival=[[3,3,'pink',null],[2,3,'blue',null],[1,3,'blue',null]];this.position='absolute';//移动方式this.direction='right';//设置蛇的方向this.setDirection = function(code){console.log(code);/*if(this.direction=='right'&&code==37){alert("你死了");}*/switch(code){case 37:if(this.direction=='right'){alert("你撞尾了");clearInterval(setTime);}this.direction='left';break;case 38:if(this.direction=='down'){alert("你撞尾了");clearInterval(setTime);}this.direction='top';break;case 39:if(this.direction=='left'){alert("你撞尾了");clearInterval(setTime);}this.direction='right';break;case 40:if(this.direction=='top'){alert("你撞尾了");clearInterval(setTime);}this.direction='down';break;}}this.show = function(){for(var i=0;i<this.festival.length;i++){//判断蛇节是否存在，存在就不在创建了。if(this.festival[i][3]==null){this.festival[i][3]= document.createElement("div");this.festival[i][3].style.width=20+"px";this.festival[i][3].style.height=20+"px";this.festival[i][3].style.position = this.position;this.festival[i][3].style.backgroundColor=this.festival[i][2];plat.AppendChild(this.festival[i][3]);this.festival[i][3].style.borderRadius =this.radius;}this.festival[i][3].style.left = this.festival[i][0]*this.width+"px";this.festival[i][3].style.top = this.festival[i][1]*this.height+"px";}};//让蛇动起来.this.move = function(){//蛇节的长度var length = this.festival.length-1;for(var i=length;i>0;i--){//让所有蛇节移动this.festival[i][0] = this.festival[i-1][0];this.festival[i][1] = this.festival[i-1][1];}//蛇头移动if(this.direction=='right'){this.festival[0][0]+=1;}else if(this.direction=='top'){this.festival[0][1]-=1;}else if(this.direction=='down'){this.festival[0][1]+=1;}else if(this.direction=='left'){this.festival[0][0]-=1;}//判断吃到食物if(this.festival[0][0]==food.x&&this.festival[0][1]==food.y){var x = this.festival[length][0];var y = this.festival[length][1];this.festival.push([x,y,'blue',null]);food.show();}//判断是否超出区域！if(this.festival[0][0]==50&&this.direction=='right'){alert("怎么不小心啊!,撞墙了");clearInterval(setTime);return;}else if(this.festival[0][0]==-1&&this.direction=='left'){alert("怎么不小心啊!,撞墙了");clearInterval(setTime);return;}else if(this.festival[0][1]==-1&&this.direction=='top'){alert("怎么不小心啊!,撞墙了");clearInterval(setTime);return;}else if(this.festival[0][1]==30&&this.direction=='down'){alert("怎么不小心啊!,撞墙了");clearInterval(setTime);return;}for(var i=length;i>0;i--){if(this.festival[0][0]==this.festival[i][0]&&this.festival[0][1]==this.festival[i][1]){alert("你死了！");clearInterval(setTime);return;}}this.show();}}window.onload=function(){//实例化地图对象plat = new Plat();//将地图对象添加到body元素中里plat.show();//实例化食物对象food = new Food();//将食物对象放到地图中food.show();//实例化蛇对象snake = new Snake();//将蛇对象放到地图中snake.show();setTime=setInterval('snake.move()',100);//监听键盘事件document.onkeyup =function(event){var code;if(window.event){code = window.event.keyCode;}else{code = event.keyCode;}snake.setDirection(code);}};</script></head><body></body></html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                小游戏
                                                function
                                                absolute
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航