效果如下：



代码目录如下：

<!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回调机制——基本理解

    回调(diao):往回调用,反向调用. 英文 call back.call:调用,back:返回,往返. 回调的意思就是杀个回马枪...... 回调(callback),既然是往回调用,那自然有一个正 ...

  2. linux redis服务安装

    redis下载 官网地址:https://redis.io/download 在Linux下安装Redis非常简单,具体步骤如下(官网有说明): 1.下载源码,解压缩后编译源码. $ wget htt ...

  3. CentOS6.8 安装配置Mysql

    1.下载mysql的repo源 wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 2.安装mysql-commun ...

  4. wiki 安装

    地址:https://www.jianshu.com/p/fb2574567eae

  5. myisam和innodb的区别对比

    1.MyISAM:默认表类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法.不 ...

  6. CSS 的三种样式 内联 内部 外部

    CSS:层叠样式表的缩写 就是 Cascading Style Sheets Cascading Style Sheets : 层叠样式表 优先级问题 :遵守就近原则  内联> 内部>外部 ...

  7. C-LODOP设置同一页面 手机电脑都打印

    C-Lodop有四种角色,1:客户端本地打印方式客户端访问web,调用客户端本地的打印机进行打印,这时候调用的安装在客户端本地的c-lodop服务,实际调用的是http://Localhost:800 ...

  8. NPOI 上传Excel功能

    1.首先写一个Excel表格,第一行数据库类型(varchar.date.decimal).第二行数据库类型长度(100.12,4.时间日期为空)2.html 加按钮 { type: "bu ...

  9. Codeforces Round #446 Div. 1

    B:即使看到n<=22也应该猜到这只是为了写spj.将每个数替换为恰好比他大的数即可,最大值替换为最小值.这样原序列中不包含最小值的集合显然都满足条件,并且容易发现包含最小值的集合的变化量都是最 ...

  10. Django ContentType组件

    ContentType组件 引入 现在我们有这样一个需求~我们的商城里有很多的商品~~节日要来了~我们要搞活动~~ 那么我们就要设计优惠券~~优惠券都有什么类型呢~~满减的~折扣的~立减的~~ 我们对 ...