ข้ามไปยังเนื้อหา

คลาสลูกบอล

บทช่วยสอนนี้อธิบายวิธีใช้คลาส JavaScript ในแอนิเมชันบน canvas และไม่ได้มีไว้สำหรับผู้เริ่มต้น แนะนำให้คุณศึกษาส่วน Lighting Engine ของเราก่อน และลองทำบทช่วยสอน Color Cycle ดู

อย่างไรก็ตาม ในที่นี้เราจะไม่ใช้ไวยากรณ์ class แบบเคร่งครัด เพราะมันเป็นเพียง “syntactic sugar” ของ JavaScript และแนวคิดเบื้องหลังยังคงเหมือนเดิม หากคุณสนใจเรียนรู้เกี่ยวกับแอนิเมชันที่ซับซ้อนมากขึ้น แนะนำให้ดูหน้านี้เพื่อทำความรู้จักอย่างละเอียด มิฉะนั้น เรามายึดพื้นฐานกันไว้ก่อน

เริ่มต้นกันเลย คลาสก็คือฟังก์ชัน JavaScript ธรรมดา ซึ่งทำงานในลักษณะเดียวกัน แต่เราเพิ่มความสามารถในการผูกค่าเข้ากับอินสแตนซ์เฉพาะของฟังก์ชันนั้น ในตัวอย่างนี้ เราได้สร้างลูกบอลที่เคลื่อนที่ตามหลักฟิสิกส์พื้นฐาน โดยจะติดตามตำแหน่งและความเร็วของตัวเอง รวมถึง “แรงโน้มถ่วง” ที่กระทำต่อมันด้วย

