180行JavaScript程式碼實現的小球隨機移動程式碼
<html> <body> <div id ='desc'><b>test1:</b>test2</div> <canvas id = 'canvas'></canvas> </body> <script> window.onload = init(); function init() { canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); canvas.height = window.innerHeight; canvas.width = window.innerWidth; mouse = {x:0,y:0}; colors = [ '#af0','#7CD14E','#1CDCFF','#FFFF00','#FF0000','#aee137','#bef202','#00b2ff','#7fff24','#13cd4b','#c0fa38','#f0a','#a0f','#0af','#000000' ]; canvas.addEventListener('mousemove',MouseMove,false); canvas.addEventListener('mousedown',MouseDown,false); canvas.addEventListener('mouseup',MouseUp,false); window.addEventListener('resize',canvasResize,false); dotsHolder = []; mouseMove = false; mouseDown = false; for(i = 0;i < 100;i++){ dotsHolder.push(new dots()); } /*REQUEST ANIMATION FRAME*/ (function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); console.log("timetoCall : " + timeToCall); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); console.log("id: " + id); lastTime = currTime + timeToCall; console.log("last time: " + lastTime); //return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }()); } function canvasResize(event) { canvas.height = window.innerHeight; canvas.width = window.innerWidth; cancelAnimationFrame(animate); } function MouseUp(event) { if(mouseMove) { mouseMove = false;} if(mouseDown) { mouseDown = false; } } function MouseDown(event) { mouseDown = true; } function MouseMove(event) { mouse.x = event.pageX - canvas.offsetLeft; mouse.y = event.pageY - canvas.offsetTop; if(mouseMove) { context.lineTo(mouseX,mouseY); context.stroke(); } } function dots(){ this.xPos = Math.random()*canvas.width; this.yPos = Math.random()*canvas.height; this.color = colors[Math.floor(Math.random()*colors.length)]; this.radius = Math.random()*10; this.vx = Math.cos(this.radius); this.vy = Math.sin(this.radius); this.stepSize = Math.random() / 10; this.step = 0; this.friction = 7; this.speedX = this.vx; this.speedY = this.vy; } dots.draw = function() { context.clearRect(0,0,canvas.width,canvas.height); for(var c = 0; c < dotsHolder.length;c++) { dot = dotsHolder[c]; context.beginPath(); distanceX = dot.xPos - mouse.x; distanceY = dot.yPos - mouse.y; var particleDistance = Math.sqrt(distanceX*distanceX + distanceY*distanceY); var particleMouse = Math.max( Math.min( 75 / ( particleDistance /dot.radius ), 7 ), 1 ); context.fillStyle = dot.color; dot.xPos += dot.vx; dot.yPos += dot.vy; if(dot.xPos < -50) { dot.xPos = canvas.width+50; } if(dot.yPos < -50) { dot.yPos = canvas.height+50; } if(dot.xPos > canvas.width+50) { dot.xPos = -50; } if(dot.yPos > canvas.height+50) { dot.yPos = -50; } context.arc(dot.xPos,dot.yPos,(dot.radius/2.5)*particleMouse,0,2*Math.PI,false); //console.log("circle x: " + dot.xPos + " y: " + dot.yPos); context.fill(); if(mouseDown) { var minimumDistance = 164, distance = Math.sqrt((dot.xPos - mouse.x) * (dot.xPos - mouse.x) + (dot.yPos - mouse.y) * (dot.yPos - mouse.y)), distanceX = dot.xPos - mouse.x, distanceY = dot.yPos - mouse.y; if (distance < minimumDistance) { var forceFactor = minimumDistance / (distance * distance), xforce = (mouse.x - dot.xPos) % distance/7, yforce = (mouse.y - dot.yPos) % distance/dot.friction, forceField = forceFactor * 2/dot.friction; dot.vx -= forceField * xforce; dot.vy -= forceField * yforce; } if(dot.vx > dot.speed) { dot.vx = dot.speed/dot.friction; dot.vy = dot.speed/dot.friction; } else if (dot.vy > dot.speed) { dot.vy = dot.speed/dot.friction; } } } } function animate(){ requestAnimationFrame(animate); dots.draw(); } animate(); </script> </html>
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2681758/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- canvas實現的隨機生成漂浮小球程式碼例項Canvas隨機
- canvas小球隨機漂浮碰撞程式碼例項Canvas隨機
- javascript實現的生成驗證碼隨機數程式碼例項JavaScript隨機
- javascript實現的m到n的隨機數程式碼例項JavaScript隨機
- 隨機快速排序Java程式碼實現隨機排序Java
- 自定義圓形View:實現跟隨手指移動的小球View
- canvas實現的彈力小球效果程式碼例項Canvas
- javascript生成隨機數程式碼例項JavaScript隨機
- JavaScript隨機點名程式碼例項JavaScript隨機
- 原生javascript實現的隨機生成4位字串程式碼例項JavaScript隨機字串
- 自定義隨機顏色的圓形小球view隨手指移動隨機View
- JavaScript的程式碼執行機制JavaScript
- js實現的產生隨機數程式碼例項JS隨機
- JavaScript隨機輸出大小寫字母程式碼JavaScript隨機
- JavaScript產生隨機數例項程式碼JavaScript隨機
- canvas實現的小球四壁碰撞效果程式碼例項Canvas
- javascript實現的放大效果程式碼JavaScript
- JavaScript隨滑鼠晃動的div塊程式碼例項JavaScript
- MySQL 隨機查詢資料與隨機更新資料實現程式碼MySql隨機
- JavaScript模擬拋物運動的程式碼實現JavaScript
- canvas小球碰壁隨機運動Canvas隨機
- js隨機運動小球效果JS隨機
- jQuery實現的生成隨機密碼程式碼例項簡單介紹jQuery隨機密碼
- javascript生成不重複隨機數程式碼例項JavaScript隨機
- 150行JavaScript程式碼實現擴增實境JavaScript
- JavaScript 實現sprintf 功能程式碼JavaScript
- javascript實現的驗證碼程式碼例項JavaScript
- 65行 JavaScript 程式碼實現 Flappy Bird 遊戲JavaScriptAPP遊戲
- DCI的一個Javascript實現程式碼JavaScript
- 動手實現程式碼虛擬機器虛擬機
- javaScript實現utf8解碼程式碼JavaScript
- 前端學習程式碼例項-JavaScript 生成隨機數前端JavaScript隨機
- javascript生成指定位數隨機數程式碼例項JavaScript隨機
- 拖動滾動條實現div跟隨效果程式碼例項
- javascript實現的身份證號碼驗證程式碼JavaScript
- JavaScript簡單抽獎程式的實現及程式碼JavaScript
- 30行Javascript程式碼實現圖片懶載入JavaScript
- JavaScript中的繼承及實現程式碼JavaScript繼承