html5使用canvas實現小球碰撞反彈例項

阿新 • • 發佈：2019-01-10

使用 html5 中的 canvas, 實現小球相互碰撞並反彈,反彈演算法比較簡單.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bouncing balls</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Bouncing balls</h1 
>
    <canvas></canvas>

    <script src="main.js"></script>
</body>
</html>

style.css

html, body {
    margin: 0;
    padding: 0;
}

html {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
}

body {
    overflow: hidden;
    height 
: inherit;
}

h1 {
    font-size: 2rem;
    letter-spacing: -1px;
    position: absolute;
    margin: 0;
    top: -4px;
    right: 5px;
    color: transparent;
    text-shadow: 0 0 4px white;
}

main.js

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

var WIDTH = document.documentElement.clientWidth;
var 
 HEIGHT = document.documentElement.clientHeight;

canvas.width = WIDTH;
canvas.height = HEIGHT;

var config = {
    speedMin: -7,
    speedMax: 7,
    ballMin: 10,
    ballMax: 20,
    ballCount: 30
};

/**
 * function to generate random number
 *
 * @param max
 * @param min
 * @returns {*}
 */
function random (min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

/**
 * define Ball constructor
 *
 * @param x
 * @param y
 * @param velX
 * @param velY
 * @param color
 * @param size
 */
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;
}

/**
 * define Ball draw method
 */
Ball.prototype.draw = function () {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
    ctx.fill();
};

/**
 * define Ball update method
 */
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;
};

/**
 * define Ball collision detection
 */
Ball.prototype.collisionDetect = function () {
    for (var j = 0; j < balls.length; j++) {
        var ball = balls[j];
        if (this !== ball) { // be care of this line, we can't compare one with itself
            var dxv = this.x + this.velX - (ball.x + ball.velX); //detect the next step which will updated
            var dyv = this.y + this.velY - (ball.y + ball.velY);
            var distance = Math.sqrt(dxv * dxv + dyv * dyv);

            if (distance <= this.size + ball.size) {
                ball.color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';

                // rebound the balls when collision
                var dvx = this.velX - ball.velX;
                var dvy = this.velY - ball.velY;
                var dx = this.x - ball.x; // but when update just use this step
                var dy = this.y - ball.y;
                var xx_yy = dx * dx + dy * dy;
                var v_dvx = (dvx * dx * dx + dvy * dx * dy) / xx_yy;
                var v_dvy = (dvy * dy * dy + dvx * dx * dy) / xx_yy;
                this.velX = checkSpeed(this.velX - v_dvx);
                this.velY = checkSpeed(this.velY - v_dvy);
                ball.velX = checkSpeed(ball.velX + v_dvx);
                ball.velY = checkSpeed(ball.velY + v_dvy);
            }
        }
    }
};

/**
 * validate the speed
 *
 * @param speed
 * @returns {*}
 */
function checkSpeed (speed) {
    if (speed > config.speedMax) {
        speed = config.speedMax;
    } else if (speed < config.speedMin) {
        speed = config.speedMin;
    }
    return speed;
}

// define array to store balls
var balls = [];

/**
 * draw the balls loops
 */
function loop () {
    ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
    ctx.fillRect(0, 0, WIDTH, HEIGHT);

    while (balls.length < config.ballCount) {
        var b_var = createBall();
        var ball = new Ball(
            b_var.x,
            b_var.y,
            random(config.speedMin, config.speedMax),
            random(config.speedMin, config.speedMax),
            "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")",
            b_var.r
        );
        balls.push(ball);
    }

    for (var i = 0; i < balls.length; i++) {
        balls[i].draw();
        balls[i].collisionDetect(); //detect before update
        balls[i].update();
    }

    // run again and again to realize the effect of the animation
    requestAnimationFrame(loop);
}

var createdBalls = [];

/**
 * ensure the created ball will not collision
 *
 * @returns {{x: *, y: *, r: *}}
 */
function createBall () {
    var x = random(0, WIDTH);
    var y = random(0, HEIGHT);
    var r = random(config.ballMin, config.ballMax);
    for (var i = 0; i < createdBalls.length; i++) {
        var dx = createdBalls[i].x - x;
        var dy = createdBalls[i].y - y;
        var distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < createdBalls[i].r + r) {
            return createBall();
        }
    }
    var ball = {
        x: x,
        y: y,
        r: r
    };
    createdBalls.push(ball);
    return ball;
}


loop();

效果圖:
這裡寫圖片描述

html5使用canvas實現小球碰撞反彈例項

使用 html5 中的 canvas, 實現小球相互碰撞並反彈,反彈演算法比較簡單. index.html <!DOCTYPE html> <html lang="en"> <head> <meta ch

js實現小球碰撞遊戲

效果圖：效果圖消失只是截的gif圖的問題原始碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小球碰撞遊戲

javaScript實現小球碰撞

<!DOCTYPE html> <html> <head> <meta charset="utf-8"><title></title><style type="text/css">.room

原生js實現一個DIV的碰撞反彈運動

絕對定位 doc type har tle ntb inpu wid PE 原生js實現一個DIV的碰撞反彈運動：　　關鍵在於DIV的邊界檢測，進而改變運動方向，即可實現碰撞反彈效果。 <!DOCTYPE html> <html