<head>
<title>Simple Ball Bounce</title>
<meta description="Ball bounce"/>
<meta publisher="WhirlwindFX" />
</head>
<body style="margin: 0; padding: 0;">
<canvas id="exCanvas" width="320" height="200"></canvas>
</body>
<script>
// Get the canvas element from the DOM
var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");
// Canvas variables
var width = 320;
var height = 200;
// X-component of ball position
let ballX = 160;
// Y-component of ball position
let ballY = 100;
// Change in ballY over time. Positive values move down, negative move up
let velocityY = 0;
// Change in velocityY over time.
let accelerationY = 1;
// Effects array
let effects = [];
function update() {
// 1. Overwrite the previous frame
ctx.fillStyle = background;
ctx.fillRect(0, 0, 320,200);
// 2. Make sure there is one instance of the Ball class in the effects array
if (effects.length < 1){
effects.push(new Ball());
}
// 3. Iterate through the effects array and call each element's draw function
effects.forEach(ele => {
ele.draw();
})
window.requestAnimationFrame(update);
}
// 4. Declare the Ball class
function Ball(){
// 5. Set instance variables
this.bx = ballX;
this.by = ballY;
this.vy = velocityY;
this.ay = accelerationY;
this.radius = 15;
this.impact = false;
// 6. Define draw function
this.draw = function(){
// 7. Change the y-velocity by the y-acceleration
this.vy += this.ay;
// 8. If an impact with the ground has been detected, set the velocity upwards and set the impact boolean to false. This check happens before the next function so that we draw the impact frame instead of skipping it.
if (this.impact){
this.vy = -10;
this.impact = false;
}
// 9. Detect a future impact. If the ball position plus its radius plus its velocity would put it under the floor, we run a few operations -
if (this.by + this.radius + this.vy > 200){
// Set the velocity to 0 so the ball stays where we put it this frame.
this.vy = 0;
// Set impact to true so the next run-through draws the up-bounce
this.impact = true;
// Next frame draws the up-bounce. This frame detected a future collision. If we want to see the impact itself we have to force it. While the ball's outer radius is below the floor, we move the ball up.
while (this.by + this.radius < 200){
this.by++;
}
}
// 10. Change the y-component by the y-velocity.
this.by += this.vy;
// Draw shape.
ctx.beginPath();
ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
ctx.fillStyle = "black"
ctx.fill();
}
}
window.requestAnimationFrame(update);
</script>
<head>
<title>Simple Ball Bounce</title>
<meta description="Ball bounce"/>
<meta publisher="WhirlwindFX" />
</head>
<body style="margin: 0; padding: 0;">
<canvas id="exCanvas" width="320" height="200"></canvas>
</body>
<script>
// Get the canvas element from the DOM
var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");
// Canvas variables
var width = 320;
var height = 200;
// X-component of ball position
let ballX = 160;
// Y-component of ball position
let ballY = 100;
// Change in ballY over time. Positive values move down, negative move up
let velocityY = 0;
// Change in velocityY over time.
let accelerationY = 1;
// Effects array
let effects = [];
function update() {
// 1. Overwrite the previous frame
ctx.fillStyle = background;
ctx.fillRect(0, 0, 320,200);
// 2. Make sure there is one instance of the Ball class in the effects array
if (effects.length < 1){
effects.push(new Ball());
}
// 3. Iterate through the effects array and call each element's draw function
effects.forEach(ele => {
ele.draw();
})
window.requestAnimationFrame(update);
}
// 4. Declare the Ball class
function Ball(){
// 5. Set instance variables
this.bx = ballX;
this.by = ballY;
this.vy = velocityY;
this.ay = accelerationY;
this.radius = 15;
this.impact = false;
// 6. Define draw function
this.draw = function(){
// 7. Change the y-velocity by the y-acceleration
this.vy += this.ay;
// 8. If an impact with the ground has been detected, set the velocity upwards and set the impact boolean to false. This check happens before the next function so that we draw the impact frame instead of skipping it.
if (this.impact){
this.vy = -10;
this.impact = false;
}
// 9. Detect a future impact. If the ball position plus its radius plus its velocity would put it under the floor, we run a few operations -
if (this.by + this.radius + this.vy > 200){
// Set the velocity to 0 so the ball stays where we put it this frame.
this.vy = 0;
// Set impact to true so the next run-through draws the up-bounce
this.impact = true;
// Next frame draws the up-bounce. This frame detected a future collision. If we want to see the impact itself we have to force it. While the ball's outer radius is below the floor, we move the ball up.
while (this.by + this.radius < 200){
this.by++;
}
}
// 10. Change the y-component by the y-velocity.
this.by += this.vy;
// Draw shape.
ctx.beginPath();
ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
ctx.fillStyle = "black"
ctx.fill();
}
}
window.requestAnimationFrame(update);
</script>
function update() {
// 1. Overwrite the previous frame
ctx.fillStyle = background;
ctx.fillRect(0, 0, 320,200);
// 2. Make sure there is one instance of the Ball class in the effects array
if (effects.length < 1){
effects.push(new Ball());
}
// 3. Iterate through the effects array and call each element's draw function
effects.forEach(ele => {
ele.draw();
})
window.requestAnimationFrame(update);
}
// 4. Declare the Ball class
function Ball(){
// 5. Set instance variables
this.bx = ballX;
this.by = ballY;
this.vy = velocityY;
this.ay = accelerationY;
this.radius = 15;
this.impact = false;
// 6. Define draw function
this.draw = function(){
// 7. Change the y-velocity by the y-acceleration
this.vy += this.ay;
// 8. If an impact with the ground has been detected, set the velocity upwards and set the impact boolean to false. This check happens before the next function so that we draw the impact frame instead of skipping it.
if (this.impact){
this.vy = -10;
this.impact = false;
}
// 9. Detect a future impact. If the ball position plus its radius plus its velocity would put it under the floor, we run a few operations -
if (this.by + this.radius + this.vy > 200){
// Set the velocity to 0 so the ball stays where we put it this frame.
this.vy = 0;
// Set impact to true so the next run-through draws the up-bounce
this.impact = true;
// Next frame draws the up-bounce. This frame detected a future collision. If we want to see the impact itself we have to force it. While the ball's outer radius is below the floor, we move the ball up.
while (this.by + this.radius < 200){
this.by++;
}
}
// 10. Change the y-component by the y-velocity.
this.by += this.vy;
// Draw shape.
ctx.beginPath();
ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
ctx.fillStyle = "black"
ctx.fill();
}
}

เมื่อเราผ่านความซับซ้อนในช่วงแรกมาได้แล้ว การเพิ่มพฤติกรรมขั้นสูงก็จะง่ายขึ้น ในตัวอย่างถัดไป เราได้เพิ่มการชนกับผนังและใส่การเปลี่ยนแปลงแบบสุ่มในทิศทาง x เพื่อให้ลูกบอลเคลื่อนที่อยู่ตลอด

