Web源码笔记：大鱼游戏开发与小程序控制及处理.pdfVIP

今天学习的内容

1:复习昨天知识点

2:作业:[大鱼]

2.1:大鱼跟随鼠标移动

-为画布绑定鼠标移动e.offsetXe.offsetY位置main.js

-将鼠标位置赋值大鱼this.xthis.y

-外观效果不是很美观

2.2:大鱼吃食物

-在画布上大鱼碰到一个食物表示食物被了

-碰撞检测:两点之间距离

-commFunctions.js

calLength2(x1,x2,y1,y2)

-collsion.js完成游戏中所有碰撞检测

3:今天目标

3.1:公众平台--小程序--数据显示与控制

-小程序在data对象保存数可以在模板中直使用

{{msg}}

-if

viewwx:if={{condition}}xxx/view

condition:表达式可以变量truefalse

true当前元素正常显示

false当前元素删除

-ifelse

viewwx:if={{condition}}/view

viewwx:elif={{condition}}/view

viewwx:else/view

-for

viewwx:for={{数组对象}}/view

:默认情况上当前对象item当前元素下标index

:修改默认值wx:for-item=当前对象wx:for-index=下标

:wx:key=index为了提高效率小程序在循环之前对数据

排序,需要值(不重复)排序

练习:通过循环控制指令输出9*9乘法表

3.2:公众平台---原生

pc端项目:屏幕970px操作鼠标键盘:点击

移动端项目:屏幕970px操作手指:触碰

移动端:

-操作依靠手指

-触摸-通用原生BOM

(1)touchstart当手指触碰屏幕时发生不管理几个手指

(2)touchmove当手指在屏幕滑动时连续触发

(3)touchend当手指离开屏幕时触发

#触摸操作13

#滑动操作12222..3

由于原生移动使用不是很方便,可以第js库

简单完成操作

zepto.js--相于pc端jquery

tap触碰一次

lonp长按一次300ms以上

swipe滑动

swipeLeft左滑

swipeRight右滑

swipeUp上滑

swipeDown下滑

#注意事项:屏幕滑动

*{touch-action:none}

3.3:公众平台--小程序--常见

-tap手指触碰屏幕后马上离开

-lonp手指触碰屏幕超过300ms离开旧

-longpress手指触碰屏幕超过300ms离开新

3.4:公众平台--小程序--绑定

-支持冒泡