Shinkai005

V1

2022/04/23阅读:26主题:红绯

累死自己~别卷别人

canvas学习第三天

  • 就早上起床开始学到下午说是五个小时其实效率很低.一个bug搞了很久.没什么产出惭愧.
  • 加油加油.加油加油~

代办

复习 30min 看文档写个xmind

然后开始圆形碰撞/贪吃蛇/打飞机游戏.

复习下颜色写法

英文文档里的一些单词

photo manipulation 图片操作

reference 引用;参考

ratio 比例

pixels 像素点

fallback 回退 主要指的就是版本回退 低版本适应

specify 明确指出

presence 某属性是否存在用这个

snippet 小片段,不知天高地厚的年轻人

A skeleton template 骨架模板

curves 曲线

coordinate space 坐标空间

grid 网格 栅格

assortment 各种各样的 an assortments of

compose 组成

segments 片段, 细胞分裂

Bezier curve 贝塞尔曲线, 计算机图形学CG中的一个概念

quadratic curve 二次曲线

arc 弧线

radius 半径, 桡骨(手臂上),使边缘成孤装

Tangent 正切

文档笔记

image-20220423100525658
image-20220423100525658

Fallback content

image-20220423101914646
image-20220423101914646

Telling the user to use a different browser that supports canvas does not help users who can't read the canvas at all

双闭合标签

除了用onload 还可以用setInterval,setTimeout

是一堆点A path is a list of points

看一个小时不看了~ 码代码去了.

mdn 写的是真的好,很详细, sentence 和 word 都能经得住揣摩


最终版小球碰撞可迭代详细注释~

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="style.css" />
    <script src="vue.js"></script>
  </head>
  <body onload="draw()">
    <div id="vue-app"></div>
    <canvas id="canvas" width="800" height="600">
      你这浏览器不支持这玩意啊
    </canvas>
    <script src="app.js"></script>
    <script>
      function draw({
        // 让vscode可以显示canvas智能提示
        /** @type {HTMLCanvasElement} */
        const canvas = document.getElementById('canvas');
        if (canvas.getContext) {
          const ctx = canvas.getContext('2d');
          /**
           * 面向对象方式
           */

          // 小球类
          function Ball(x, y, r, color, speedX, speedY{
            this.x = x;
            this.y = y;
            this.r = r;
            this.color = color;
            this.speedX = speedX;
            this.speedY = speedY;
          }
          // 因为所有小球都有这个方法,其实move可以放成私有的,但是没更改需求就先放原型上.
          // 绘制方法
          Ball.prototype.draw = function ({
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.arc(this.x, this.y, this.r, 0Math.PI * 2);
            ctx.fill();
          };
          // 移动方法
          Ball.prototype.move = function ({
            this.x += this.speedX;
            if (this.x > canvas.width - this.r) {
              this.speedX *= -1;
            } else if (this.x < this.r) {
              this.speedX *= -1;
            }
            this.y += this.speedY;
            if (this.y > canvas.height - this.r) {
              this.speedY *= -1;
            } else if (this.y < this.r) {
              this.speedY *= -1;
            }
          };
          //收集实例方法
          // Ball.prototype.balls = []; //不想放这里
          // 让用户用这个方法前自己新建一个数组balls
          const balls = [];
          Ball.prototype.collect = function ({
            balls.push(this);
            console.log(balls);
          };

          const ball1 = new Ball(10010050'gold'50);
          const ball2 = new Ball(70010050'grey'-50);
          const ball3 = new Ball(50040050'lightblue'36);
          const ball4 = new Ball(30020050'lightgreen'7-7);
          const ball5 = new Ball(40010050'pink'4-2);
          //我准备要把他们新建以后就放到balls数组里,
          // 有个点要注意,是引用传值,所以ball1被修改balls里的也会改哦.
          //要利用这个js特性可以方便但是要注意

          ball1.collect();
          ball2.collect();
          ball3.collect();
          ball4.collect();
          ball5.collect();
          //收集完就可以循环创建了
          balls.forEach((item) => {
            item.draw();
          });

          // 动画 封装方法 这方法封装了个啥玩意啊...
          animate();
          function animate({
            //动画四步骤, 绘制,清除,挪位置,重绘
            ctx.clearRect(00, canvas.width, canvas.height);

            /**
             * 捋一下
             * 两个小球开始移动,一个右一个左,移动距离是speed.
             * 当快要碰到,也就是圆心距离<=两球半径 就要转向.
             * 逻辑没问题,一定是变量问题,每个都打印一遍.
             */


            // '圆心距离小于两个半径之和'Math.sqrt((x1-x2)^2 +(y1-y2)^2)
            // 碰撞检测 不用高级的查询了,就正常冒泡挨个查
            function isHit(item1, item2{
              let distance =
                Math.sqrt(
                  Math.pow(item1.x - item2.x, 2) +
                    Math.pow(item1.y - item2.y, 2)
                ) -
                (item1.r + item2.r);
              if (distance <= 0) {
                
                item1.speedX *=-1;
                item1.speedY *= -1;
                item2.speedX *=-1;
                item2.speedY *= -1;
              }
            }

            

            //移动
            balls.forEach((item) => {
              item.move();
            });

            //检测
            for (let i = 0; i < balls.length; i++) {
              for (let j = i; j < balls.length; j++) {
                isHit(balls[i],balls[j])
              }
            }
            
            //重绘
            balls.forEach((item) => {
              item.draw();
            });

            window.requestAnimationFrame(animate);
          }
        }
      }
    
</script>
  </body>
</html>


分类:

前端

标签:

JavaScript

作者介绍

Shinkai005
V1

公众号:深海笔记Shinkai