<head>
<title>Full Bounce</title>
<meta description="Snake-like climbing gradient effect"/>
<meta publisher="WhirlwindFX" />
</head>
<body style="margin: 0; padding: 0;">
<canvas id="exCanvas" width="320" height="200"></canvas>
</body>
<script>
// Get the canvas element from the DOM
var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");
var width = 320;
var height = 200;
var hue = 0;
let ballX = 160;
// 1. Added velocityX
let velocityX = 0;
let ballY = 100;
let velocityY = 0;
let accelerationY = 1;
let effects = [];
function update() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 320,200);
if (effects.length < 1){
effects.push(new Ball());
}
effects.forEach(ele => {
ele.draw();
})
window.requestAnimationFrame(update);
}
function Ball(){
this.bx = ballX;
// 2. Give x a random initial velocity
this.vx = 100 * Math.sin(Date.now());
this.by = ballY;
this.vy = velocityY;
this.ay = accelerationY;
this.radius = 15;
// 3. Add x and y-components to the impact boolean for horizontal contact
this.impactX = false;
this.impactY = false;
this.draw = function(){
this.vy += this.ay;
// 4. Each frame, add a small amount of random velocity in the x-direction to keep momentum going
this.vx += Math.sin(Date.now());
if (this.impactY){
this.vy = -10;
this.impactY = false;
}
// 5. If a horizontal impact is detected, reverse the x-velocity and subtract a small amount of force to prevent an out-of-control ball. Mirroring or adding to the force here can have interesting consequences.
if (this.impactX){
this.vx *= -.9;
this.impactX = false;
}
if (this.by + this.radius + this.vy > height){
this.vy = 0;
this.impactY = true;
while (this.by + this.radius < height){
this.by++;
}
}
// 6. Detect a horizontal impact left or right and adjust like we did the y-component.
if (this.bx + this.radius + this.vx > width){
this.vx = 0;
this.impactX = true;
while (this.bx + this.radius > width){
this.bx--;
}
} else if (this.bx - this.radius + this.vx < 0){
this.vx = 0;
this.impactX = true;
while (this.bx - this.radius < 0){
this.bx++;
}
}
// 7. Change the x- and y-components by their velocity.
this.by += this.vy;
this.bx += this.vx;
ctx.beginPath();
ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
ctx.fillStyle = "black"
ctx.fill();
}
}
window.requestAnimationFrame(update);
</script>
<head>
<title>Full Bounce</title>
<meta description="Snake-like climbing gradient effect"/>
<meta publisher="WhirlwindFX" />
</head>
<body style="margin: 0; padding: 0;">
<canvas id="exCanvas" width="320" height="200"></canvas>
</body>
<script>
// Get the canvas element from the DOM
var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");
var width = 320;
var height = 200;
var hue = 0;
let ballX = 160;
// 1. Added velocityX
let velocityX = 0;
let ballY = 100;
let velocityY = 0;
let accelerationY = 1;
let effects = [];
function update() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 320,200);
if (effects.length < 1){
effects.push(new Ball());
}
effects.forEach(ele => {
ele.draw();
})
window.requestAnimationFrame(update);
}
function Ball(){
this.bx = ballX;
// 2. Give x a random initial velocity
this.vx = 100 * Math.sin(Date.now());
this.by = ballY;
this.vy = velocityY;
this.ay = accelerationY;
this.radius = 15;
// 3. Add x and y-compnents to the impact boolean for horizontal contact
this.impactX = false;
this.impactY = false;
this.draw = function(){
this.vy += this.ay;
// 4. Each frame, add a small amount of random velocity in the x-direction to keep momentum going
this.vx += Math.sin(Date.now());
if (this.impactY){
this.vy = -10;
this.impactY = false;
}
// 5. If a horizontal impact is detected, reverse the x-velocity and subtract a small amount of force to prevent an out-of-control ball. Mirroring or adding to the force here can have interesting consequences.
if (this.impactX){
this.vx *= -.9;
this.impactX = false;
}
if (this.by + this.radius + this.vy > height){
this.vy = 0;
this.impactY = true;
while (this.by + this.radius < height){
this.by++;
}
}
// 6. Detect a horizontal impact left or right and adjust like we did the y-component.
if (this.bx + this.radius + this.vx > width){
this.vx = 0;
this.impactX = true;
while (this.bx + this.radius > width){
this.bx--;
}
} else if (this.bx - this.radius + this.vx < 0){
this.vx = 0;
this.impactX = true;
while (this.bx - this.radius < 0){
this.bx++;
}
}
// 7. Change the x- and y-components by their velocity.
this.by += this.vy;
this.bx += this.vx;
ctx.beginPath();
ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
ctx.fillStyle = "black"
ctx.fill();
}
}
window.requestAnimationFrame(update);
</script>
function update() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 320,200);
if (effects.length < 1){
effects.push(new Ball());
}
effects.forEach(ele => {
ele.draw();
})
window.requestAnimationFrame(update);
}
function Ball(){
this.bx = ballX;
// 2. Give x a random initial velocity
this.vx = 100 * Math.sin(Date.now());
this.by = ballY;
this.vy = velocityY;
this.ay = accelerationY;
this.radius = 15;
// 3. Add x and y-compnents to the impact boolean for horizontal contact
this.impactX = false;
this.impactY = false;
this.draw = function(){
this.vy += this.ay;
// 4. Each frame, add a small amount of random velocity in the x-direction to keep momentum going
this.vx += Math.sin(Date.now());
if (this.impactY){
this.vy = -10;
this.impactY = false;
}
// 5. If a horizontal impact is detected, reverse the x-velocity and subtract a small amount of force to prevent an out-of-control ball. Mirroring or adding to the force here can have interesting consequences.
if (this.impactX){
this.vx *= -.9;
this.impactX = false;
}
if (this.by + this.radius + this.vy > height){
this.vy = 0;
this.impactY = true;
while (this.by + this.radius < height){
this.by++;
}
}
// 6. Detect a horizontal impact left or right and adjust like we did the y-component.
if (this.bx + this.radius + this.vx > width){
this.vx = 0;
this.impactX = true;
while (this.bx + this.radius > width){
this.bx--;
}
} else if (this.bx - this.radius + this.vx < 0){
this.vx = 0;
this.impactX = true;
while (this.bx - this.radius < 0){
this.bx++;
}
}
// 7. Change the x- and y-components by their velocity.
this.by += this.vy;
this.bx += this.vx;
ctx.beginPath();
ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
ctx.fillStyle = "black"
ctx.fill();
}
}

