圆周分析：
圆周运动：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } #ball{ width: 30px; height: 30px; background: orange; border-radius: 50%; position: absolute; left: 500px; top: 150px; } </style> <body> <div id="ball"></div> </body> </html> <script> var ball = document.getElementById("ball"); var r = 200;//运动轨迹半径 var deg = 90;//初始角度 var timer = null; //获取运动轨迹的圆心 var centerPoint = { x : ball.offsetLeft + ball.offsetWidth/2, y : ball.offsetHeight + r } timer = setInterval( function(){ ball.style.left = centerPoint.x + r*Math.cos( deg * Math.PI/180 ) + "px"; ball.style.top = centerPoint.y - r*Math.sin( deg * Math.PI/180 ) + "px" ; deg-=2; },10 ) </script>
椭圆圆周运动：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } #ball{ width: 30px; height: 30px; background: orange; border-radius: 50%; position: absolute; left: 500px; top: 150px; } </style> <body> <div id="ball"></div> </body> </html> <script> var ball = document.getElementById("ball"); var a = 400;//长轴 var b = 200;//短轴 var deg = 90;//初始角度 var timer = null; //获取运动轨迹的圆心 var centerPoint = { x : ball.offsetLeft + ball.offsetWidth/2, y : ball.offsetHeight + b } timer = setInterval( function(){ ball.style.left = centerPoint.x + a*Math.cos( deg * Math.PI/180 ) + "px"; ball.style.top = centerPoint.y - b*Math.sin( deg * Math.PI/180 ) + "px" ; deg-=2; },10 ) </script>
沿圆环圆周运动：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #circle{ width:500px; height: 500px; border:1px solid red; border-radius: 50%; position: absolute; left: 500px; top:100px; } #ball{ width: 30px; height: 30px; position: absolute; top:85px; left:735px; background: teal; border-radius: 50%; } </style> <body> <div id="circle"></div> <div id="ball"></div> </body> </html> <script> var r = 250; var circle = document.getElementById("circle"); var ball = document.getElementById("ball"); var centerPoint = { "x" : circle.offsetLeft + circle.offsetWidth/2, "y" : circle.offsetTop + circle.offsetHeight/2 } var timer = null; var deg = 90; timer = setInterval(function(){ ball.style.left = centerPoint.x + r*Math.cos(deg*Math.PI/180) - 15 +"px"; ball.style.top = centerPoint.y - r*Math.sin(deg*Math.PI/180) - 15 + "px"; deg -= 3; },30) </script>
小球运动反弹：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } #ball{ width: 30px; height: 30px; position: absolute; left: 0; top: 150px; background: orange; border-radius:50% ; } </style> <body> <button id="btn">我要飞</button> <div id="ball"></div> </body> </html> <script> var ball = document.getElementById("ball"); var speedX = 10, speedY = -8, timer = null; btn.onclick = function(){ timer = setInterval( function(){ ball.style.left = ball.offsetLeft + speedX + "px"; ball.style.top = ball.offsetTop + speedY + "px"; var maxL = window.innerWidth - ball.offsetWidth; var maxT = window.innerHeight - ball.offsetHeight; if( ball.offsetTop < 0 ){ speedY *= -1;//纵向速度取反 }else if( ball.offsetTop > maxT ){ speedY *= -1;//纵向速度取反 ball.style.top = maxT + "px"; } if( ball.offsetLeft < 0 ){ speedX *= -1;//横向速度取反 }else if( ball.offsetLeft > maxL ){ speedX *= -1; ball.style.left = maxL +"px"; } },20 ) } </script>
小球运动重力加速度：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } #ball{ width: 30px; height: 30px; position: absolute; left: 0; top: 250px; background: orange; border-radius:50% ; } </style> <body> <button id="btn">我要飞</button> <div id="ball"></div> </body> </html> <script> var ball = document.getElementById("ball"); var speedX = 8, speedY = -18, timer = null; btn.onclick = function(){ timer = setInterval( function(){ ball.style.left = ball.offsetLeft + speedX + "px"; ball.style.top = ball.offsetTop + speedY + "px"; var maxT = window.innerHeight - ball.offsetHeight; //小球落地 反弹 if( ball.offsetTop > maxT ){ ball.style.top = maxT + "px"; speedY *= -0.7;//由于小球落地后会有能力损耗 反弹速度变小 //由于阻力 小球横向速度也会越来越小 speedX--; if( speedX < 0 ){ clearInterval( timer ); } } speedY++;//重力加速度原理 },30 ) } </script>
打砖块小游戏：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0px; padding:0px;} #container{width:1000px;height:500px;border:orange solid 1px;margin:40px 0 0 200px;position:relative} #box{box-shadow: 4px 4px 4px 0 #ccc;width:680px;font-size:55px;text-align:center;line-height:400px;height:400px;position:relative;border:orangered solid 1px;margin:20px 60px;} button{background-color:#666;color:#fff;margin-left:300px;width:100px;height:30px;} button:hover{ background-color: #000;} #bubble{width:15px;height:15px; background-color: red; border-radius:50%; position:absolute; bottom: 12px; left:180px; box-shadow: 4px 4px 2px 0 #ccc; } #board{width:150px;height:10px; background-color: orange; border-radius:5px; position:absolute; bottom:2px; box-shadow:3px 3px 2px 0 #ccc; left:160px; } ul{list-style:none;} ul>li{width:66px;height:15px; background-color: #069; border:solid 1px #ccc;position:absolute; } #show{ position:absolute; right:30px; top:20px; width:200px; height:400px; border:dotted 1px #888; background-color: #333; } #show span{display:block; color:#0f0; font-family: "微软雅黑"; height:30px; line-height:30px; padding:5px; } span#info{display:block;font-size:22px;line-height:50px;height:50px;border-bottom:solid 1px #0f0} #time, #res, #times, #score{border-bottom:dashed 1px #0f0} </style> </head> <body> <!-- 游戏面板 --> <div id="container"> <!--提示信息 --> <div id="show"> <span id="info">游戏重要信息</span> <span>当前时间：</span> <span id="time">加载中...</span> <span>游戏状态</span> <span id="res">加载中...</span> <span>挡板打球次数</span> <span id="times">加载中...</span> <span>游戏得分</span> <span id="score">加载中...</span> </div> <!-- 游戏区域 --> <div id="box"> <!-- 挡板、小球、砖块 --> <ul id="u"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div id="bubble"></div> <div id="board"></div> </div> <button id="start">开始游戏</button> </div> </body> </html> <script src="../common.js"></script> <script> /* 功能 ：摆砖块 点击开始按钮启动游戏 ： 小球运动 挡板运动 */ window.onload = function(){ var startBtn = $id("start"),//开始按钮 box = $id("box"),//容器 ball = $id("bubble"),//小球 board = $id("board"),//挡板 timer = null, speedX = 2,//横向速度 speedY = -1,//纵向速度 list = $id("u").children,//砖块 w = list[0].offsetWidth, h = list[0].offsetHeight, leftInit = 0, //砖块的初始left值 topInit = 0;//砖块初始top值 init(); function init(){ //砖块的摆放 for( var i = 0 ; i <list.length ; i++ ){ list[i].style.backgroundColor = getColor() ; list[i].style.left = leftInit * w + "px"; list[i].style.top = topInit + "px"; leftInit++; if( i%10 == 9 ){ //每10个砖块换行 leftInit = 0; topInit += h; } } } startBtn.onclick = function(){ //挡板运动 fnBoardMove(); //小球运动 fnMove(); } //封装挡板运动函数 function fnBoardMove(){ document.onkeydown = function(e){ var e = e || event; var code = e.keyCode || e.which; switch( code ){ case 37 : { board.style.left = board.offsetLeft - 5 + "px"; if( board.offsetLeft < 0 ){ board.style.left = 0; } break; } case 39 : { board.style.left = board.offsetLeft + 5 + "px"; var maxL = box.offsetWidth - board.offsetWidth; if( board.offsetLeft > maxL ){ board.style.left = maxL + "px"; } break; } } } } //封装小球运动函数 function fnMove(){ timer = setInterval( function(){ ball.style.left = ball.offsetLeft + speedX + "px"; ball.style.top = ball.offsetTop + speedY + "px"; var maxL = box.offsetWidth - ball.offsetWidth; var maxT = box.offsetHeight - ball.offsetHeight; //小球和容器的左侧、右侧、上侧碰撞后 正常反弹 if( ball.offsetLeft < 0 ){ speedX *= -1; }else if( ball.offsetLeft > maxL ){ speedX *= -1; } if( ball.offsetTop < 0 ){ speedY *= -1; } //小球落地 游戏结束 if( ball.offsetTop > maxT ){ box.appendChild( document.createTextNode("Game Over") ); clearInterval( timer ); } //小球和挡板碰撞后 反弹 if( pz( ball,board ) ){ speedY *= -1; } //小球和砖块的碰撞 砖块消失 小球反弹 //遍历所有的砖块 判断小球和哪个砖块有碰撞 碰撞后 砖块消失 for( var i = 0 ; i < list.length ; i++ ){ if( pz( ball , list[i] ) ){ list[i].remove(); speedY *= -1; } } },10 ) } } </script>