【微信_小游戏_canvas_基础_笔记5】

微信_小游戏_canvas_基础_笔记5

粒子随机移动

难点是如何实现随机移动,我的代码里面有个BUG,小几率触发,
我也是写完代码,回想的时候才发觉的,文章结尾再说

移动其实是分两部分

1,移动方向
2,移动距离
本文的全部代码都是自己设计
所以花了些时间,与原教程并不一致
本文代码只实现了方向初始随机
移动到边界并未随机移动方向
且移动距离固定

上代码

// 粒子移动
let ctx = canvas.getContext("2d")
console.log("ctx_s_4",ctx)

const c_w = ctx.canvas.width // 画布宽
const c_h = ctx.canvas.height // 画布高
console.log("画布 宽高",c_w,c_h)

// 函数 Math.random 取随机数,0<范围<1
// 函数 Math.floor 取整 向下取整

/* 初始化 粒子坐标 */
let p_x = [0,0,0];
let p_y = [0,0,0];
for (let i_1 = 0; i_1 < p_x.length; i_1++) {
   
  for (let i_2 = 0; i_2 < 20; i_2++) {
   
    p_x[i_1] = Math.floor(Math.random() * 1000 );
    console.log("px",i_1,i_2,p_x[i_1]);
    if (p_x[i_1] < c_w) {
   break;}
  }
}
console.log("随机粒子坐标p_x",p_x)
for (let i_1 = 0; i_1 < p_y.length; i_1++) {
   
  for (let i_2 = 0; i_2 < 20; i_2