效果如下：



代码目录如下：

<!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. 18个Python高效编程技巧，Mark！

    初识Python语言,觉得python满足了我上学时候对编程语言的所有要求.python语言的高效编程技巧让我们这些大学曾经苦逼学了四年c或者c++的人,兴奋的不行不行的,终于解脱了.高级语言,如果做 ...

  2. ES6 & Map & hashMap

    ES6 & Map & hashMap 01 two-sum https://leetcode.com/submissions/detail/141732589/ hashMap ht ...

  3. indexOf刚开始写成IndexOf出错

    {{# if(d.fronturlmin ==null||d.fronturlmin ==""){ }} <img src="@System.Configurati ...

  4. How to ssh

    ssh -p 22 cuthead@127.0.0.1

  5. Spring Boot 构建电商基础秒杀项目 (九) 商品列表 & 详情

    SpringBoot构建电商基础秒杀项目 学习笔记 ItemDOMapper.xml 添加 <select id="listItem" resultMap="Bas ...

  6. Nginx websocket反向代理

    L:106 现在主流的反向代理,通过长链接可以从服务器推送数据到页面 升级成websocket反向代理必须根据上面的配置做配置 缺点无法多路复用,也就是没办法并行 我们测试下Websocket反向代理 ...

  7. MD5进行解密操作

    package com.dyy.test; import java.security.MessageDigest; public class TestMD5Util { /*** * MD5加码 生成 ...

  8. BZOJ3676[Apio2014]回文串——回文自动机

    题目描述 考虑一个只包含小写拉丁字母的字符串s.我们定义s的一个子串t的“出 现值”为t在s中的出现次数乘以t的长度.请你求出s的所有回文子串中的最 大出现值. 输入 输入只有一行,为一个只包含小写字 ...

  9. Django auth认证系统

    Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Djang ...

  10. 安卓Android基础—第一天

    1.1G-4G的介绍 1G 大哥大 2G 小灵通 采用gsm标准(美国军方标准民用化) 发短信 3G 沃 72M/s 4G lte 100M/s 5G 华为 10G/s 小公司卖茶品大公司卖版权(标准 ...