微信小程序-贪食蛇

博客班级	https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标	1.编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改 2.熟悉git代码管理流程，将源代码上传到到 3.github在博客园班级中写一篇相应的博文
作业源代码	https://github.com/chenkeyuanzucc31801144/SE2020tanshishe
专业	计算机科学与技术
姓名	陈科源
学号	31801144

前言

这是我第一次学做微信小程序，主要是学习别人的代码并加以理解和修改

开发工具：微信开发者工具

贪食蛇是很多人玩过的一款十分有趣的小游戏，本人小时候非常喜欢玩，并梦想有一天能够参与某款游戏的制作中。

当然现在我的水平离制造一款游戏还非常遥远。这次作业我从零开始，先是了解了微信开发程序的部分功能，再理解了一个他人制造的一个“贪食蛇”小程序，并根据自己极其有限的水平稍微修改了一下这款游戏的部分功能。本来是想能够让这款功能单一的游戏变得稍微有趣起来，只可惜时间、能力都比较欠缺，因此很多功能无法实现。当然，如果将来能够进一步学习开发工具的更多功能以及深入对程序的理解，相信在不久的将来面对类似的程序，想要达成的功能大多能够得以实现。

效果演示

游戏开始

游戏中

进食一瞬间

游戏结束

代码分析

app.json代码主要是用于背景界面的设计

