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+10if(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;//如果被吃了，食物的横坐标就变0console.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>

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

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

微信小程序开发学习1（小程序的入门知识）
微信小程序开发学习1(小程序的入门知识) 1.制定学习目标: 能够知道如何创建小程序项目能够清楚小程序项目的基本组成结构能够知道小程序页面的几个组成部分能够知道小程序中常见的组件如何使用能够知 ...
【微信小程序开发（云壁纸小程序教程）】
微信小程序开发(云壁纸小程序教程) 1. 准备 HBuilder X 和微信开发者工具 2. 进入网站注册小程序 3. 点击发行,这时候就用到微信开发者工具 1. 准备 HBuilder X 和微 ...
微信小程序开发初试实例结算小助手
微信小程序开发初试实例结算小助手小程序码创作背景小程序功能小程序实现小程序开发方案(想看源代码,直接看这一项) 本着自己参加过学校组织的微信小程序云开发培训,就抱着尝试的心理去参加今年的高校 ...
微信小程序开发详细步骤(企业小程序开发流程)
今天珍奶bb给大家简单唠唠微信小程序开发详细步骤(企业小程序开发流程)? 微信小程序制作流程是什么?微信小程序制作模板套用怎么操作?今天珍奶bb给大家简单唠唠微信小程序制作流程是什么? 在唠微信小程序 ...
视频教程-老司机讲前端之微信小程序开发成语消消乐游戏视频课程-微信开发
老司机讲前端之微信小程序开发成语消消乐游戏视频课程中国实战派HTML5培训第一人,微软技术讲师,曾任百合网技术总监,博看文思HTML5总监.陶国荣长期致力于HTML5.JavaScript.CSS3 ...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-陶国荣-专题视频课程...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-102人已学习课程介绍本课通过一个完整.真实的游戏项目,带着学员手动开发代码,本课分项目介绍.界面效果.技术分析.代码实现.打包 ...
微信小程序开发学习文档（万字总结，一篇搞定前端开发）
一.微信小程序简介与网页开发不同,小程序有自己的一套标准开发模式:-申请小程序开发账号-安装小程序开发工具-创建和配置小程序项目 1.1 创建第一个小程序 1.2 主界面的5个组成部分 1.3小程序 ...
微信小程序开发打开另一个小程序的实现方法
微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json {..." ...
微信废品回收小程序开发上门回收废品小程序开发
废品回收小程序系统如何做_微信小程序助力废品回收微信废品回收小程序开发微信废品回收小程序开发
从网页到微信小程序开发：一：小程序与普通网页的区别
提示:文章内容大部分摘抄微信官方文档,不喜勿喷,在此做个记录,同时也提出自己的思考和想法,希望看到的人也可以提出自己的看法,我会依照大家的看法不断修改文章,谢谢大家支持! 前言相信有很多人都有过类似 ...

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

爱吃甜的小孩

1.工程目录

2.详细代码

3.结果展示

4.获取资源

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

最新文章

热门文章