Javascript高级学习笔记1---自己做的贪吃蛇小游戏

第一次发博客有很多东西都不太懂。

学习Javascript高级自己做了一个小贪吃蛇游戏

程序写的很乱(❁´◡`❁)*✲ﾟ*

简单的贪吃蛇：地图,食物,小蛇

这三个都是对象.

地图:宽,高,背景颜色,因为小蛇和食物都是相对于地图显示的,这里的小蛇和食物都是地图的子元素,随机位置显示,脱离文档流。父级元素map使用relative子级元素使用absolute

 

<div class="map"></div>

 

    <style type="text/css">
        .map{
            width: 500px;
            height:500px;
            position: relative;
            background-color: #000;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    </style>

 

var map = document.querySelector(".map");

因为后面很多地方都要用到map,我干脆把他声明成全局变量了

 

食物:宽,高,背景颜色,横纵坐标

一个食物就是一个对象,对象有相应的属性,对象需要在地图上显示,最终要创建食物的对象,先要有食物的构造函数,食物要想显示在地图上,食物的初始化就是一个行为(方法)

1、食物的构造函数用来创建食物的对象。

2、食物的显示方法:通过对象调用方法,显示食物并设置相对应的样式

食物被小蛇吃掉,吃掉后应该再次出现食物,原来的食物就要被删除，每一次初始化食物的时候先删除原来的食物再重新的初始化食物，通过一个私有的函数来删除被小蛇吃掉的食物,同时再最开始的时候食物也被保存到了一个数组中,再从数组中删除食物(通过数组元素找到食物的父级元素再通过父级元素删除地图中的食物,最后再删除数组中的食物)。

最后再把食物构造函数的实例化对象变成全局变量

(function(){
            var element = [];
            function Food(){
                this.width=20;
                this.height=20;
                this.x=0;
                this.y=0;
            }
            Food.prototype.FoundFood = function(){
                remove();
                var div = document.createElement("div");
                div.style.width=this.width+"px";
                div.style.height=this.height+"px";
                div.style.position="absolute";
                div.style.backgroundColor="red";
                div.innerHTML="<img src='贪吃蛇食物.png' width='20px'>";
                map.appendChild(div);
                var x = Math.floor(Math.random()*(map.offsetWidth/this.width))*this.width;
                var y = Math.floor(Math.random()*(map.offsetHeight/this.height))*this.height;
                this.x=x;
                this.y=y;
                div.style.left = this.x+"px";
                div.style.top = this.y+"px";
                element.push(div);
            };
            function remove(){
                for(var i=0;i<element.length;i++){
                    var ele = element[i];
                    ele.parentNode.removeChild(ele);
                    element.splice(i,1);
                }
            };
            window.food = new Food();
        }());

 

 

小蛇:每个身体都有宽和高,背景颜色,小蛇运动的方向

小蛇就是一个对象，身体分三个部分,每个部分都是一个对象,每个部分都有横纵坐标,背景颜色

小蛇显示再地图上,先删除之前的小蛇,再进行初始化--方法.

小蛇移动--方法

把小蛇的头的坐标给身体第一部的,身体第一部分的坐标给下一部分,依次类推

小蛇的头需要单独的设置因为要考虑小蛇的方向:
    向上移动:横坐标不动,纵坐标-1
    向下移动:横坐标不动,纵坐标+1
    向左移动:纵坐标不懂,横坐标-1
    向右移动:纵坐标不动,横坐标+1

(function(){
            var element=[];
            function Snake(){
                this.width=20;
                this.height=20;
                this.Design=[
                    {x:3,y:3,color:"green"},
                    {x:2,y:3,color:"yellow"},
                    {x:1,y:3,color:"yellow"}
                ];
                this.direction = "right";
            };
            
            Snake.prototype.FoundSnake=function(){
                remove();
                for(var i=0;i<this.Design.length;i++){
                    var div = document.createElement("div");
                    map.appendChild(div);
                    div.style.width=this.width+"px";
                    div.style.height=this.height+"px";
                    div.style.position="absolute";
                    div.style.left=this.Design[i].x*this.width+"px";
                    div.style.top=this.Design[i].y*this.height+"px";
                    div.style.backgroundColor=this.Design[i].color;
                    div.style.borderRadius="50%";
                    div.innerHTML=i;
                    element.push(div);
                }
                
            };
            Snake.prototype.SnakeMove=function(){
                
                for(var i=this.Design.length-1;i>0;i--){//没有头
                    this.Design[i].x=this.Design[i-1].x;
                    this.Design[i].y=this.Design[i-1].y;
                }
                
                switch(this.direction){
                    case "right":this.Design[0].x+=1;break;
                    case "left":this.Design[0].x-=1;break;
                    case "top":this.Design[0].y-=1;break;
                    case "bottom":this.Design[0].y+=1;break;
                       };
                
                var headx = this.Design[0].x*this.width;
                var heady = this.Design[0].y*this.height;
                var foodx = food.x;
                var foody = food.y;
                console.log("x"+headx==foodx);
                console.log("y"+heady==foody);
                if(headx==foodx && heady==foody){
                   this.Design.push({
                       x:this.Design[this.Design.length-1].x,
                       y:this.Design[this.Design.length-1].y,
                       color:this.Design[this.Design.length-1].color
                   });
                    food.FoundFood();
                   }
            };
            function remove(){
                for(var i=element.length-1;i>=0;i--){
                    var ele = element[i];
                    ele.parentNode.removeChild(ele);
                    element.splice(i,1);
                };
            };
            
            window.snake=new Snake();
        }());

游戏:

初始化食物,初始化小蛇 -- 方法
    先初始化食物,再初始化小蛇

利用定时器让小蛇动起来 -- 方法
    先让小蛇移动一下,再把小蛇之前的身体删除再初始化小蛇
    在小蛇移动一次就判断一次小蛇有没有'撞墙'(可以通过坐标确定,也可以通过距离确定)和'咬到自己身体'

通过键盘按键改变小蛇的方向 --方法
    可以通过事件参数对象获取键值也可以通过event的keycode属性获取

(function(){
            function Game(){
            };
            Game.prototype.FoundGame = function(){
                food.FoundFood();
                snake.FoundSnake();    
                this.RunGame();
                this.UserSnake();
            }
            Game.prototype.RunGame = function(){
                var stop = setInterval(function(){
                    snake.SnakeMove();
                    snake.FoundSnake();
                var Mapx = map.offsetWidth/snake.width;
                var Mapy = map.offsetHeight/snake.height;
                var Headx = snake.Design[0].x;
                var Heady = snake.Design[0].y;
                
                if(Headx<0 || Headx>=Mapx){
                    map.innerHTML="<font size=7 color='red'>游戏结束</font>";
                   clearInterval(stop);
                   };
                if(Heady<0 || Heady>=Mapy){
                   clearInterval(stop);
                    map.innerHTML="<font size=7 color='red'>游戏结束</font>";
                   };
                for(var i=snake.Design.length-1;i>0;i--){
                    if(snake.Design[0].x==snake.Design[i].x && snake.Design[0].y==snake.Design[i].y){
                       clearInterval(stop);
                    map.innerHTML="<font size=7 color='red'>游戏结束</font>";
                       };
                };
                },150);
                
            };
            Game.prototype.UserSnake = function(){
                document.addEventListener("keydown",function(){
                    var kd = event.keyCode;
                    if(snake.Design[0].y == snake.Design[1].y){
                       if(snake.direction == "right"){ 
                               if(kd == 65){ kd=68};
                       };
                        if(snake.direction == "left"){
                               if(kd == 68){ kd=65};
                           }
                       };
                    if(snake.Design[0].x == snake.Design[1].x){
                       if(snake.direction == "top"){
                              if(kd == 83){ kd=87};
                          };
                        if(snake.direction == "bottom"){
                              if(kd == 87){ kd=83};
                          };
                       };
                    switch(kd){
                        case 65:snake.direction="left";break;
                        case 68:snake.direction="right";break;
                        case 87:snake.direction="top";break;
                        case 83:snake.direction="bottom";break;
                           };
                });
            }
            
            window.game = new Game();
        }());

 

最后:

game.FoundGame();

游戏也可以进行功能修改:通过添加按钮,点击按钮改变小蛇的速度、形状等等

 

Javascript高级学习记录1.

加油！！！