
微信小程序做游戏 教你怎么用微信小程序写2048小游戏
微信小程序做游戏,教你怎么用微信小程序写2048小游戏。这两天,微信小程序再次成为网友们谈论的一大热点,就在昨天下午,微信官方首次对微信小程序的能力进行了全面解读,并在现场对小程序作了案例展示。据微信官方介绍,小程序包括线下扫码、对话分享、消息通知、小程序切换、历史列表、公众号关联和搜索查找等7大功能。
虽然在官方公布的关于小程序的功能中并没有明确指出微信小程序可不可以做小游戏,但是还是有一些网友表示小程序是可以直接开发一些小游戏的,就在刚刚,小编看到一位网友发表的名为《微信小程序写2048小游戏》的文章,这位网友教了大家怎么使用微信小程序制作2048小游戏,一起看看他的分享。
具体原文内容如下:
为了证明我也能跟得上潮流,我也试了一下微信小程序,看了一官方的文档,觉得还是挺有意思的。感觉思想和代码风格有点跟Angular有点类似,废话少说,下面开始写。
编写步骤:
1、下载开发工具 小程序开发工具官方下载
2、创建项目扫码后进入
选择添加项目
选择无AppID,也可以开发,但不能在手机上浏览。等以后开放后再搞吧。后面的操作官方教程上面都有了,我主要分享写代码经验。 3、修改项目创建一个代码示例项目,如图
删除logs文件夹,只保留index文件夹,注意删除logs后,要更自以为是app.json
{
"pages":[
"pages/index/index"//注意删除原来的logs
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#000",
"navigationBarTextStyle":"white",
"navigationBarTitleText":"2048小游戏"
}
}
这样一个基于的项目架子就搭好了
4、编写代码代码我已写了一个简单的, GIT 2048小程序喜欢给个start 效果图如下:
5、开发中遇到的一些问题 1、没有滑动事件,又不能引入其它JS库,只能自己写一个,还好比较简单。主要利用touchstart、touchmove、touchend三个事件来解决这个问题 2、不能直接更新page.data中的数据,要使用this.setData这个函数,才能让页面重新渲染。其中最麻烦的更改data中的数组。
changeData : function( index,num ) {
var changedData = {};
changedData['mydata[' + index + ']'] = num;
this.setData(changedData);
}
这个一开始还不知道后面看文档才明白 3、动画处理在H5中直接更改Dom加样式就行了,在小程序中要使用animation这个类,在一开始写代码时没考虑到动画问题,所以数组结构出了点问题,所以动画做得不好。
//初始化动画
this.data.animation = wx.createAnimation({
duration: 100,
timingFunction: 'ease',
});
this.data.animation.scale(1.2,1.2).step().scale(1,1).step();
//渲染时
{{item ? item : ''}}
总结
1、没什么觉得特别,跟使用HBuild、Ionic等混合式开发差不太多。
2、不能引用其它库是一个特点的地方,让我又找到了写原生JS代码的乐趣。
3、路由、动画队列、渲染指令、数据绑订机制等,跟主流框架一至,原来会的,很快就能学会。我就看了一个下午。
具体能不能实现微信小程序制作出小游戏呢,现在也还不能得到明确的答案,或许真的有一天大家都可以直接在小程序上直接制作属于自己的小游戏也不一定!但是现在大家可以直接在微信小程序上DIY自己的照片了,那就是小编接下来想介绍的一个小应用:微信小程序嗨图,看看嗨图有什么功能先!
微信小程序嗨图功能
1、专题——DIY图片的模板,点击可以生成使用,分享到朋友圈。
2、分享墙——用户上传的自己DIY作品。
3、立即制作——可以用自己的图来DIY。
4、告诉我——告诉产品的改进,内容的增加。
想要体验怎么制作属于自己个性朋友圈照片的用户,等1月9号微信小程序上线后,扫一扫下面的二维码就可以啦!还等什么,赶紧扫码体验,开启你的嗨图之旅吧!


