-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
132 lines (127 loc) · 4.31 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>guojufeng的项目列表</title>
<link rel="stylesheet" href="./assets/main.css">
</head>
<body>
<div class="main">
<h1>小石头项目集</h1>
<ul>
<!-- 1、平行世界的你 -->
<li>
<div class="title">
<a class="orange"
href="http://static.adcode.cn/20180508-zhihu-young/index.html?from=singlemessage&isappinstalled=0"
target="_blank"><b>平行世界的你></b></a>
</div>
<div class="describe">
<p>
仿做知乎的一个h5项目 - [<a class="blue" href="zhihuYoung/dist/html/index.html" target="_blank">平行世界的你</a>]。
</p>
<p>
要解决的问题(自己需要学习的知识点)很多，主要是练习了<strong>video</strong>的各种方法、事件还有<strong>canvas</strong>怎么操作图画完成一个互动性很强的游戏类型的h5页面。
</p>
<span class="time">time: 2018.06</span>
</div>
</li>
<!-- 2、大鱼吃小鱼游戏 -->
<li>
<div class="title">
<a class="orange" href="https://www.imooc.com/video/9904"><b>大鱼吃小鱼></b></a>
</div>
<div class="describe">
<p>
一个游戏 - [<a class="blue" href="fishGame/index.html" target="_blank">大鱼吃小鱼</a>]。
</p>
<p>
canvas绘制
</p>
<span class="time">time: 2018.12</span>
</div>
</li>
<!-- 3、贪吃蛇游戏 -->
<li>
<div class="title">
<a class="orange no-dec" href="javascript:void(0);"><b>贪吃蛇小游戏</b></a>
</div>
<div class="describe">
<p>
制作了一个小游戏 - [<a class="blue" href="gluttonousSnake/index.html" target="_blank">贪吃蛇小游戏</a>]。
</p>
<p>
原生js，dom操作，面向对象，原型链。
</p>
<p>
下个目标 - 改造成移动端游戏
</p>
<span class="time">time: 2019.02</span>
</div>
</li>
<!-- 4、自定义视频控件 -->
<li>
<div class="title">
<a class="orange no-dec" href="javascript:void(0);"><b>自定义视频控件</b></a>
</div>
<div class="describe">
<p>
摆脱原生视频控件的烦恼 - [<a class="blue" href="userDefinedVideo/index.html" target="_blank">自定义视频控件</a>]。
</p>
<p>
html5的video标签，使用了自己的组件
</p>
<p>
下个目标 - 可以拖动视频进度条和音量进度条
</p>
<span class="time">time: 2019.04</span>
</div>
</li>
<!-- 5、像素鸟 -->
<li>
<div class="title">
<a class="orange no-dec" href="javascript:void(0);"><b>像素鸟</b></a>
</div>
<div class="describe">
<p>
怀念童年 - [<a class="blue" href="pixelBird/index.html" target="_blank">像素鸟</a>]。
</p>
<p>
ES6-class，面向对象思想，矩形的碰撞检测解决方案
</p>
<p>
下个目标 - 添加游戏开始与结束、添加分值、时间记录，开发移动端游戏
</p>
<span class="time">time: 2020.07.08</span>
</div>
</li>
<!-- 6、推箱子 -->
<li>
<div class="title">
<a class="orange no-dec" href="javascript:void(0);"><b>推箱子</b></a>
</div>
<div class="describe">
<p>
怀念童年 - [<a class="blue" href="Sokoban/index.html" target="_blank">推箱子</a>]。
</p>
<p>
ES6模块化，关卡与地图生成的数据结构设计
</p>
<span class="time">time: 2020.09.25</span>
</div>
</li>
<!-- 尽请期待 -->
<li class="pending">
<div class="title">
<a class="orange" href=""><b>pending></b></a>
</div>
<div class="describe">
pending
</div>
</li>
</ul>
</div>
</body>
</html>