效果如下：



代码目录如下：

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <title>弹球</title>

    <link rel="stylesheet" href="style.css">

    <script src="main.js" defer></script>

  </head>

  <body>

    <h1>弹球</h1>

    <canvas></canvas>

  </body>

</html>


//main.js

const BALLS_COUNT = 25;

const BALL_SIZE_MIN = 10;

const BALL_SIZE_MAX = 20;

const BALL_SPEED_MAX = 7;

// 设定画布

const canvas = document.querySelector('canvas');

const ctx = canvas.getContext('2d');

// 将画布窗尺寸置为窗口内尺寸

const width = canvas.width = window.innerWidth;

const height = canvas.height = window.innerHeight;

// 定义一个数组来保存所有的球

const balls = [];

// 生成随机数的函数

function random(min,max) {

  return Math.floor(Math.random()*(max-min)) + min;

}

// 生成随机颜色的函数

function randomColor() {

    return 'rgb(' +

           random(0, 255) + ', ' +

           random(0, 255) + ', ' +

           random(0, 255) + ')';

}

// 定义 Ball 构造器

function Ball(x, y, velX, velY, color, size) {

  this.x = x;

  this.y = y;

  this.velX = velX;

  this.velY = velY;

  this.color = color;

  this.size = size;

}

// 定义绘制球的函数

Ball.prototype.draw = function() {

  ctx.save();

  ctx.beginPath();

  ctx.fillStyle = this.color;

  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);

  ctx.fill();

  ctx.restore();

};

// 定义更新球的函数

Ball.prototype.update = function() {

  if((this.x + this.size) >= width) {

    this.velX = -(this.velX);

  }

  if((this.x - this.size) <= 0) {

    this.velX = -(this.velX);

  }

  if((this.y + this.size) >= height) {

    this.velY = -(this.velY);

  }

  if((this.y - this.size) <= 0) {

    this.velY = -(this.velY);

  }

  this.x += this.velX;

  this.y += this.velY;

};

// 定义碰撞检测函数

Ball.prototype.collisionDetect = function() {

  for(let j = 0; j < balls.length; j++) {

    if( this !== balls[j]) {

      const dx = this.x - balls[j].x;

      const dy = this.y - balls[j].y;

      const distance = Math.sqrt(dx * dx + dy * dy);

      if (distance < this.size + balls[j].size) {

        balls[j].color = this.color = randomColor();

      }

    }

  }

};

// 定义一个循环来不停地播放

function loop() {

  ctx.fillStyle = 'rgb(0, 0, 0, 0.25)';

  ctx.fillRect(0, 0, width, height);

  while(balls.length < BALLS_COUNT) {

    const size = random(BALL_SIZE_MIN, BALL_SIZE_MAX);

    const ball = new Ball(

      // 为避免绘制错误，球至少离画布边缘球本身一倍宽度的距离

      random(0 + size, width - size),

      random(0 + size, height - size),

      random(-BALL_SPEED_MAX, BALL_SPEED_MAX),

      random(-BALL_SPEED_MAX, BALL_SPEED_MAX),

      randomColor(),

      size

    );

    balls.push(ball);

  }

  for(let i = 0; i < balls.length; i++) {

    balls[i].draw();

    balls[i].update();

    balls[i].collisionDetect();

  }

  requestAnimationFrame(loop);

}

loop();


//style.css

body {

  margin: 0;

  overflow: hidden;

  font-family: '微软雅黑', sans-serif;

  height: 100%;

}

h1 {

  font-size: 2rem;

  letter-spacing: -1px;

  position: absolute;

  margin: 0;

  top: -4px;

  right: 5px;

  color: transparent;

  text-shadow: 0 0 4px white;

}

