JavaScript-Canvas 浮动的球(1)

JavaScript , 评论

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

浮动的球(一)

一个浮动的球

在Canvas画布上绘制圆形，而且还要让这个圆形不断地在画布上移动，这是第一步；后面还需要实现N个球飘浮随机移动，再加上碰撞功能。先实现一个球的飘动吧

1. 给一个模板页面

  • 模板页面中一点点的CSS样式，主要定义Canvas宽和高以及position
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
<!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>漂浮的球</title>
    <style>
        *{ padding: 0; margin: 0;}
 
        #myCanvas {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

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

2. 获取Canvas对象并设置它的基本属性

  • 一些基本的js代码，主要是获取Canvas元素以及Context
  • 设置Canvas画布的宽度和高度
1
2
3
4
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
canvas.width = window.innerWidth
canvas.height = window.innerHeight

3. 定义一个Ball类

  • 定义Ball类，并确定好它的属性和方法
  • 属性包含x,y坐标位置，以及半径
  • 方法能绘制一个圆,使用Context 的 arc函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Ball(x, y, radius) {
    //x,y坐标
    this.x = x
    this.y = y
    //半径
    this.radius = radius
	//画圆的方法
    this.draw = function() {
        //这行必须的，为了不影响每个圆的绘制
        ctx.beginPath()
        //画圆, 需要坐标位置和半径大小,从0到360度, 最后一个参数表示是不是逆时针方向
        ctx.arc(this.x,this.y,this.radius, 0, 2*Math.PI, false)
        //颜色设置
        ctx.strokeStyle = 'blue'
        ctx.stroke()
        //填充
        ctx.fill()
    }
}

4. 在Ball类中定义一个update函数

  • 定义一个update函数，作用是在此函数中调用绘制的方法
  • 如果球要移动，就需要不断地更新它的x,y坐标, 在这个函数中不断的修改x,y
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Ball(x, y, radius) {
    //x,y坐标
    this.x = x
    this.y = y
    //半径
    this.radius = radius
	//画圆的方法
    this.draw = function() {
        //这行必须的，为了不影响每个圆的绘制
        ctx.beginPath()
        //画圆, 需要坐标位置和半径大小,从0到360度, 最后一个参数表示是不是逆时针方向
        ctx.arc(this.x,this.y,this.radius, 0, 2*Math.PI, false)
        //颜色设置
        ctx.strokeStyle = 'blue'
        ctx.stroke()
        //填充
        ctx.fill()
    }
    
    this.update = function() {
    	//调用画圆的方法    
        this.draw() 
    }
}

5. 创建Ball对象,并使用动画帧

  • 创建Ball对象 
1
var ball = new Ball(200,200,30)
  • 动画帧
1
2
3
4
5
6
7
8
9
10
11
12
var ball = new Ball(200,200,3,3,30)
        
function animate() {
    requestAnimationFrame(animate)
    //清除画布上的所有内容
    ctx.clearRect(0,0,canvas.width,canvas.height)
    //更新位置
    ball.update()
}

//调用动画函数
animate()

6. 让球动起来

  • 需要改变它的x,y
  • 遇到边界要回弹
  • 定义球每次在x和y方向上移动的距离dx和dy
  • 因为update函数会不断调用，所以更改位置就在update函数中实现
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
function Ball(x, y, radius, dx, dy) {
    //x,y坐标
    this.x = x
    this.y = y
    
    //移动的位置属性
    this.dx = dx
    this.dy = dy
    
    //半径
    this.radius = radius
	//画圆的方法
    this.draw = function() {
        //这行必须的，为了不影响每个圆的绘制
        ctx.beginPath()
        //画圆, 需要坐标位置和半径大小,从0到360度, 最后一个参数表示是不是逆时针方向
        ctx.arc(this.x,this.y,this.radius, 0, 2*Math.PI, false)
        //颜色设置
        ctx.strokeStyle = 'blue'
        ctx.stroke()
        //填充
        ctx.fill()
    }
    
    this.update = function() {
        //更新时判断是否超过左边和右边
        if(this.x + this.radius > canvas.width || this.x-this.radius < 0) {
            this.dx = -this.dx
        }
        //更新时判断是否超过上边和下边
        if(this.y+this.radius > canvas.height || this.y-this.radius < 0) {
            this.dy = -this.dy
        }
        //更改x和y的值
        this.x += this.dx
        this.y += this.dy
        
        //调用画圆的方法    
        this.draw() 
    }
}

7. 最终效果

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

个人简介。