[游戏开发]移动互联应用总结

元素2D变换

transform: 变换，用于描述物体的位置旋转缩放

translate: 平移，第一个参数 水平平移量 右为正方向，第二个参数 竖直平移量 下为正方向

rotate 旋转

scale 缩放

skew 倾斜

transform-origin 变化的原点

transition:过渡

3D变化和animation动画

animation包含的属性：

animation-name:动画名称

animation-duration:动画播放时长

animation-timing-function:动画播放的速度曲线

animation-delay:动画延迟

animation-iteration-count:动画的迭代次数

animation-direction:动画播放方向

animation-fill-mode:动画填充模式

animationPlayState：动画播放状态 paused为暂停，running为播放

3D变换

要使用3d变换需要依序执行以下步骤：

1. 搭建3d场景，在父元素上设置：transform-style: preserve-3d;

2. 在父元素上设置透视距离：perspective: 100px;

3. 给场景添加演员，给场景元素添加子元素

4. 在子元素上使用3d变换

渐变色

背景的渐变色实际上是设置的 background-image 而不是 background-color

线性渐变

?background-image: linear-gradient(to right, #f00, #f00 50px, #0f0 50px, #0f0 100px, #00f 200px);

重复线性渐变

?background-image: repeating-linear-gradient(to right, #f00, #f00 50px, #00f 50px, #00f 100px);

径向渐变

background-image: radial-gradient(#f00, orange, #0f0, #ff0, #f0f);

background-image: radial-gradient(#f00, #f00 50px, #00f 50px, #00f 100px, #0f0 100px, #0f0 200px);

重复线性渐变

background-image: repeating-radial-gradient(#f00, #f00 50px, #ff0 50px, #ff0 100px);

JQuery

使用 $() 函数获取一个 jQuery 对象

给元素添加样式：

?$box.css('height', '100px')

$box.css('background-color', '#f00')

获取jquery对象的方法：

1.使用 css 选择器

let $li = $('ul>li')

2. 使用 dom 对象

先查询一个dom对象

let box = document.querySelector('.box')

使用dom对象获取一个jquery对象

let $box = $(box)

eq和get:

eq 读取对应索引位置的jquery对象

get 读取对应索引位置的dom对象

创建并插入元素

某个元素追加一个子节点

?$(document.body).append($box)

追加一个子节点到另一个元素中

?$box.appendTo($(document.body))

某个元素追加一个节点到头部

$(document.body).prepend($box)

追加一个子节点到另一个元素的头部

$box.prependTo($(document.body))

某个元素的前面追加一个元素

$box2.before($box)

某个元素被添加到另一个元素的前面

$box.insertBefore($box2)

某个元素的后面添加一个元素

$box2.after($box)

某个元素被添加到另一个元素的后面

$box.insertAfter($box2)

添加类

$box.addClass('active')

判断是否存在某个类名

$box.hasClass('active')

删除类

$box.removeClass('active')

读取属性

let clazz = $box.attr('class')

console.log(clazz);

赋值属性

$box.attr('my-data', 'hello world')

删除属性

$box.removeAttr('class')

绑定事件

1.使用事件属性

$btn.click(ev => {

? ? ? ? console.log('click');

? ? ? ? // ev 是jquery封装的事件对象

? ? ? ? console.log(ev);

? ? })

2.使用事件监听器

const handler = ev => {

? ? ? ?console.log(ev);

? ? ? ?console.log(1);

? ?}

// 绑定事件

$btn.on('click', handler)

遍历元素

$lis.each((index, item) => {

? ? ? ? // index 数组成员的索引

? ? ? ? console.log(index);

? ? ? ? // item 当前被遍历的数组成员

? ? ? ? // 此处的item是一个 dom 对象 不是jquery对象

? ? ? ? console.log(item);

? ? ? ? if ((index + 1) % 2 === 0) {

? ? ? ? ? ? $(item).css('background-color', '#f00')

? ? ? ? }

? ? })

index() 查询某个节点在集合中的索引

let index = $('.box').index($('.box:nth-child(3)'))

console.log(index);

find() 查询某个节点的后代节点

let $span = $('.box-list').find('.box>span')

console.log($span);

查询boxList的子节点

console.log(boxList.querySelector('.box>span'));

closest 查询最近的父节点

console.log($span.closest('.box-list'));

canvas画布

使用canvas的步骤

1. 创建canvas标签

2. 给canvas标签设置 width height 属性

3. 通过js 获取canvas标签

4. 通过canvas标签获取context画布上下文（画布对象）

5. 通过context绘制画布

绘制实心矩形：

ctx.fillRect(x, y, w, h)

x: 水平坐标

y: 竖直坐标

坐标原点在canvas左上角

?w: 宽度

h: 高度

ctx.fillRect(50, 100, 150, 50)

绘制镂空矩形，参数和实心矩形相同

ctx.strokeRect(300, 100, 200, 100)

清空矩形, 用于清空画布

ctx.clearRect(0, 0, 800, 600)

绘制实心文字

语法：ctx.fillText(text, x, y, max-width)

text: 要渲染的文本

x,y: 文本渲染的坐标位置

max-width: 文本最大宽度，当大于该宽度，文本字体将自动缩小以自适应宽度

ctx.fillText('祖国万岁!!', 200, 100, 100)

镂空文字

参数和实心文本相同

ctx.strokeText('祖国万岁!!', 200, 300)

画线

使用 beginPath 开启路径

ctx.beginPath()

移动笔头但不会记录路径上的线条

ctx.moveTo(400, 100)

用线绘制到下一个点

ctx.lineTo(200, 200)

ctx.lineTo(600, 200)

ctx.lineTo(400, 100)

将路径封闭

ctx.closePath()

将路径用镂空线条进行绘制

ctx.stroke()

绘制图片

语法:

ctx.drawImage(image, dx, dy);

ctx.drawImage(image, dx, dy, dWidth, dHeight);

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

image: img 标签的 dom 对象

dx dy: 图片在canvas中的坐标

dWidth dHeight: 图片在canvas中的宽高

sx, sy: 参考图片源，截图的坐标

sWidth, sHeight: 截图的宽高

多媒体标签

视频标签video

音频标签audio

属性：

width 标签宽度

height 标签高度

controls 控制面板

muted 静音

autoplay 自动播放

src 媒体源

preload 预载模式

loop 循环

poster 海报

使用自动播放+静音，能实现自动播放的效果

<video height="300" src="./video/oceans.mp4" controls autoplay muted></video>

微信小程序

常用标签

<page></page>

page 标签相当于 html 中的 body

<view></view>

view 标签相当于 html 中的 div

<text></text>

text 相当于 html 中的 span

<image></image>

image 相当于 html 中的 img

<block></block>

block 是一个自身不会显示的标签

模板语法

循环渲染

<view wx:for="{{array}}" wx:key="id">

? ? <!-- index: 是 wx:for 中隐式声明的变量，代表循环遍历array时的当前索引 -->

? ? <!-- item: 是 wx:for 中隐式声明的变量，代表循环遍历array时的当前数组成员 -->

? ? {{index}}: {{item}}

</view>

条件渲染

<view wx:for="{{table}}" wx:key="name">

? ? <text>{{index}}: 姓名 = {{item.name}}; 年龄 = {{item.age}}; 性别 = </text>

? ? <!-- wx:if 指令的值为布尔表达式，为true是渲染该节点，否则不渲染 -->

? ? <text wx:if="{{item.sex==='male'}}">男</text>

? ? <!-- wx:if 可以和 wx:elif、wx:else 连用 -->

? ? <text wx:elif="{{item.sex==='female'}}">女</text>

? ? <text wx:else>其他</text>

</view>