JavaScript面向物件的小球碰撞實現基本原理

主要記錄一下重點和難點 <!doctype html> <html> <head> <meta charset="utf-8"> <title>碰撞反彈</title> <style> *

CCF2018-3-18第二題小球碰撞（假設小球之間無碰撞實現）

問題描述　　數軸上有一條長度為L（L為偶數)的線段，左端點在原點，右端點在座標L處。有n個不計體積的小球線上段上，開始時所有的小球都處在偶數座標上，速度方向向右，速度大小為1單位長度每秒。　　當小球到達線段的端點（左端點或右端點）的時候，會立即向相反的方向移動，速度大小仍然

js 小球碰壁反彈and小球碰撞

好像好幾天沒有更博了呢，最近有點變懶了，這樣不好，不好~~我們要做熱愛學習的好孩子，嘻嘻，今天下午補上。。。我們在學習js的時候，一個很經典的案例就是小球的碰壁反彈效果啦~簡單的小球碰壁效果可以慢慢延伸，讓我們做出的效果更漂亮。如圖~ 這個樣子放上好像

JavaScript實現兩個小球碰撞簡單模型【未完】

var xPos,xpos1;// var timer,timer1; var xSpeed;//黑球移動速度 var interval=50;//間隔時間 var countNum,co

JS (canvas) 兩個小球碰撞

隨機數 ack parseint ++ arc req dia doc all <style media="screen"> * { margin: 0; padding: 0;

unity_小功能實現（碰撞檢測）

dbo pla 打開 ide 發生 oid 區域 col 位置 unity_小功能實現（碰撞檢測） 1.觸發器Trigger：勾選IsTrigger屬性 //當player剛進入觸發區域的時刻發生觸發檢測，比如在靠近門的某個區域門一直處於開著狀態 void OnTri

SpringBoot 通過自定義註解實現AOP切面程式設計例項

一直心心念的想寫一篇關於AOP切面例項的博文，拖更了許久之後，今天終於著手下筆將其完成。基礎概念 1、切面(Aspect) 首先要理解‘切’字，需要把物件想象成一個立方體，傳統的面向物件變成思維，類定義完成之後（封裝）。每次例項化一個物件，對類定義中的成員變數賦值，就相當於對這個立方體進行了一個定義，

java實現自定義異常例項程式碼

此處主要便於對異常類的使用上方便大家理解以一個公約數為例做了一個簡單自定義異常的處理程式碼如下：如果操作者輸入數字符合要求程式執行，不符合則丟擲錯誤。 package 自定義異常簡單例項; import java.util.Scanner; public class CommonDivisor

java實現excel下載功能例項

其實需求很簡單，就是點選按鈕後，向後臺傳入查詢條件，然後根據查詢條件獲取滿足條件的記錄通過excel下載。方案一：使用ajax方式不可以原因匯出excel算是檔案下載了，後臺需要向前臺（瀏覽器）寫檔案流，而ajax請求獲取的資料的都是字串（此點當時在除錯頁面的時候，Response響應中

js頁面實現小球在div固定容器中上下左右彈射

程式碼不難，也是挺簡單的，主要考慮邊界問題。網頁我已經掛到伺服器了，可以看看效果是否是你想要的： http://codingcoge.cn:8080/ball/ball.html 程式碼：也可以通過F

bootstrap實現分頁（例項）

寫前端都會面臨的一個問題就是分頁，如果是純js分頁也是可以的，只是可能程式碼量比較大，所以今天寫一個關於用bootstrap框架分頁的例子，希望以後可以幫助到一些對這方面比較頭疼的碼農。首先需要明確的一點是，哪些資料是需要分頁的，單從資料顯示上其實是沒有必要分頁的，因為頁面是

Java通過Hadoop實現RPC通訊簡單例項

一、定義server端程式碼 1.定義一個介面，該介面繼承org.apache.hadoop.ipc.VersionedProtocol介面 import org.apache.hadoop.ipc.VersionedProtocol; /** * 1.伺服器定義介面

struts2的國際化（即實現中英文切換）例項

今天學習了國際化例項，也就是實現中文和英文的切換。注：本部落格有部分程式碼參考阿木俠的部落格內容。 1、首先實現國際化對我們的專案要求是搭建好Struts2框架 2、我們要編寫jsp頁面在這個jsp頁面上測試結果下面附上建立的login.jsp的程式碼：

java計劃任務排程框架quartz結合spring實現排程的配置例項程式碼分享

一：quartz簡介 OpenSymphony 的Quartz提供了一個比較完美的任務排程解決方案。 Quartz 是個開源的作業排程框架，定時排程器，為在 Java 應用程式中進行作業排程提供了簡單卻強大的機制。 Quartz中有兩個基本概

Labview VISA實現串列埠通訊例項講解轉

1.安裝VISA驅動 VISA驅動不含在軟體包中，必須要自己去下載。 VISA(Virtual Instrument Software Architecture，簡稱為"Visa")，即虛擬儀器軟體結構，是VXI plug&play聯盟制定的I/O介面軟體標準及其規

html5使用canvas實現小球碰撞反彈例項

相關推薦