bouncing-balls-evil-circle
效果如下
代码目录
<!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>
<p></p>
<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 para = document.querySelector('p');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// 将画布窗尺寸置为窗口内尺寸
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
// 设定形状类层次结构
class Shape {
constructor(x, y, velX, velY, exists) {
this.x = x;
this.y = y;
this.velX = velX;
this.velY = velY;
this.exists = exists;
}
}
//es6中的继承
class Ball extends Shape {
constructor(x, y, velX, velY, color, size, exists) {
super(x, y, velX, velY, exists);
this.color = color;
this.size = size;
}
//绘制
draw() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
ctx.fill();
}
//更新
update() {
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;
}
//碰撞检测
collisionDetect() {
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].exists) {
balls[j].color = this.color = randomColor();
}
}
}
}
}
//恶魔圈也继承自shape
class EvilCircle extends Shape {
constructor(x, y, exists) {
super(x, y, exists);
this.velX = BALL_SPEED_MAX;
this.velY = BALL_SPEED_MAX;
this.color = "white";
this.size = 10;
this.setControls();
}
// 绘制
draw() {
ctx.beginPath();
ctx.strokeStyle = this.color;
ctx.lineWidth = 3;
ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
ctx.stroke();
}
checkBounds() {
if ((this.x + this.size) >= width) {
this.x -= this.size;
}
if ((this.x - this.size) <= 0) {
this.x += this.size;
}
if ((this.y + this.size) >= height) {
this.y -= this.size;
}
if ((this.y - this.size) <= 0) {
this.y += this.size;
}
}
setControls() {
window.onkeydown = e => {
switch(e.key) {
case 'a':
case 'A':
case 'ArrowLeft':
this.x -= this.velX;
break;
case 'd':
case 'D':
case 'ArrowRight':
this.x += this.velX;
break;
case 'w':
case 'W':
case 'ArrowUp':
this.y -= this.velY;
break;
case 's':
case 'S':
case 'ArrowDown':
this.y += this.velY;
break;
}
};
}
collisionDetect() {
for (let j = 0; j < balls.length; j++) {
if (balls[j].exists) {
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].exists = false;
count--;
para.textContent = '还剩 ' + count + ' 个球';
}
}
}
}
}
// 球和恶魔圈
const balls = [];
const evilBall = new EvilCircle(
random(0, width),
random(0, height),
true
);
let count = 0;
// 执行动画
loop();
// 生成随机数的函数
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) + ')';
}
// 定义一个循环来不停地播放
function loop() {
ctx.fillStyle = 'rgba(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,
true
);
balls.push(ball);
count++;
para.textContent = '还剩 ' + count + ' 个球';
}
for (let i = 0; i < balls.length; i++) {
//绘制球
if (balls[i].exists) {
balls[i].draw();
balls[i].update();
balls[i].collisionDetect();
}
}
evilBall.draw();
evilBall.checkBounds();
evilBall.collisionDetect();
requestAnimationFrame(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;
}
p {
position: absolute;
margin: 0;
top: 35px;
right: 5px;
color: #aaa;
}
bouncing-balls-evil-circle的更多相关文章
- JavaScript对象入门指南
前言 不少开发对JavaScript实现面向对象编程存在一知半解,并且不少的在项目实践中写的都是面向过程编程的代码,因此,希望能从零入手介绍面向对象的一些概念到实现简单的面向对象的例子让大家包括我自己 ...
- HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识
一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...
- Android Animation简述
Android Animation简述 一.动画(Animation) Android框架提供了两种动画系统:属性动画(Android3.0)和视图动画.同时使用两种动画是可行的,但 ...
- 论文笔记之：RATM: RECURRENT ATTENTIVE TRACKING MODEL
RATM: RECURRENT ATTENTIVE TRACKING MODEL ICLR 2016 本文主要内容是 结合 RNN 和 attention model 用来做目标跟踪. 其中模型的组成 ...
- android 动画NineOldAndroid
NineOldAndroid 1.之前我们用到的第动画是frame和tween动画也就是帧动画,补间动画现在多了一种动画,它包含完了前面动画的所有状态. 属性动画(Property Anmation) ...
- 201771010126 王燕《面向对象程序设计（Java）》第十六周学习总结
实验十六 线程技术 实验时间 2017-12-8 1.实验目的与要求 (1) 掌握线程概念: ‐多线程 是进程执行过中产生的多条线索. 是进程执行过中产生的多条线索. 是进程执行过中产生的多条线索. ...
- 马凯军201771010116《面向对象与程序设计Java》第十六周知识学习总结
一:理论知识部分 1.线程的概念: 程序是一段静态的代码,它是应用程序执行的蓝 本. ‐进程是程序的一次动态执行,它对应了从代码加 载.执行至执行完毕的一个完整过程. 多线程是进程执行过程中产生的多条 ...
- 第三部分：Android 应用程序接口指南---第四节：动画和图形---第一章 属性动画及动画与图形概述
第1章 属性动画及动画与图形概述 Android提供了一系列强大的API来把动画加到UI元素中,以及绘制自定义的2D和3D图像中去.下面的几节将综述这些可用的API以及系统的功能,同时帮你做出最优的选 ...
- JS-Object (3) JSON; Event Object相关知识（事件冒泡，事件监听, stopPropagation()
通常用于在网站上表示和传输数据 使用JavaScript处理JSON的所有工作,包括访问JSON对象中的数据项并编写自己的JSON. JSON text基本上就像是一个JavaScript对象,这句话 ...
- iPhone Tutorials
http://www.raywenderlich.com/tutorials This site contains a ton of fun written tutorials – so many t ...
随机推荐
- RabbitMQ基本操作
更加详细的 链接https://www.cnblogs.com/dwlsxj/p/RabbitMQ.html RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(A ...
- 华硕X99-A II 安装使用 志强 XEON E5-1603 v4
刚开始无法启动,Debug灯的数字不停的轮回变换,后来把XMP开关关闭后,就能正常启动了.如果不行,就多关机几次,一般3次以上应该就可以启动开了.之后就能正常使用了.
- .NET提供了三种后台输出js的方式：
.NET提供了三种后台输出js的方式: 首先创建 js文件testjs.js { Page.ClientScript.RegisterClientScriptInclude("keys ...
- undefined reference to `cv::VideoCapture
出现opencv链接的问题原因: 1. 路径设置不正确,caffe会优先搜索Makefile.config里面的环境设置 2. anaconda2装的opencv和配置的opencv路径不一致 比如, ...
- jdk6使用WebSocket
pom.xml <dependency> <groupId>org.java-websocket</groupId> <artifactId>Java- ...
- Keepalived+Haproxy高可用负载均衡群集
介绍 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web站点,这些站点通常又需要会 ...
- [BZOJ 2705] [SDOI 2012] Longge的问题
Description Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数 \(N\),你需要求出 \(\sum gcd(i, N)(1\le i \le N ...
- springboot 简单搭建
springboot的入门请参考:https://blog.csdn.net/hanjun0612/article/details/81538449 这里就简单看下搭建: 一,看一下项目结构: 创建一 ...
- 洛谷P2722总分题解
题目 这个题是一个裸的完全背包问题,但是数组需要开大, 代码 #include<iostream> using namespace std; int n,m,v,i; int c[1000 ...
- POJ 2245 Addition Chains(算竞进阶习题)
迭代加深dfs 每次控制序列的长度,依次加深搜索 有几个剪枝: 优化搜索顺序,从大往下枚举i, j这样能够让序列中的数尽快逼近n 对于不同i,j和可能是相等的,在枚举的时候用过的数肯定不会再被填上所以 ...