效果如下：



代码目录如下：

<!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. maven+springmvc项目启动时，request mapping not found……

    springmvc项目跑的好好的,跑着跑着,出现request mapping not found的问题. 第一波,网上查问题,stackoverflow上面的各种配置说明,但是我本地就是没查出问题 ...

  2. DTW动态时间规整

    参考: https://blog.csdn.net/raym0ndkwan/article/details/45614813

  3. Laravel 出现 No application encryption key has been specified.

    若文件根目录下没有 .env 1..env.example 改名使用命令 copy 修改为 .env 2.使用命令 php artisan key:generate  获取密码,自动保存到 .env3 ...

  4. IWMS后台上传文章，嵌入视频，调用优酷通用代码

    <a href="http://player.youku.com/player.php/sid/XODcxNjM3OTYw/v.swf " target="_bla ...

  5. QTP 自动化测试--定义变量

    1 Dim suffixsuffix=get_currentdatetxt("001")

  6. java JSP自定义标签

    来至: http://blog.csdn.net/jiangwei0910410003/article/details/23915373 http://blog.csdn.net/jiangwei09 ...

  7. xml模块 增删改查

    import xml.etree.ElementTree as ET tree = ET.parse("xml test") #open root = tree.getroot() ...

  8. 打包一个UWP APP

    Before packaging your app Test your app. Before you package your app for store submission, make sure ...

  9. Centos虚拟环境工具virtualenvwrapper

    下载安装virtualenvwrapper pip3 install virtualenvwrapper !!!!注意安装virtualenvwrapper必须是在本地环境下!!! 设置Linux的用 ...

  10. Civil 3d设置横断面图样式

    一位网友提出这样一个问题: 在使用SectionView.StyleName属性时, 会抛出异常:need to override property StyleName. 我测试的结果一样, 同时测试 ...