微信小程序开发之动图小游戏是实现（代码篇）

游戏名：爱吃糖的小孩

其主要是小程序画图并在定时器中不断更改图形的位置为实现动图效果

知识点：页面布局、定时器应用

笔者直接上代码，组件的详细介绍参考微信开发者文档：点击查看

嘿嘿！先来看看结果视频

微信小程序简单动图测试

1.工程目录

2.详细代码

index.js

Page({

  canvasIdErrorCallback:function(e){
    console.error(e.detail,errMsg)
  },
  /**
   * 页面的初始数据
   */
  data: {
    panduan:"false",//按钮的状态变量
    interval:"",//定时器
    xianshi:'开始',
    s:0,//分数的变量
    food:0,//分数
    a:"",//画图 食物的横坐标
    time:0,//时间
    setInter2:"",
    exitApp:''

  },

  position:{
    x:100,
    y:0
  },
  food_position:{
    x:200,
    y:50
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function (e) {
    this.draw();
  },
  canvasClick:function(){
    var l="haha";
 if(this.data.panduan=="false")//判断按钮的状态
 {

  this.setData({xianshi:"停止"})

    this.data.interval = setInterval(this.draw,200)
   
    this.data.setInter2 = setInterval(this.time, 1000)  
    this.data.panduan="true";
    console.log(this.data.panduan)


 }
 else
 {


  wx.showModal({
    title: '提示',
    content: '已暂停游戏',
    confirmText:'继续游戏',
   
       success: function (res) {
        if (res.confirm) {
            console.log('继续游戏')

        }else{
           console.log('退出游戏')
          
        }

    }
})

   this.setData({xianshi:"运行"})
   this.data.panduan="false"
   console.log(this.data.panduan)
   clearInterval(this.data.interval)//停止定时器
   clearInterval(this.data.setInter2)

 }
},
 left:function(){

 // this.position.x = getRawX();
 this.position.x=this.position.x-20;

 },
  right:function(){
    this.position.x= this.position.x+20;
  },
  time:function () {
    this.data.time ++;
    this.setData({time:this.data.time});
 
},


  draw:function(){

   // this.position.x ++;
    this.position.y = this.position.y +20;
  var context = wx.createContext()
//画脸
 context = wx.createContext()
 context.setStrokeStyle("#ff0000")
 context.setLineWidth(2)
    context.rect(this.position.x, this.position.y, 50, 50)
    context.arc(this.position.x-10,this.position.y,10,0,2 * Math.PI, true)
    context.moveTo(this.position.x+70, this.position.y)
   context.arc(this.position.x+60,this.position.y,10,0,2 * Math.PI, false)
    context.moveTo(this.position.x+25, this.position.y+10)
    context.arc(this.position.x+20,this.position.y+10,5,0,2 * Math.PI, false)
    context.moveTo(this.position.x+45, this.position.y+10)
    context.arc(this.position.x+40,this.position.y+10,5,0,2 * Math.PI, false)
    context.moveTo(this.position.x+40, this.position.y+30)
    context.arc(this.position.x+30,this.position.y+30,10,0,1 * Math.PI, false) 


    //画食物
    context.setStrokeStyle("#ff0000")//颜色
    context.setLineWidth(2)
    context.moveTo(this.data.a+10, 200)//移动坐标
    context.arc(this.data.a,200,10,0,2 * Math.PI, true)//画圆
    this.data.a=this.data.a+10
    if(this.data.a>400)
    {
      this.data.a = 0;
    } 
    
    console.log('haha:'+this.position.x)
    console.log("xixi:"+this.data.a)
    console.log("gaodu:"+this.position.y)

//判断食物的坐标是不是在笑脸的的范围，如果在就让分数+1，且食物横左边改变
    if(this.data.a-60<this.position.x&&this.data.a-10>this.position.x&&this.position.y>140&&this.position.y<250)
    {
      this.data.a = 0;//如果被吃了，食物的横坐标就变0
      console.log('haha:'+this.data.a)
      this.data.s++
      this.setData({food:this.data.s})
      console.log(this.data.food)
    }
    
    
    
  context.stroke()

    wx.drawCanvas({

      //调用wx.drawCanvas,通过canvasId指定在哪张画布上绘制，通过actions指定绘制行为
      canvasId:"firstCanvas",
      actions:context.getActions(),//获取绘图动作数组
  
    })
    console.log(this.position.x )
   
    if(this.position.y>350) this.position.y=0;


  },

 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  //  clearInterval(this.data.interval)
  wx.offAccelerometerChange()
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

index.wxml

内容包括添加视频播放、轮转图片、多选框、单选框、实时获取输入值、按钮提交输入控件的数据

 
<!--index.wxml-->
<view class="container">
<text class="item2" >爱吃糖的小孩</text>
 
  <cover-view class="item1">分数：{{food}}    时间：{{time}}
  </cover-view>

 
 <canvas style="width:100%; height:800px;" canvas-id="firstCanvas"></canvas>

 <cover-view class="item" style="flex-direcction:row;">

  <cover-view class="item1" bindtap="left">左移
  </cover-view>
  <cover-view class="item1" bindtap="canvasClick">{{xianshi}}
  </cover-view>
  <cover-view class="item1" bindtap="right">右移
  </cover-view>
</cover-view>
<navigator  target="miniProgram" open-type="exit"> 退出当前小程序</navigator>

</view>

index.wxss

/**index.wxss**/
.container {
  width: 100%;
  height: 800px;
  margin-top: 0;
  background-color: chartreuse;



border-color: rgba(1, 5, 4, 0.404);
} 

.item {
  width: 100%;
  height: 200rpx;
  font-size: 26rpx;
  display:flex;

  display: flex;

  align-items: center;

  justify-content: center;
  margin-top: 0;
  background: rgba(81, 90, 143, 0.7);
} 


.item1 {
  width: 400rpx;
  height: 110rpx;
  font-size: 40rpx;
font-weight: 600;

  background: rgba(209, 18, 117, 0.7);

  display: flex;

  align-items: center;

  justify-content: center;
  vertical-align: middle;
  text-align: center;

line-height:center
} 


.item2 {
  font-size: 50rpx;

  color: rgb(7, 2, 2);
  font-weight: 800;

} 

3.结果展示

测试展示图

4.获取资源

【获取资源】

资源链接：点击获取

【注意】

不要尝试使用setData()去改变button的值，比如笔者想点击一下‘开始’健然后 按键上的字变成‘停止’，当笔者使用setData() ,在模拟器上运行一切符合预期结果，但是到了真机调试，setData并没有刷新button的显示字。后台调试信息button的值的确是被改变了，但是真机就是不刷新界面。所以笔者将button换成了 <cover-view>

【关注微信公众号一起来交流】

·