Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Click the table to shoot!
3
9
14
15
8
12
10
5
6
2
13
1
4
11
7
css
html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #3F4D63; background: repeating-conic-gradient(from 45deg, #3F4D63 0deg 90deg, #495973 90deg 180deg); background-size: 50px 50px; animation: scrollBackground; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes scrollBackground { 0% { background-position: 0px 0px; } 100% { background-position: 50px 50px; } } h1 { color: white; font-family: sans-serif; font-weight: 100; font-size: 1.5em; text-shadow: 4px 4px rgba(0, 0, 0, 0.5); margin-top: 0; margin-bottom: 12px; } .pool-table-border { border: 20px solid #7B373B; box-shadow: 8px 8px rgba(0, 0, 0, 0.5); border-radius: 8px; } .pool-table-field { position: relative; width: 600px; height: 300px; background: #387D7A; box-shadow: 6px 6px rgba(0, 0, 0, 0.5) inset; background: repeating-conic-gradient(from 45deg, #387D7A 0deg 90deg, #456B7A 90deg 180deg); background-size: 50px 50px; } .ball { display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; position: absolute; transform: translate(-10px, -10px); border-radius: 10px; box-shadow: 3px 3px rgba(0, 0, 0, 0.5); } .ball-number { text-align: center; width: 12px; height: 12px; background: white; border-radius: 10px; font-family: sans-serif; font-size: 8px; line-height: 12px; font-weight: bold; } .ball-white { background: white; top: 150px; left: 150px; } .ball-red { background: red; top: 150px; left: 400px; } .ball-yellow-striped { background: linear-gradient(0deg, #FFFFFF 10%, #E9C46A 10%, #E9C46A 90%, #FFFFFF 90%); top: 140px; left: 420px; } .ball-green-striped { background: linear-gradient(0deg, #FFFFFF 10%, #2A9D8F 10%, #2A9D8F 90%, #FFFFFF 90%); top: 160px; left: 420px; } .ball-brown-striped { background: linear-gradient(0deg, #FFFFFF 10%, #7F4F24 10%, #7F4F24 90%, #FFFFFF 90%); top: 130px; left: 440px; } .ball-black { background: black; top: 150px; left: 440px; } .ball-purple-striped { background: linear-gradient(0deg, #FFFFFF 10%, purple 10%, purple 90%, #FFFFFF 90%); top: 170px; left: 440px; } .ball-blue-striped { background: linear-gradient(0deg, #FFFFFF 10%, #0096C7 10%, #0096C7 90%, #FFFFFF 90%); top: 120px; left: 460px; } .ball-orange { background: #F4A261; top: 140px; left: 460px; } .ball-green { background: #2A9D8F; top: 160px; left: 460px; } .ball-blue { background: #0096C7; top: 180px; left: 460px; } .ball-orange-striped { background: linear-gradient(0deg, #FFFFFF 10%, #F4A261 10%, #F4A261 90%, #FFFFFF 90%); top: 110px; left: 480px; } .ball-yellow { background: #E9C46A; top: 130px; left: 480px; } .ball-purple { background: purple; top: 150px; left: 480px; } .ball-red-striped { background: linear-gradient(0deg, #FFFFFF 10%, red 10%, red 90%, #FFFFFF 90%); top: 170px; left: 480px; } .ball-brown { background: #7F4F24; top: 190px; left: 480px; } @media screen and (max-width: 768px) { h1 { transform: translateY(-80px); } .pool-table-border { transform: rotate(-90deg) scale(0.75, 0.75); } }
JavaScript
const domBalls = document.querySelectorAll('.ball'); const balls = []; const FIELD_WIDTH = 600; const FIELD_HEIGHT = 300; domBalls.forEach((domBall, index) => { const ball = {}; const computedStyle = getComputedStyle(domBall); ball.element = domBall; ball.id = index; ball.x = parseInt(computedStyle.getPropertyValue('left')); ball.y = parseInt(computedStyle.getPropertyValue('top')); ball.radius = parseInt(computedStyle.getPropertyValue('width')); ball.speed = 0//Math.random() * 4 - 2; ball.direction = 0//Math.random() * Math.PI * 2; balls.push(ball); }) setInterval(tick, 16); function tick() { balls.forEach(ball => { // Bounce off walls if(ball.x < ball.radius / 2) { ball.x = ball.radius / 2; ball.direction = angleReflect(ball.direction, 90); } if(ball.x > FIELD_WIDTH - ball.radius / 2) { ball.x = FIELD_WIDTH - ball.radius / 2; ball.direction = angleReflect(ball.direction, 90); } if(ball.y < ball.radius / 2) { ball.y = ball.radius / 2; ball.direction = angleReflect(ball.direction, 0); } if(ball.y > FIELD_HEIGHT - ball.radius / 2) { ball.y = FIELD_HEIGHT - ball.radius / 2; ball.direction = angleReflect(ball.direction, 0); } // Collision balls.forEach(otherBall => { if(ball.id != otherBall.id) { if(distance(ball.x + ball.radius / 2, ball.y + ball.radius / 2, otherBall.x + otherBall.radius / 2, otherBall.y + otherBall.radius / 2) < ball.radius) { ball.direction = angle(otherBall.x + otherBall.radius / 2, otherBall.y + otherBall.radius / 2, ball.x + ball.radius / 2, ball.y + otherBall.radius / 2) ball.speed = ball.speed / 2 + otherBall.speed / 2; } } }) // Friction ball.speed -= 0.03; if(ball.speed <= 0.01) ball.speed = 0; // Update object position ball.x += Math.cos(degtorad(ball.direction)) * ball.speed; ball.y += Math.sin(degtorad(ball.direction)) * ball.speed; // Update screen position ball.element.style.left = ball.x + 'px'; ball.element.style.top = ball.y + 'px'; }) } // Click to shoot document.querySelector('.pool-table-field').addEventListener('click', e => { const whiteBall = balls[0]; whiteBall.speed = distance(e.offsetX, e.offsetY, whiteBall.x, whiteBall.y) * 0.1; whiteBall.direction = angle(e.offsetX, e.offsetY, whiteBall.x, whiteBall.y); }) function distance(x1, y1, x2, y2) { var a = x1 - x2; var b = y1 - y2; return Math.sqrt( a*a + b*b ); } function angle(x1, y1, x2, y2) { return radtodeg(Math.atan2(y2 - y1, x2 - x1)); } function radtodeg(radians) { return radians * (180/Math.PI);} function degtorad(degrees) { return degrees * (Math.PI/180); } function angleReflect(incidenceAngle, surfaceAngle){ var a = surfaceAngle * 2 - incidenceAngle; return a >= 360 ? a - 360 : a < 0 ? a + 360 : a; }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>台球(具有不稳定的物理特性!)-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号