บอกตามตรง ตัวอย่างนี้ ซับซ้อน อย่างแท้จริง และน่าจะต้องใช้ความพยายามมากกว่าที่จำเป็นสำหรับเอฟเฟกต์พื้นฐานส่วนใหญ่ เพื่อไม่ให้ต้องใส่คอมเมนต์ในโค้ดมากเกินไป เราจะอธิบายแนวคิดที่ยุ่งยากบางส่วนไว้ตรงนี้

อย่างแรก ลูกบอลรู้ได้อย่างไรว่าจะชนกับลูกอื่น? ในทุกเฟรม อินสแตนซ์ของคลาสลูกบอลแต่ละตัวต้องตรวจสอบตำแหน่งของอินสแตนซ์ลูกบอลอื่น ๆ ทั้งหมด เมื่อเปรียบเทียบตำแหน่งกัน เราจะทราบได้ว่าลูกบอลสองลูกอยู่ภายในรัศมีของกันและกันหรือไม่ จากนั้นจึงกลับทิศความเร็วในแกน x และ y ตามนั้น

บางครั้ง ลูกบอลอาจมีความเร็วมากพอที่จะทะลุผ่านลูกบอลอีกลูก ทำให้ทั้งสองลูกอยู่ในตำแหน่งเกือบเดียวกัน การคำนวณทางคณิตศาสตร์เพื่อปรับตำแหน่งของลูกบอลทั้งสองลูกนั้นซับซ้อนเกินไป เราจึงเพียงลบอินสแตนซ์ลูกบอลที่กำลังตรวจสอบอยู่ออก เนื่องจากฟังก์ชัน update คอยรักษาจำนวนลูกบอลขั้นต่ำไว้ จึงจะมีการสร้างอินสแตนซ์ลูกบอลใหม่ขึ้นมา และการจำลองก็จะดำเนินต่อไป

