JavaScript小球碰壁詳解
分享一段程式碼例項,它實現了小球隨機碰撞效果。
下面就詳細介紹一下它的實現過程,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .ball { width: 100px; height: 100px; border-radius: 50%; background: red; position: absolute; left: 100px; top: 100px; } </style> <script> window.onload = function() { var ball = document.querySelector(".ball"); var speedX = 2,speedY = 2; setInterval(function() { var left = ball.offsetLeft; var top = ball.offsetTop; left += speedX; top += speedY; if (left >= document.body.offsetWidth - ball.offsetWidth || left <= 0) { speedX *= -1; } if (top >= document.body.offsetHeight - ball.offsetHeight || top <= 0) { speedY *= -1; } ball.style.left = left + "px"; ball.style.top = top + "px"; }, 16); } </script> </head> <body> <div class="ball"></div> </body> </html>
上面的程式碼實現了我們的要求,下面詳細介紹一下它的實現過程。
一.程式碼註釋:
[CSS] 純文字檢視 複製程式碼.ball { width: 100px; height: 100px; border-radius: 50%; background: red; position: absolute; left: 100px; top: 100px; }
設定小球為圓形,並且是絕對定位,小球的位置就是通過控制left和top值來實現的。
[JavaScript] 純文字檢視 複製程式碼window.onload = function() { //code }
當文件內容完全載入完畢再去執行函式中的程式碼。
[JavaScript] 純文字檢視 複製程式碼var ball = document.querySelector(".ball");
獲取class屬性值為.ball的元素物件。
[JavaScript] 純文字檢視 複製程式碼var speedX = 2,speedY = 2;
宣告兩個變數並賦值為2,用來儲存小球在水平和垂直方向的移動速度。
[JavaScript] 純文字檢視 複製程式碼setInterval(function() { //code },16)
定時器函式每隔16毫秒執行一次回撥函式。
[JavaScript] 純文字檢視 複製程式碼var left = ball.offsetLeft; var top = ball.offsetTop;
獲取元素的left和top值。
[JavaScript] 純文字檢視 複製程式碼left += speedX; top += speedY
left和top值的改變,小球的位置也就發生改變。
[JavaScript] 純文字檢視 複製程式碼if (left >= document.body.offsetWidth - ball.offsetWidth || left <= 0) { speedX *= -1; }
小球碰壁後,速度會變為符號相反,比如原來是2,那麼就會變成-2。
二.相關閱讀:
(1).document.querySelector()可以參閱document.querySelector()一章節。
(2).offsetLeft可以參閱offsetleft一章節。
(3).offsetTop可以參閱js offsetTop一章節。
(4).offsetWidth可以參閱js offsetWidth一章節。
(5).offsetHeight可以參閱js offsetHeight一章節。
相關文章
- canvas小球碰壁效果Canvas
- canvas小球碰壁隨機運動Canvas隨機
- JavaScript隨機漂浮碰壁效果JavaScript隨機
- JavaScript this詳解JavaScript
- JavaScript之多小球非對心彈性碰撞JavaScript
- 碰壁Spark + MongodbSparkMongoDB
- 詳解JavaScript原型JavaScript原型
- JavaScript Promise 詳解JavaScriptPromise
- JavaScript之this詳解JavaScript
- JavaScript事件詳解JavaScript事件
- JavaScript原型詳解JavaScript原型
- JavaScript arguments物件詳解JavaScript物件
- JavaScript表格排序詳解JavaScript排序
- JavaScript中的this詳解JavaScript
- JavaScript閉包詳解JavaScript
- 詳解 JavaScript 閉包JavaScript
- JavaScript arguments 物件詳解JavaScript物件
- 詳解 JavaScript 儲存JavaScript
- javascript操作iframe詳解JavaScript
- 詳解 JavaScript 的類JavaScript
- 詳解javascript的類JavaScript
- Javascript陣列詳解JavaScript陣列
- javascript 閉包詳解JavaScript
- JavaScript作用域詳解JavaScript
- JavaScript Source Map 詳解JavaScript
- 詳解JavaScript中的thisJavaScript
- 玩轉 JavaScript 之詳解 thisJavaScript
- JavaScript 檔案物件詳解JavaScript物件
- JavaScript繼承詳解(二)JavaScript繼承
- JavaScript之原型深入詳解JavaScript原型
- JavaScript返回頂部詳解JavaScript
- JavaScript 打字機效果詳解JavaScript
- JavaScript抽獎效果詳解JavaScript
- JavaScript 秒錶效果詳解JavaScript
- Javascript—閉包詳解(3)JavaScript
- JavaScript中 Map 物件詳解JavaScript物件
- Javascript之字串拼接詳解JavaScript字串
- JavaScript 繼承方式詳解JavaScript繼承