JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
浮动的球(一)
![](/2022/09/13/JavaScript/ball/%E6%B5%AE%E5%8A%A8%E7%9A%84%E7%90%83(1)/1.gif)
一个浮动的球
在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) { this.x = x this.y = y this.radius = radius this.draw = function() { ctx.beginPath() 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) { this.x = x this.y = y this.radius = radius this.draw = function() { ctx.beginPath() 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对象,并使用动画帧
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) { this.x = x this.y = y this.dx = dx this.dy = dy this.radius = radius this.draw = function() { ctx.beginPath() 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 } this.x += this.dx this.y += this.dy this.draw() } }
|
7. 最终效果
![](/2022/09/13/JavaScript/ball/%E6%B5%AE%E5%8A%A8%E7%9A%84%E7%90%83(1)/1.gif)