{
  "pages": [
    "pages/snake/snake",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "贪吃蛇",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

app.js代码主要用于接口的调用和本地用户数据的获取

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync(\'logs\') || []
    logs.unshift(Date.now())
    wx.setStorageSync(\'logs\', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

index.wxml代码主要用于类和对象的定义

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

snake.js代码主要用于解释小程序运行的方法，也是小程序的核心代码.

//snake.js
var app = getApp();

Page({
   data:{
        score: 0,//比分
        maxscore: 0,//最高分
        startx: 0,
        starty: 0,
        endx:0,
        endy:0,//以上四个做方向判断来用
        ground:[],//存储操场每个方块
        rows:28,//操场纵向长度
        cols:22,//操场横向长度
                //操场大小
        snake:[],//存蛇
        food:[],//存食物
        direction:\'\',//方向
        modalHidden: true,
        timer:\'\'
   } ,
   onLoad:function(){
     
       var maxscore = wx.getStorageSync(\'maxscore\');
       if(!maxscore) maxscore = 0
        this.setData({
        maxscore:maxscore
        });
        
        this.initGround(this.data.rows,this.data.cols);//初始化操场
        this.initSnake(3);//初始化蛇，数字为蛇的长度
        this.creatFood();//初始化食物
        this.move();//蛇移动
   },
   //计分器
    storeScore:function(){

      if(this.data.maxscore < this.data.score){
      this.setData({
        maxscore:this.data.score
        })
        wx.setStorageSync(\'maxscore\', this.data.maxscore)
      }
  },
  //操场
    initGround:function(rows,cols){
        for(var i=0;i<rows;i++){
            var arr=[];
            this.data.ground.push(arr);
            for(var j=0;j<cols;j++){
                this.data.ground[i].push(0);
            }
        }
    },
   //蛇
   initSnake:function(len){
       for(var i=0;i<len;i++){
           this.data.ground[0][i]=1;//前者为蛇的初始纵坐标，后者为蛇的初始横坐标
           this.data.snake.push([0,i]);
       }
   },
   //移动函数
   move:function(){
       var that=this;
       this.data.timer=setInterval(function(){
           that.changeDirection(that.data.direction);
            that.setData({
               ground:that.data.ground
           });
           
       },(300));//蛇的移动速度，数字越小蛇移动速度越快,因为数字代表的是蛇停顿的毫秒数
      
   },

    tapStart: function(event){
        this.setData({
            startx: event.touches[0].pageX,
            starty: event.touches[0].pageY
            })
    },
    tapMove: function(event){
        this.setData({
            endx: event.touches[0].pageX,
            endy: event.touches[0].pageY
            })
    },
    tapEnd: function(event){
        var heng = (this.data.endx) ? (this.data.endx - this.data.startx) : 0;
        var shu = (this.data.endy) ? (this.data.endy - this.data.starty) : 0;

        if(Math.abs(heng) > 5 || Math.abs(shu) > 5){
            var direction = (Math.abs(heng) > Math.abs(shu)) ? this.computeDir(1, heng):this.computeDir(0, shu);
            switch(direction){
            case \'left\':
                if(this.data.direction==\'right\')return;
                break;
            case \'right\':
                if(this.data.direction==\'left\')return;
                break;
            case \'top\':
                if(this.data.direction==\'bottom\')return;
                break;
            case \'bottom\':
                if(this.data.direction==\'top\')return;
                break;
            default:
        }
        this.setData({
        startx:0,
        starty:0,
        endx:0,
        endy:0,
        direction:direction
        })
        
    }
    },
    computeDir: function(heng, num){
    if(heng) return (num > 0) ? \'right\' : \'left\';
    return (num > 0) ? \'bottom\' : \'top\';
    },
    creatFood:function(){
        var x=Math.floor(Math.random()*this.data.rows);
        var y=Math.floor(Math.random()*this.data.cols);
        var ground= this.data.ground;
        ground[x][y]=2;
        this.setData({
            ground:ground,
            food:[x,y],//随机生成食物的坐标
        });
    },
    //接下来是转变方向的代码，左、右、上、下
    changeDirection:function(dir){
        switch(dir){
        case \'left\':
            return this.changeLeft();
            break;
        case \'right\':
            return this.changeRight();
            break;
        case \'top\':
            return this.changeTop();
            break;
        case \'bottom\':
            return this.changeBottom();
            break;
        default:
        }
    },
    changeLeft:function(){
        
        var arr=this.data.snake;
        var len=this.data.snake.length;
        var snakeHEAD=arr[len-1][1];
        var snakeTAIL=arr[0];
        var ground=this.data.ground;
        ground[snakeTAIL[0]][snakeTAIL[1]]=0;  
        for(var i=0;i<len-1;i++){
                arr[i]=arr[i+1];   
        };

        var x=arr[len-1][0];
        var y=arr[len-1][1]-1;
        arr[len-1]=[x,y];
            this.checkGame(snakeTAIL);
        for(var i=1;i<len;i++){
            ground[arr[i][0]][arr[i][1]]=1;
        } 
        
    this.setData({
                ground:ground,
            snake:arr
        });
        
        return true;
    },
    changeRight:function(){
        
        var arr=this.data.snake;
        var len=this.data.snake.length;
        var snakeHEAD=arr[len-1][1];
        var snakeTAIL=arr[0];
        var ground=this.data.ground;
        ground[snakeTAIL[0]][snakeTAIL[1]]=0;  
        for(var i=0;i<len-1;i++){
                arr[i]=arr[i+1];   
        };

        var x=arr[len-1][0];
        var y=arr[len-1][1]+1;
        arr[len-1]=[x,y];
        this.checkGame(snakeTAIL);
        for(var i=1;i<len;i++){
            ground[arr[i][0]][arr[i][1]]=1;

        } 
        
        this.setData({
                ground:ground,
            snake:arr
        });
        
        
    //    var y=this.data.snake[0][1];
    //    var x=this.data.snake[0][0];
    //     this.data.ground[x][y]=0;
    //     console.log(this.data.ground[x]);
    //      console.log(this.data.snake);
    //     for(var i=0;i<this.data.snake.length-1;i++){
    //         this.data.snake[i]=this.data.snake[i+1];
    //     }
    //     this.data.snake[this.data.snake.length-1][1]++;
    //     for(var j=1;j<this.data.snake.length;j++){
    //         this.data.ground[this.data.snake[j][0]][this.data.snake[j][1]]=1;
    //     }
        return true;
    },
    changeTop:function(){
        
        var arr=this.data.snake;
        var len=this.data.snake.length;
        var snakeHEAD=arr[len-1][1];
        var snakeTAIL=arr[0];
        var ground=this.data.ground;
        ground[snakeTAIL[0]][snakeTAIL[1]]=0;  
        for(var i=0;i<len-1;i++){
                arr[i]=arr[i+1];   
        };

        var x=arr[len-1][0]-1;
        var y=arr[len-1][1];
        arr[len-1]=[x,y];
            this.checkGame(snakeTAIL);
        for(var i=1;i<len;i++){
            ground[arr[i][0]][arr[i][1]]=1;
        } 
        this.setData({
            ground:ground,
            snake:arr
        });
      
        return true;
    },
    changeBottom:function(){
        
        var arr=this.data.snake;
        var len=this.data.snake.length;
        var snakeHEAD=arr[len-1];
        var snakeTAIL=arr[0];
        var ground=this.data.ground;
        
        ground[snakeTAIL[0]][snakeTAIL[1]]=0;  
        for(var i=0;i<len-1;i++){
                arr[i]=arr[i+1];   
        };
        var x=arr[len-1][0]+1;
        var y=arr[len-1][1];
        arr[len-1]=[x,y];
        this.checkGame(snakeTAIL);
        for(var i=1;i<len;i++){
            ground[arr[i][0]][arr[i][1]]=1;
        } 
        this.setData({
            ground:ground,
            snake:arr
        });
        return true;
    },
    checkGame:function(snakeTAIL){
        var arr=this.data.snake;
        var len=this.data.snake.length;
        var snakeHEAD=arr[len-1];
        if(snakeHEAD[0]<0||snakeHEAD[0]>=this.data.rows||snakeHEAD[1]>=this.data.cols||snakeHEAD[1]<0){
                clearInterval(this.data.timer);
                    this.setData({
                    modalHidden: false,
                        })  
        }
        for(var i=0;i<len-1;i++){
            if(arr[i][0]==snakeHEAD[0]&&arr[i][1]==snakeHEAD[1]){
                clearInterval(this.data.timer);
                    this.setData({
                        modalHidden: false,
                    })
            }
        }
        if(snakeHEAD[0]==this.data.food[0]&&snakeHEAD[1]==this.data.food[1]&&this.data.score%50==0&&this.data.score!=0)//如果分数达到了50的倍数，除了0分以外吃掉食物都可以得到20分
        {
            arr.unshift(snakeTAIL);
            this.setData({
                score:this.data.score+20 //吃一个食物奖励20分
            });
            this.storeScore();
            this.creatFood();
        }
        if(snakeHEAD[0]==this.data.food[0]&&snakeHEAD[1]==this.data.food[1])
        {//如果分数不是50的倍数，或者0分时吃掉食物都可以得到10分
            arr.unshift(snakeTAIL);
            this.setData({
                score:this.data.score+10 //吃一个食物奖励10分
            });
            this.storeScore();
            this.creatFood();
        }
    },
    modalChange:function(){
    this.setData({
            score: 0,
            ground:[],
            snake:[],
            food:[],
            modalHidden: true,
            direction:\'\'
    })
    this.onLoad();
    }

  
});

总结

这是我第一次做这种类型的作业，也是第一次使用微信开发者工具，刚收到作业的时候觉得难度太大了，完全没有思路。后来大佬们的作品逐个上传之后，给了我很大的启发，再根据自己内心的想法完成了这次作业。其实很多操作并不困难，无奈自己的水平实在有限，在有经验的同学们的指点下，才勉强完成一点点任务，让我意识到自己知识的薄弱。我对这作品有更高的期待，但是实力和时间制约了最终的成品，日后尽可能会实现自己想要做出的功能。这次作业也是让我对小程序的开发过了把瘾，软件小程序设计的各项基本功能，还有待于我的探索。计算机这个行业可谓是日新月异，不学习就会被淘汰，希望本人能够提升终身学习的能力。最后，希望大家能多指点本人的作品，提出不足，谢谢！

本文链接：https://www.cnblogs.com/ckyzucc/p/13855290.html

微信小程序-贪食蛇

微信小程序-贪食蛇的更多相关文章

随机推荐

热门专题

目录导航