效果如下：



代码目录如下：

<!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. Java多线程之线程状态转换图

    说明:线程共包括以下5种状态.1. 新建状态(New)         : 线程对象被创建后,就进入了新建状态.例如,Thread thread = new Thread().2. 就绪状态(Runn ...

  2. 【转】console.log 用法

    标签: 转自http://www.cnblogs.com/ctriphire/p/4116207.html 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是 ...

  3. （转载）C#使用MemoryStream类读写内存

    MemoryStream和BufferedStream都派生自基类Stream,因此它们有很多共同的属性和方法,但是每一个类都有自己独特的用法.这两个类都是实现对内存进行数据读写的功能,而不是对持久性 ...

  4. 基于MMSE的预测

    本文的目的是预测随机变量的输出值. 既然有预测值,那么我们就需要一个判断基准(criterion)用于判断该预测值与该随机变量的实际输出之间的差值,这里采用的判断基准就是MSE(mean-square ...

  5. #186 path（容斥原理+状压dp+NTT）

    首先只有一份图时显然可以状压dp,即f[S][i]表示S子集的哈密顿路以i为终点的方案数,枚举下个点转移. 考虑容斥,我们枚举至少有多少条原图中存在的边(即不合法边)被选进了哈密顿路,统计出这个情况下 ...

  6. 李昊大佬的CV模板

    #include<cstdio> #include<iostream> #include<cstdlib> #include<iomanip> #inc ...

  7. 数据库 -- mysql表操作

    一,存储引擎介绍 存储引擎即表类型,mysql根据不同的表类型会有不同的处理机制 详见:https://www.cnblogs.com/peng104/p/9751738.html 二,表介绍 表相当 ...

  8. 基准对象object中的基础类型----字符串 (三)

    object有如下子类: CLASSES object basestring str unicode buffer bytearray classmethod complex dict enumera ...

  9. 洛谷P1209修理牛棚题解

    题目 这个题一眼看上去是一个贪心,但是一个贪心题就一定要用一个贪心的做法来做吗,为什么不能写一个DP呢,这个题我们可以从他修理牛棚的角度来看,价值就是一个木板可以修几个,但是也同时消耗掉了一个木板的长 ...

  10. Heron and His Triangle HDU - 6222（pell 大数）

    ---恢复内容开始--- Heron and His Triangle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/2 ...