สุดท้าย เราควรคำนวณการเปลี่ยนแปลงของความเร็วและตำแหน่งของลูกบอลแต่ละลูกเมื่อใด? การวาดลูกบอลก่อนหรือหลังอัปเดตตัวแปรมีผลหรือไม่? ปัญหาในการเขียนโปรแกรมคือคำถามทั้งสองข้อมีคำตอบได้หลายแบบ เพื่อจัดการเรื่องนี้ เราได้นำเสนอวิธีติดตามการชนที่แตกต่างออกไปเล็กน้อย คุณสามารถเลือกวิธีที่ชอบได้ แต่ทั้งสองวิธีใช้งานได้จริง

<head>
<title>Multiple Balls</title>
<meta description="Snake-like climbing gradient effect"/>
<meta publisher="WhirlwindFX" />
</head>
<body style="margin: 0; padding: 0;">
<canvas id="exCanvas" width="320" height="200"></canvas>
</body>
<script>
// Get the canvas element from the DOM
var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");
var width = 320;
var height = 200;
var hue = 0;
let ballX = 160;
let velocityX = 0;
let ballY = 100;
let velocityY = 0;
let accelerationY = 1;
let effects = [];
function update() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 320,200);
// 1. Increase the number of balls present in the effects array
if (effects.length < 3){
effects.push(new Ball());
}
effects.forEach(ele => {
ele.draw();
})
window.requestAnimationFrame(update);
}
function Ball(){
this.bx = ballX;
this.vx = 100 * Math.sin(Date.now());
this.by = ballY;
this.vy = velocityY;
this.ay = accelerationY;
this.radius = 15;
// 2. Add a unique ID to each ball so we can compare them to each other and not themselves. We have also removed "impactX" and "impactY" in favor of a better solution for more balls.
this.id = Math.random();
this.draw = function(){
this.vy += this.ay;
this.vx += Math.sin(Date.now());
if (this.by + this.radius + this.vy > height){
this.vy = -10;
} else if (this.by - this.radius + this.vy < 0){
// 3. Add a "ceiling" to the canvas in case a ball collision causes the height to exceed 0y.
this.vy = 1;
}
if (this.bx + this.radius + this.vx > width){
this.vx = -.9;
} else if (this.bx - this.radius + this.vx < 0){
this.vx = -.9;
}
// 4. Iterate through each ball in the effects array to check for collisions
for (let i = 0; i < effects.length; i++){
let ele = effects[i];
// If the ball we are checking against is this ball, skip this cycle
if (this.id == ele.id){
continue;
}
// If the balls are clipping too much, remove this ball from the canvas
if (Math.abs(this.bx - ele.bx) < this.radius && Math.abs(this.by - ele.by) < this.radius){
effects.splice(i, 1);
}
// If the balls will collide, reverse their velocities and subtract some force to account for elasticity
if (Math.abs(this.bx + this.vx - ele.bx) < (this.radius * 2) && Math.abs(this.by + this.vy - ele.by) < (this.radius * 2)){
this.vx *= -.9;
this.vy *= -.9;
}
}
this.by += this.vy;
this.bx += this.vx;
// 5. Because complicated calcualtions for the velocities happen before this point, finalize the x- and y-coordinates by making sure they are bounded within the canvas.
while (this.bx - this.radius < 0){
this.bx++
}
while (this.bx + this.radius > width){
this.bx--
}
while (this.by - this.radius < 0){
this.by++
}
while (this.by + this.radius > height){
this.by--
}
ctx.beginPath();
ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
ctx.fillStyle = "black"
ctx.fill();
}
}
window.requestAnimationFrame(update);
</script>
<head>
<title>Multiple Balls</title>
<meta description="Snake-like climbing gradient effect"/>
<meta publisher="WhirlwindFX" />
</head>
<body style="margin: 0; padding: 0;">
<canvas id="exCanvas" width="320" height="200"></canvas>
</body>
<script>
// Get the canvas element from the DOM
var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");
var width = 320;
var height = 200;
var hue = 0;
let ballX = 160;
let velocityX = 0;
let ballY = 100;
let velocityY = 0;
let accelerationY = 1;
let effects = [];
function update() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 320,200);
// 1. Increase the number of balls present in the effects array
if (effects.length < 3){
effects.push(new Ball());
}
effects.forEach(ele => {
ele.draw();
})
window.requestAnimationFrame(update);
}
function Ball(){
this.bx = ballX;
this.vx = 100 * Math.sin(Date.now());
this.by = ballY;
this.vy = velocityY;
this.ay = accelerationY;
this.radius = 15;
// 2. Add a unique ID to each ball so we can compare them to each other and not themselves. We have also removed "impactX" and "impactY" in favor of a better solution for more balls.
this.id = Math.random();
this.draw = function(){
this.vy += this.ay;
this.vx += Math.sin(Date.now());
if (this.by + this.radius + this.vy > height){
this.vy = -10;
} else if (this.by - this.radius + this.vy < 0){
// 3. Add a "ceiling" to the canvas in case a ball collision causes the height to exceed 0y.
this.vy = 1;
}
if (this.bx + this.radius + this.vx > width){
this.vx = -.9;
} else if (this.bx - this.radius + this.vx < 0){
this.vx = -.9;
}
// 4. Iterate through each ball in the effects array to check for collisions
for (let i = 0; i < effects.length; i++){
let ele = effects[i];
// If the ball we are checking against is this ball, skip this cycle
if (this.id == ele.id){
continue;
}
// If the balls are clipping too much, remove this ball from the canvas
if (Math.abs(this.bx - ele.bx) < this.radius && Math.abs(this.by - ele.by) < this.radius){
effects.splice(i, 1);
}
// If the balls will collide, reverse their velocities and subtract some force to account for elasticity
if (Math.abs(this.bx + this.vx - ele.bx) < (this.radius * 2) && Math.abs(this.by + this.vy - ele.by) < (this.radius * 2)){
this.vx *= -.9;
this.vy *= -.9;
}
}
this.by += this.vy;
this.bx += this.vx;
// 5. Because complicated calcualtions for the velocities happen before this point, finalize the x- and y-coordinates by making sure they are bounded within the canvas.
while (this.bx - this.radius < 0){
this.bx++
}
while (this.bx + this.radius > width){
this.bx--
}
while (this.by - this.radius < 0){
this.by++
}
while (this.by + this.radius > height){
this.by--
}
ctx.beginPath();
ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
ctx.fillStyle = "black"
ctx.fill();
}
}
window.requestAnimationFrame(update);
</script>
function update() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 320,200);
// 1. Increase the number of balls present in the effects array
if (effects.length < 3){
effects.push(new Ball());
}
effects.forEach(ele => {
ele.draw();
})
window.requestAnimationFrame(update);
}
function Ball(){
this.bx = ballX;
this.vx = 100 * Math.sin(Date.now());
this.by = ballY;
this.vy = velocityY;
this.ay = accelerationY;
this.radius = 15;
// 2. Add a unique ID to each ball so we can compare them to each other and not themselves. We have also removed "impactX" and "impactY" in favor of a better solution for more balls.
this.id = Math.random();
this.draw = function(){
this.vy += this.ay;
this.vx += Math.sin(Date.now());
if (this.by + this.radius + this.vy > height){
this.vy = -10;
} else if (this.by - this.radius + this.vy < 0){
// 3. Add a "ceiling" to the canvas in case a ball collision causes the height to exceed 0y.
this.vy = 1;
}
if (this.bx + this.radius + this.vx > width){
this.vx = -.9;
} else if (this.bx - this.radius + this.vx < 0){
this.vx = -.9;
}
// 4. Iterate through each ball in the effects array to check for collisions
for (let i = 0; i < effects.length; i++){
let ele = effects[i];
// If the ball we are checking against is this ball, skip this cycle
if (this.id == ele.id){
continue;
}
// If the balls are clipping too much, remove this ball from the canvas
if (Math.abs(this.bx - ele.bx) < this.radius && Math.abs(this.by - ele.by) < this.radius){
effects.splice(i, 1);
}
// If the balls will collide, reverse their velocities and subtract some force to account for elasticity
if (Math.abs(this.bx + this.vx - ele.bx) < (this.radius * 2) &&
Math.abs(this.by + this.vy - ele.by) < (this.radius * 2)){
this.vx *= -.9;
this.vy *= -.9;
}
}
this.by += this.vy;
this.bx += this.vx;
// 5. Because complicated calculations for the velocities happen before this point, finalize the x- and y-coordinates by making sure they are bounded within the canvas.
while (this.bx - this.radius < 0){
this.bx++
}
while (this.bx + this.radius > width){
this.bx--
}
while (this.by - this.radius < 0){
this.by++
}
while (this.by + this.radius > height){
this.by--
}
ctx.beginPath();
ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
ctx.fillStyle = "black"
ctx.fill();
}
}