bouncing-balls的更多相关文章

  1. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  2. Android Animation简述

    Android Animation简述 一.动画(Animation)          Android框架提供了两种动画系统:属性动画(Android3.0)和视图动画.同时使用两种动画是可行的,但 ...

  3. 论文笔记之：RATM: RECURRENT ATTENTIVE TRACKING MODEL

    RATM: RECURRENT ATTENTIVE TRACKING MODEL ICLR 2016 本文主要内容是 结合 RNN 和 attention model 用来做目标跟踪. 其中模型的组成 ...

  4. android 动画NineOldAndroid

    NineOldAndroid 1.之前我们用到的第动画是frame和tween动画也就是帧动画,补间动画现在多了一种动画,它包含完了前面动画的所有状态. 属性动画(Property Anmation) ...

  5. JavaScript对象入门指南

    前言 不少开发对JavaScript实现面向对象编程存在一知半解,并且不少的在项目实践中写的都是面向过程编程的代码,因此,希望能从零入手介绍面向对象的一些概念到实现简单的面向对象的例子让大家包括我自己 ...

  6. 201771010126 王燕《面向对象程序设计（Java）》第十六周学习总结

    实验十六  线程技术 实验时间 2017-12-8 1.实验目的与要求 (1) 掌握线程概念: ‐多线程 是进程执行过中产生的多条线索. 是进程执行过中产生的多条线索. 是进程执行过中产生的多条线索. ...

  7. 马凯军201771010116《面向对象与程序设计Java》第十六周知识学习总结

    一:理论知识部分 1.线程的概念: 程序是一段静态的代码,它是应用程序执行的蓝 本. ‐进程是程序的一次动态执行,它对应了从代码加 载.执行至执行完毕的一个完整过程. 多线程是进程执行过程中产生的多条 ...

  8. 第三部分：Android 应用程序接口指南---第四节：动画和图形---第一章 属性动画及动画与图形概述

    第1章 属性动画及动画与图形概述 Android提供了一系列强大的API来把动画加到UI元素中,以及绘制自定义的2D和3D图像中去.下面的几节将综述这些可用的API以及系统的功能,同时帮你做出最优的选 ...

  9. iPhone Tutorials

    http://www.raywenderlich.com/tutorials This site contains a ton of fun written tutorials – so many t ...

  10. android动画具体解释四 创建动画

    使用ValueAnimator进行动画 通过指定一些int, float或color等类型的值的集合.ValueAnimator 使你能够对这些类型的值进行动画.你需通过调用ValueAnimator ...

随机推荐

  1. centos安装Tesseract

    yum安装(推荐) yum search tesseract yum install tesseract.x86_64 -y pip3 install pytesseract pip3 install ...

  2. idea创建maven项目的一点关键

    maven中的一些概念: POM:项目对象模型(Project Object Model),是项目的一些关键元信息的集合.主要包含项目管理信息.具体的项目描述.开发小组的构 成.源代码库(如CVS)和 ...

  3. AgilePoint数据库模式中当前所有表的列表

    表名 描述 WF_ACTIVITY_INSTS 包含有关活动实例的信息. WF_ASSIGNED_OBJECTS 包含有关用户角色的分配对象的信息. WF_AUDIT_TRAILS 包含有关流程模板的 ...

  4. 51nod1016

    1016 水仙花数 V2 1 秒 131,072 KB 160 分 6 级题   水仙花数是指一个 n 位数 ( n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身.(例如:1^3 + 5^3 ...

  5. 【数学建模】day01-线性规划问题

      线性规划问题是在一组线性约束条件下,求线性目标函数最大/最小值的问题.这些约束条件有不等式约束.等式约束以及边界约束,这和中学讲的线性规划无异. 此类问题的MATLAB标准形式为: 其中,max问 ...

  6. python 模块之-pickle

    Pickle的问题和所有其他编程语言特有的序列化问题一样,就是它只能用于Python,并且可能不同版本的Python彼此都不兼容,因此,只能用Pickle保存那些不重要的数据,不能成功地反序列化也没关 ...

  7. BZOJ4177Mike的农场——最小割

    题目描述 Mike有一个农场,这个农场n个牲畜围栏,现在他想在每个牲畜围栏中养一只动物,每只动物可以是牛或羊,并且每个牲畜围栏中的饲养条件都不同,其中第i个牲畜围栏中的动物长大后,每只牛可以卖a[i] ...

  8. BZOJ1005 HNOI2008明明的烦恼（prufer+高精度）

    每个点的度数=prufer序列中的出现次数+1,所以即每次选一些位置放上某个点,答案即一堆组合数相乘.记一下每个因子的贡献分解一下质因数高精度乘起来即可. #include<iostream&g ...

  9. 洛谷3704 [SDOI2017] 数字表格 【莫比乌斯反演】

    题目分析: 比较有意思,但是套路的数学题. 题目要求$ \prod_{i=1}^{n} \prod_{j=1}^{m}Fib(gcd(i,j)) $. 注意到$ gcd(i,j) $有大量重复,采用莫 ...

  10. 用递归方法判断字符串是否是回文（Recursion Palindrome Python)

    所谓回文字符串,就是一个字符串从左到右读和从右到左读是完全一样的.比如:"level" .“aaabbaaa”. "madam"."radar&quo ...