This article mainly introduces the method of realizing gravity fall and elasticity effect in JavaScript, and analyzes the principles and specific implementation techniques of JavaScript gravity fall and elasticity effect in the form of examples. Friends in need can refer to this article
The example describes the method of realizing gravity drop and elastic effects in JavaScript. Share it with everyone for your reference, the details are as follows:
Here we use JS language to achieve the effect of bouncing up after falling to the ground under the action of gravity in the Html page, as shown below:
This example mainly involves the following issues:
1. Give the sphere an initial release velocity, how to achieve downward movement and before contacting the edge, in the vertical direction What is the effect of a larger speed speedY? Answer: This can be achieved by incrementing the vertical speed speedY by a fixed value every time in the timer. In the following code, speedY = 6; achieves this effect.
2. How to achieve the speed reverse effect after the sphere touches the ground (in this case, the lower edge of the browser)? Answer: After touching the ground, just set the directional speed to the opposite direction of the current speed. The condition in the code if (iW >= w||iW = h||iH
3. After the sphere touches the ground and rebounds, how to achieve the effect that the height of the sphere rising again is lower than the previous height? Answer: After touching the ground, the speed becomes negative, the timer starts to execute the next interval, and speedY = 6 is immediately executed. The bounce speed immediately decreases by 6, and its size is smaller than the moment before touching the ground. Therefore the sphere will not bounce back to its original height.
4. How to achieve the effect that the absolute value of the speed in the vertical direction of the sphere becomes smaller and smaller until it approaches 0? Answer: In fact, just use speedY = 6; in this example, the speed speedY in the vertical direction cannot reach 0, because under the premise that the initial speed is set in this function, the landing speed at a certain time cannot be 6 ( The result of each execution of the subsequent printing speed can be determined), so the next execution cannot be 0, so how exactly is the effect of falling to the ground stationary achieved? In fact, when the speedY increase value is set to 6, when the ball hits the ground at a certain moment, its speed is any one of 1, 2, 3, 4, and 5. After adding 6, the instantaneous rebound speed is - 5, -4, -3, -2, -1. After a timer period (30 milliseconds in this example), the speed will become 1, 2, 3, 4, 5 immediately after adding 6, and the next time the speed will become -5, -4, -3, -2, -1..., since speedY = 6 is at the head of the timer, the final result will always stay at -5, -4 before adding 6 , -3, -2, -1. Any value, and the timer is always dynamic, and the final sphere is displayed at the bottom.
5. When the sphere is released, it also has a lateral speed speedX. How to make the lateral speed gradually decrease to 0? Answer: In this example, the collision in the x direction does not need to be considered, so speedX can be multiplied by a number less than 1 for each timing, and the final speedX value will approach 0 infinitely, showing that it is stationary.
How to prevent the scroll bar from appearing when dragging the window?
Answer: After dragging the browser window, just set a new motion range for the sphere.
The implementation code and analysis are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性运动</title>
<style type="text/css">
#p {
width: 100px;
height: 100px;
background: green;
position: absolute;
border-radius: 50%;
}
</style>
</head>
<body>
<script type="text/javascript">
//window.onload表示等页面标签内容加载完之后再加载window.onload里面的内容
window.onload = function(){
//分别设置p在x和y方向的的初速度
var speedX = 2;
var speedY = 3;
//获取p标签
var p = document.getElementById("p");
//获取按钮
var btn = document.getElementById("btn");
//定义点击事件
btn.onclick = function(){
startMove();
};
//定义一个空的定时器，防止上次事件定时器的返回值叠加
var timer = null;
//定义点击事件函数
function startMove(){
//内部清空计时器，防止上次返回值叠加
clearInterval(timer);
//设置计时器
timer = setInterval(function(){
//竖直方向上反向运动时速度为负值，为了达到反弹逐渐速度逐渐减小的效果，可以在向下碰撞后速度加上一个正值
speedY += 6;
//分别获取p距离左边距和上边距的动态距离
var iW = p.offsetLeft + speedX;
var iH = p.offsetTop + speedY;
//获取p水平方向运动的最大距离，即不包含边框的浏览器窗口的宽度clientWidth减去p的宽度
var w = document.documentElement.clientWidth - p.offsetWidth;
//获取p垂直方向运动的最大距离
var h = document.documentElement.clientHeight - p.offsetHeight;
//当动态宽度达到p最大运动宽度范围时，立刻转换速度为反方向负值，同时把w的值负值给iw，因为w是可视窗口范围，当w缩小时，iw保存的还是上一次窗口条件下的距离左边距的距离
if (iW >= w||iW <= 0){speedX = -speedX;iW = w;}
//当动态高度达到p最大运动高度范围时，立刻转向速度，同时将x方向速度乘以0.8，使之速度逐渐减小
if (iH >= h||iH <= 0){speedY = -speedY;iH = h;speedX *= 0.95;}
//由于p.style.left和p.style.top还储存这上一次或第一次的计时后的值，此次计时后应把新的值储存起来，使p出现动态效果
p.style.left = iW + "px";
p.style.top = iH + "px";
console.log(speedX);
},30);
}
}
</script>
<input type="button" name="btn" id="btn" value="开始运动" />
<p id="p"></p>
</body>
</html>The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement JSON data grouping optimization in Javascript
How to use axios to implement the function of uploading pictures with a progress bar
How to use the Validate plug-in in jQuery
The above is the detailed content of How to achieve elastic effects in JavaScript. For more information, please follow other related articles on the PHP Chinese website!
JavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AMJavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.
JavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AMThe main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.
Understanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AMUnderstanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.
Python vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AMPython is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.
Python vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AMPython and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.
From C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AMThe shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.
JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AMDifferent JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.
Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AMJavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
Notepad++7.3.1
Easy-to-use and free code editor
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
SublimeText3 Linux new version
SublimeText3 Linux latest version
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