สุดท้าย เราจะเพิ่มการควบคุมพื้นฐานสำหรับผู้ใช้เพื่อให้น่าสนใจยิ่งขึ้น เราได้อธิบายการเปลี่ยนเฉดสี (hue) อย่างละเอียดไปแล้ว ดังนั้นเพื่อไม่ให้โค้ดซับซ้อนขึ้นไปอีก เราจะเน้นที่การปรับจำนวนและรัศมีของลูกบอล ซึ่งต้องแก้ไขฟังก์ชันที่มีอยู่เพียงเล็กน้อยเท่านั้น

<head>
<title>User Controls</title>
<meta description="Snake-like climbing gradient effect"/>
<meta publisher="WhirlwindFX" />
<!-- Add two numerical sliders: radius and amount --->
<meta property="radius" label="Size" type="number" min="5" max="100" default="20">
<meta property="amount" label="Amount" type="number" min="1" max="50" default="2">
</head>
function update() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 320,200);
// Set the minimum effects to be the user-controlled amount. If the length of effects is greater than amount, pop an element off the end.
if (effects.length < amount){
effects.push(new Ball());
} else if (effects.length > amount){
effects.pop();
}
effects.forEach(ele => {
ele.draw();
})
window.requestAnimationFrame(update);
}
this.draw = function(){
// Finally, set the radius to be the user-controlled radius inside of the draw function each frame.
this.radius = radius;
this.vy += this.ay;
this.vx += Math.sin(Date.now());
// . . . rest of function . . .
}

