(七) JavaScript-Canvas-滑动星座

JavaScript , 评论

JavaScript 是前端核心， 掌握这门语言是步入前端高手行列必经之路，噢，别忘了还有TypeScript, 学习它还需要OOP知识， 底层的浏览器原理、HTTP协议也必不可少， 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!

最终效果图

(七) JavaScript-Canvas-滑动星座

在上节的基础上增加了事件处理，使用addEventListener() 函数，数组元素的添加与删除在示例中也有应用

1. 设计网页代码

  • 创建一个数组存储所有Circle对象
  • 创建一个色相变量，用于每个圆的颜色设置
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body {
            overflow: hidden;
        }
        #canvas {
            position: absolute;
            border: 2px solid black;
            background-color: black;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>

        /** @type {HTMLCanvasElement} */
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        
        
		//定义一个数组，存储Circle对象        
        let circleArray = []	
        
        //定义色相变量，用于颜色变化
        let hue = 0;
        
    </script>
</body>
</html>

2. Canvas事件

  • 使用addEventListener添加一个点击(click)事件
  • 点击时将位置信息存储在mouse对象中
  • 点击时创建多个Circle对象，存储在数组中
  • 还可以注册一个鼠标移动(mousemove)事件，让鼠标移动时也产生多个Circle对象
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
//鼠标点击时的位置记录
const mouse = {
    x : undefined,
    y : undefined
}

//鼠标点击时将点击位置赋值给mouse对象,记录鼠标点击的位置
canvas.addEventListener('click', function(e){
    mouse.x = e.x
    mouse.y = e.y
 	//创建10个圆存储在数组中
    for (let i = 0; i < 10; i++) {
        circleArray.push(new Circle())
    }
})

canvas.addEventListener('mousemove', function(e){
    mouse.x = e.x
    mouse.y = e.y

    for (let i = 0; i < 5; i++) {
        circleArray.push(new Circle())

    }
})

3. 定义圆类

  • 定义一个圆类，几个属性都在构造方法中初始化
  • 圆的中心位置在点击的时候确定
  • 圆的大小随机设置
  • 圆的速度使用speedX 和speedY, 这两个值自己随意设置
  • 颜色使用上面定义的hue设置，hue在动画函数中去更新
  • update函数用于更新当前圆对象的x和y坐标值, 判断圆的大小，如果大于0.2则不断的减小, 达成一种不断缩小的效果
  • draw函数用于画一个填充颜色的圆
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
class Circle {
    //初始化属性
    constructor() {
        this.x = mouse.x
        this.y = mouse.y
        //随机数 定义在一个范围
        this.size = Math.random() * 15 + 1
        //速度 定义在-1.5到1.5之间, 可随意设置
        this.speedX = Math.random() * 3 - 1.5 
        this.speedY = Math.random() * 3 - 1.5
        this.color =  'hsl('+hue+',100%,50%)'
    }
    update() {
        this.x += this.speedX
        this.y += this.speedY
        if(this.size > 0.2) {
            this.size -= 0.1
        }
    }
    draw() {
        ctx.fillStyle = this.color
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
        ctx.fill()
    }

}

4. 动画函数实现

  • 实现方式和之前的类似
  • 注意每次都需要调用clearRect方法
  • 在圆不断变小时，小到一定数值时让圆消失，做法是直接从数组中删除
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
function animate()  {

    ctx.clearRect(0,0,canvas.width, canvas.height)

    for (let i = 0; i < circleArray.length; i++) {
        circleArray[i].update()//更新
        circleArray[i].draw()//绘制

        for (let j = i; j < circleArray.length; j++) {
            //计算当前圆和其它圆之间的距离
            const newX = circleArray[i].x - circleArray[j].x
            const newY = circleArray[i].y - circleArray[j].y
            const distance = Math.sqrt(newX*newX + newY*newY)
            //画线
            if(distance < 100) {
                ctx.beginPath()
                ctx.strokeStyle = circleArray[i].color
                ctx.lineWidth = 1 
                ctx.moveTo(circleArray[i].x, circleArray[i].y)
                ctx.lineTo(circleArray[j].x, circleArray[j].y)
                ctx.stroke()
                ctx.closePath()
            }
        }
        //如果当前圆的尺寸较小，则从数组中删除当前Circle对象
        if(circleArray[i].size <= 0.3 ) {
            //删除元素
            circleArray.splice(i,1)
            i--
        }
    }
    
    hue+=0.5 //改变色相值
    requestAnimationFrame(animate)
}
animate()

5. 完整代码

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body {
            overflow: hidden;
        }
        #canvas {
            position: absolute;
            border: 2px solid black;
            background-color: black;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        let circleArray = []
        let hue = 0;
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight

        const mouse = {
            x : undefined,
            y : undefined
        }

        canvas.addEventListener('click', function(e){
            mouse.x = e.x
            mouse.y = e.y
            for (let i = 0; i < 10; i++) {
                circleArray.push(new Circle())
            }
        })

        canvas.addEventListener('mousemove', function(e){
            mouse.x = e.x
            mouse.y = e.y
  
            for (let i = 0; i < 5; i++) {
                circleArray.push(new Circle())
                
            }
        }) 


        class Circle {
            //初始化属性
            constructor() {
                this.x = mouse.x
                this.y = mouse.y
                this.size = Math.random() * 15 + 1
                this.speedX = Math.random() * 3 - 1.5 
                this.speedY = Math.random() * 3 - 1.5
                this.color =  'hsl('+hue+',100%,50%)'
            }
            update() {
                this.x += this.speedX
                this.y += this.speedY
                if(this.size > 0.2) {
                    this.size -= 0.1
                }
            }
            draw() {
                ctx.fillStyle = this.color
                //ctx.fillStyle = 'white'
                ctx.beginPath()
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
                ctx.fill()
            }
            
        }


        function animate()  {
            ctx.clearRect(0,0,canvas.width, canvas.height)
            for (let i = 0; i < circleArray.length; i++) {
                circleArray[i].update()
                circleArray[i].draw()
                
                for (let j = i; j < circleArray.length; j++) {
                    const dx = circleArray[i].x - circleArray[j].x
                    const dy = circleArray[i].y - circleArray[j].y
                    const distance = Math.sqrt(dx*dx + dy*dy)
                    //画线
                    if(distance < 100) {
                        ctx.beginPath()
                        ctx.strokeStyle = circleArray[i].color
                        ctx.lineWidth = 1
                        ctx.moveTo(circleArray[i].x, circleArray[i].y)
                        ctx.lineTo(circleArray[j].x, circleArray[j].y)
                        ctx.stroke()
                        ctx.closePath()
                    }
                }
                if(circleArray[i].size <= 0.3 ) {
                    //删除元素
                    circleArray.splice(i,1)
                    i--
                }
            }
            hue+=0.5
            requestAnimationFrame(animate)
        }
        animate()
    </script>
</body>
</html>

上述代码中使用了事件，数组元素的添加和删除，学到了就能在开发中能灵活使用

哼哈七龙岛主架构师 & 开发者 & 技术分享

个人简介。