H5融媒体设计与制作大赛

比赛专用框架

比赛时是不允许自己带u盘进去,因此只能将框架代码记忆下来,进入以后可在准备阶段将代码写下来,在比赛开始时,将框架代码通过主办方提供的u盘传给队友,以便分工完成不同的场景分片。框架以Application为核心,Scene为选手需要完成的内容,交互动画则需要自己在css中设定好,或者在Scene中自己灵活去改变。框架示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
window.onload = function() {
var app = Application()

app.scenes = [
Scene1(app),
]

app.run()

}

var log = console.log.bind(console)

var $ = function(sel) {
var s = document.querySelectorAll(sel)
return s.length > 1 ? s : s[0]
}

var Application = function() {
var o = {
scenes: [],
scene: null,
w: window.innerWidth,
h: window.innerHeight,
dragable: true,
moved: false,
current: 0,
start: 0,
end: 0
}

o.setup = function() {
o.scene = $(".scene")
window.addEventListener("resize", function() {
o.w = window.innerWidth
o.h = window.innerHeight
})
window.addEventListener("touchstart", function(e) {
o.start = e.targetTouches[0].clientY
})
window.addEventListener("touchmove", function(e) {
o.end = e.targetTouches[0].clientY
o.moved = true
})
window.addEventListener("touchend", function(e) {
// 1、阻止时间冒泡
e.stopPropagation()
e.stopImmediatePropagation()
// 2、计算位移量的绝对是值是否超过
var moveY = o.end - o.start
var abs = Math.abs(moveY)
var overBorder = abs >= o.h * 0.2
if(o.dragable && o.moved && overBorder) {
if(moveY > 0) {
o.goBackScene()
} else {
o.goNextScene()
}
}
})
return o
}

o.run = function() {
var s = o.scenes[o.current]
s && s.run && s.run()
}

o.replace = function() {
var p = o.current * o.h
o.scene.style.transform = "translateY(" + -p + "px)"
o.dragable = false
o.run()
}

o.ready = function() {
o.dragable = true
}

o.goBackScene = function() {
var next = o.current - 1
o.current = next < 1 ? o.current : next
o.replace()
}
o.goNextScene = function() {
var next = o.current + 1
o.current = next >= o.scenes.length ? o.current : next
o.replace()
}

return o.setup()
}

var Scene1 = function(app) {
var o = {
progress: 0
}

o.run = function() {
var p = document.querySelector(".progress")

var timer = setInterval(function() {
o.progress += Math.random() * 10 + 2;

if(o.progress >= 100) {
o.progress = 100
clearInterval(timer)
setTimeout(function() {
app.goNextScene()
}, 400)
}
p.innerText = Math.floor(o.progress) + "%"

}, 400)

}

return o
}

var Scene2 = function() {
var o = {
current: 0,
}
o.setup = function() {
var doms = $('.hidden')
var domAction = function(event) {
o.current += 1
var dom = doms[o.current]
// classList es5方法
dom && dom.classList.remove('hidden')
}
for(var i = 0; i < doms.length; i++) {
doms[i].addEventListener('transitionend', domAction)
doms[i].addEventListener('webkitTransitionEnd', domAction)
}
doms[0].classList.remove('hidden')

}
o.run = function() {
o.setup()
}
return o
}

注意事项

  • 在进入赛场时,首先完成框架的编写。
  • 然后完成整个项目的目录、文件等准备工作。
  • 比赛开始时,首先将任务一、任务二的任务书分开,一人研究任务一,两人研究任务二,任务二的队员将任务二的场景分配好后完成下一步。
  • 一个队友完成切图工作,另一个队友完成加载界面的Scene编写,等待队友将加载界面图切完,将第一个场景完成。
  • 接着按照分工分别完成场景布局和逻辑代码的编写。
  • 预留半个小时以上的时间进行代码合并,检查内容是否正确,这个时间越长越好,以防出现bug。不管如何都要先将一份完成的放入u盘,就算有bug也要放,因为比赛时间到了是不允许再碰电脑的。