หวังว่าคุณจะสนุกกับบทช่วยสอนแอนิเมชันด้วยคลาส JavaScript ของเรา! แม้จะซับซ้อนถึงระดับนี้แล้ว เอฟเฟกต์นี้ก็ยังเป็นเพียงยอดภูเขาน้ำแข็งของสิ่งที่คุณทำได้ด้วย HTML canvas นอกจากนี้ เรายังไม่ถือว่ามันเสร็จสมบูรณ์ หากต้องการความสมบูรณ์แบบ คุณจะสังเกตเห็นว่าการชนของลูกบอลถูกตรวจพบก่อนที่จะเกิดขึ้นจริงหนึ่งเฟรม ซึ่งหมายความว่าลูกบอลมักไม่ได้ชนกันจริง ๆ การชนยังถูกทำให้ง่ายขึ้นในแง่ของการถ่ายโอนพลังงาน เนื่องจากความเร็วที่ได้พิจารณาเพียงความเร็วปัจจุบันของลูกบอลเอง โดยไม่ได้คำนึงถึงพลังงานของลูกบอลอีกลูก สุดท้าย การตรวจสอบตำแหน่งของลูกบอลแต่ละลูกหลายครั้งต่อหนึ่งลูปนั้นไม่มีประสิทธิภาพในแง่ของ time complexity และสามารถปรับให้เหมาะสมได้ด้วย memoization ขั้นพื้นฐาน

ท้ายที่สุดแล้ว จงมองเอฟเฟกต์ของคุณอย่างมีวิจารณญาณเสมอ โดยทั่วไปเอฟเฟกต์สามารถปรับปรุงให้ดีขึ้นได้ไม่ทางใดก็ทางหนึ่ง และความแตกต่างระหว่างเอฟเฟกต์ธรรมดากับเอฟเฟกต์ที่ยอดเยี่ยมมักมาจากการเพียงจ้องมองมันและยอมให้ตัวเองไม่ชอบมันอย่างน้อยสักครั้ง

สำหรับบทช่วยสอนแบบทีละขั้นตอนบทสุดท้าย ลองดูส่วน Callbacks ของเรา ซึ่งอธิบายขั้นตอนการรับข้อมูลมิเตอร์เพื่อเปิดและปิดเอฟเฟกต์