Skip to content

Commit 4d6ff3c

Browse files
author
hans
committed
add polyon game
1 parent eedc985 commit 4d6ff3c

File tree

3 files changed

+195
-2
lines changed

3 files changed

+195
-2
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,19 @@
2626
> 操作DOM
2727
2828
- [colorpicker拾色器]([https://github.com/haima16/JavaScript/tree/master/%E5%8E%9F%E7%94%9F%E5%B0%81%E8%A3%85/colorpicker](https://github.com/haima16/JavaScript/tree/master/原生封装/colorpicker)) | [掘金详解](https://juejin.im/post/5d386043f265da1b7f29c1ab)
29-
3029
- [拼图游戏](https://github.com/haima16/JavaScript/tree/master/game/puzzle/test)
3130
- [扫雷游戏](https://github.com/haima16/JavaScript/blob/master/game/扫雷)
3231
- [打砖块游戏](https://github.com/haima16/JavaScript/tree/master/game/blockout)
32+
- [media封装](https://github.com/haima16/media) | [掘金详解](https://juejin.im/post/5d58bc4b6fb9a06b0202c005)
3333

3434
> canvas
3535
3636
- [真实时钟案例](https://github.com/haima16/JavaScript/tree/master/canvas/clock) | [掘金详解](https://juejin.im/post/5d2bf800f265da1bab29de81)
3737
- [绚丽的数字时钟案例](https://github.com/haima16/JavaScript/tree/master/canvas/digit-clock) | [掘金详解](https://juejin.im/post/5d006433e51d45775c73dcc1)
3838
- [飞机大战游戏案例](https://github.com/haima16/JavaScript/tree/master/canvas/plane) | [掘金详解](https://juejin.im/post/5d2d46506fb9a07ed740afe8)
3939
- [打砖块游戏案例 - canvas版](https://github.com/haima16/JavaScript/tree/master/canvas/blockout)
40-
4140
- [绘制思维导图](https://github.com/haima16/JavaScript/tree/master/canvas/mind)
41+
- 最强大脑-寻找阿基米德项目
4242

4343
### 5、框架
4444

‎canvas/polyon/index.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<style>
9+
#canvas {
10+
display: block;
11+
margin: 0 auto;
12+
background-color: #f1f1f1;
13+
}
14+
.ctrl {
15+
margin-top: 20px;
16+
text-align: center;
17+
}
18+
span {
19+
user-select: none;
20+
}
21+
span:hover {
22+
background-color: #eee;
23+
cursor: pointer;
24+
}
25+
h2 {
26+
margin: 5px;
27+
text-align: center;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<h2>动动大脑，推理一个有几个三角形、四、五、六边形？</h2>
33+
<canvas id="canvas" width="800" height="500"></canvas>
34+
<div class="ctrl">
35+
<span id="show">是否显示外轮廓</span>
36+
<span id="update">重新生成</span>
37+
</div>
38+
</body>
39+
<script src="./scene.js"></script>
40+
<script>
41+
let ctx = canvas.getContext('2d')
42+
if (devicePixelRatio) {
43+
let oldWidth = canvas.width;
44+
let oldHeight = canvas.height;
45+
canvas.width = oldWidth * devicePixelRatio;
46+
canvas.height = oldHeight * devicePixelRatio;
47+
canvas.style.width = oldWidth + 'px';
48+
canvas.style.height = oldHeight + 'px';
49+
ctx.scale(devicePixelRatio, devicePixelRatio);
50+
}
51+
let game = new Scene(ctx, 800, 500)
52+
let radius = [100, 150, 200, 250]
53+
let speed = [1, 1.5, 2, 2.5]
54+
55+
update.onclick = function() {
56+
create()
57+
show.flag = false
58+
}
59+
show.onclick = function() {
60+
show.flag = !show.flag
61+
game.setOutline(show.flag)
62+
}
63+
function create() {
64+
let count = rand(5, 11)
65+
game.clear()
66+
for (let i = 0; i < count; i++) {
67+
let p = new Polygon(game, rand(3, 7), 100 * rand(1, 7), 100 * rand(1, 4), radius[rand(0, radius.length-1)], 15 * rand(0, 24))
68+
p.setSpeed(speed[rand(0, speed.length-1)])
69+
game.add(p)
70+
71+
}
72+
}
73+
function rand(min, max) {
74+
return ((max - min) * Math.random() + min) | 0
75+
}
76+
</script>
77+
</html>

‎canvas/polyon/scene.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
class Scene {
2+
constructor(ctx, width, height) {
3+
this.ctx = ctx
4+
this.width = width
5+
this.height = height
6+
this.init()
7+
}
8+
init() {
9+
this.actors = []
10+
this.update()
11+
}
12+
clear() {
13+
this.actors = []
14+
}
15+
add(polygon) {
16+
this.actors.push(polygon)
17+
}
18+
setOutline(flag) {
19+
this.actors.forEach(e => e.outline = !!flag)
20+
}
21+
update() {
22+
this.ctx.clearRect(0, 0, this.width, this.height)
23+
this.actors.forEach(e => e.update())
24+
requestAnimationFrame(this.update.bind(this))
25+
}
26+
}
27+
28+
class Util {
29+
static sin(angle) {
30+
return Math.sin(angle * Math.PI / 180)
31+
}
32+
static cos(angle) {
33+
return Math.cos(angle * Math.PI / 180)
34+
}
35+
}
36+
37+
class Polygon {
38+
constructor(scene, count=3, posX=0, posY=0, radius=10, angle=0) {
39+
this.scene = scene
40+
this.count = count
41+
this.posX = posX
42+
this.posY = posY
43+
this.radius = radius
44+
this.angle = angle
45+
this.init()
46+
}
47+
init() {
48+
this.outline = false
49+
this.initCalcPoints()
50+
this.ball = new Ball(this.scene)
51+
}
52+
setSpeed(val) {
53+
this.ball.speed = val
54+
}
55+
initCalcPoints() {
56+
let per = 360 / this.count
57+
this.points = []
58+
for (let i = 0; i < this.count; i++) {
59+
let x = Util.cos(this.angle + i * per + 180) * this.radius + this.posX
60+
let y = Util.sin(this.angle + i * per + 180) * this.radius + this.posY
61+
this.points.push({ x, y })
62+
}
63+
}
64+
render() {
65+
let { ctx } = this.scene
66+
ctx.beginPath()
67+
this.points.forEach((e, i) => {
68+
i ? ctx.lineTo(e.x, e.y) : ctx.moveTo(e.x, e.y)
69+
})
70+
ctx.closePath()
71+
ctx.stroke()
72+
}
73+
diff() {
74+
let whichEdge = this.ball.distance / this.radius % this.count | 0
75+
let lenEdge = this.ball.distance % this.radius
76+
let rate = lenEdge / this.radius
77+
let p2 = this.points[((whichEdge + 1) % this.count)]
78+
let p1 = this.points[whichEdge]
79+
let x = rate * (p2.x - p1.x) + p1.x
80+
let y = rate * (p2.y - p1.y) + p1.y
81+
return { x, y }
82+
}
83+
update() {
84+
this.ball.update(this.diff())
85+
this.outline && this.render()
86+
}
87+
}
88+
89+
class Ball {
90+
constructor(scene) {
91+
this.scene = scene
92+
this.init()
93+
}
94+
init() {
95+
this.posX = 0
96+
this.posY = 0
97+
this.color = 'pink'
98+
this.radius = 15
99+
this.distance = 0
100+
this.speed = 2
101+
}
102+
render() {
103+
let { ctx } = this.scene
104+
ctx.fillStyle = this.color
105+
ctx.beginPath()
106+
ctx.arc(this.posX, this.posY, this.radius, 0, 2 * Math.PI)
107+
ctx.closePath()
108+
ctx.fill()
109+
}
110+
update({ x, y }) {
111+
this.distance += this.speed
112+
this.posX = x
113+
this.posY = y
114+
this.render()
115+
}
116+
}

0 commit comments

Comments
 (0)