台球html游戏算法介绍

简介: 台球html游戏算法介绍

获取本游戏代码


如果需要本游戏的代码,请扫描关注我的公众号,回复“台球源码”即可。

游戏运行示例


image.gif

基础物理知识


  1. 摩擦力
    f = m * af
    摩擦力产生的加速度af使得台球的速度减小,最终减小为0。
  2. 动能守恒公式
    1/2 * m1 * v1^2 + 1/2 * m2 * v2^2 = 1/2 * m1 * v1’^2 + 1/2 * m2 * v2’^2
  3. 动量守恒公式
    m1 * v1 + m2 * v2 = m1 * v1’ + m2 * v2’

构建物理模型


桌台及小球


如下图,把桌台抽象成一个二维坐标系,每个台球的中心抽象为坐标(x,y)。

横向为向右延伸的x轴,

纵向为向下延伸的y轴。

对应到代码中,就是元素的margin-leftmargin-right 值。

image.png

摩擦力


image.png

在小球的运动过程中,始终在其相反方向上施加一个摩擦力的加速度af。

小球间的碰撞检测


image.png

对于两个小球,判断是否碰撞的公式为:(x1 - x2) ^ 2 + (y1 - y2) ^ 2 <= (2*r) ^ 2

小球间的碰撞反应


image.png

首先,小球碰撞抽象为物理模型中的完全弹性碰撞,且小球的质量相等。即碰撞瞬间,二者遵循动能守恒与动量守恒。

选取两球圆心的直线为切向, 垂直于圆心直线的为法向。

于是我们可以得出结论:

(一)在切向, 两球交换速度, 而在法向, 两球分速度不变。

由此,我们拓展到当V1不为0,V2为0时,此时就相当于一个白球去撞一个静止不动的其他球。于是我们可以得出结论:

(二)在切向, 球1切向速度不变, 而在法向, 球1的法向速度给了球2。


【注】通常我们把游戏设置为1秒60帧,当小球的速度过大时,在前一帧两个小球还没相撞,但在下一帧两个球就直接重叠了。这对我们利用圆心构建法向和切向会产生很大误差。此时我们可以在小球即将重叠的前一帧,控制小球按照原有方向无限逼近,最终达到碰撞但不重叠的状态。

小球与边界的碰撞


当小球碰撞到边界时,直接把小球垂直于边界方向的速度取负数即可。

检测落袋


image.png

如上图边框的标红部分。我们在检测边界碰撞时,如果小球进入这些标红边界,那么小球不发生反弹。

之后,我们记录下6个球袋的坐标,利用球袋坐标与小球坐标之间的距离来判断小球是否落袋。公式:

(x袋 - x) ^ 2 + (y袋 - y) ^ 2 <= d ^ 2

电脑玩家的基本思路


  1. 首先明确电脑打的球是什么类别。例如:实心球,花球。此处假设电脑打的是实心球。
  2. 电脑遍历白球与每个还没入袋的实心球之间是否有其他球挡着。这关系到白球是否能击打这个
  3. 对于每个能击打的球,电脑再计算每个球打哪个袋子为最优选项。
  1. 现在有了白球,要击打的球,目标袋。电脑计算角度,开始击球!球进了!

电脑判断击目标球路径上是否有阻碍


image.png

如图,判断击目标球路径上是否有阻碍,我们需要计算,“可能会阻碍的球”与白球击球路径的距离是否小于球的半径r。这里用到点与直线的距离公式。

image.png

我们已知三个球的球心坐标,先算出“白球”与“目标球”的斜率K,然后代入“白球”的坐标得到直线方程L,最后利用点到直线的距离公式算出“可能会阻碍的球”与直线L的距离D。如果D小于球的半径r,说明击球过程会被阻碍。

电脑计算击球角度


image.png

如图,我们在小球的碰撞反应中,得出过结论二:

当球1初速度不为0,球2初速度为0:

(二)在切向, 球1切向速度不变, 而在法向, 球1的法向速度给了球2。

根据此结论,我们不难发现,“白球”在击完“目标球”后,它的切向速度会给“目标球”,而此时切向应当是与“目标球”和“目标袋”的连线重合。若要使“目标球”入袋,我们只要反过来推导。


首先算出“目标球”与“目标袋”的斜率K;

沿着斜率K的方向,在“目标球”的球心位置,向反方向计算出一个球的直径长度的坐标(P1,P2);

使“白球”击打坐标(P1,P2),即可把“目标球”击入袋中!

进行下一个游戏的开发!


指尖大冒险、跳一跳

是男人就下一百层

五子棋html游戏代码与算法介绍

注意事项


【1】 原创博客,转载本篇请与我联系,尊重版权。

【2】 关于阅读本篇博客的所有问题、代码源码、图片素材、编程技巧、编程经历都可联系我或者关注公众号"三黄工作室",交流讨论。

【3】 本人部分时间承接各种毕业作业、网站编写、微信小程序编写。需要请加QQ:1460787433。


相关文章
|
2月前
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用,尤其在创建交互式网页游戏时。它支持多种场景,如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码,可实现流畅的拖放交互,并提供视觉反馈,增强用户体验。此外,还需考虑设备兼容性和数据管理,确保游戏在不同设备和浏览器上都能良好运行。总之,HTML5拖放功能使网页游戏更生动有趣。
|
1月前
|
人工智能 算法 Java
【搜索算法】数字游戏(C/C++)
【搜索算法】数字游戏(C/C++)
|
3月前
|
人工智能 算法 Java
LeetCode经典算法题:井字游戏+优势洗牌+Dota2参议院java解法
LeetCode经典算法题:井字游戏+优势洗牌+Dota2参议院java解法
50 1
|
3月前
|
算法
互动游戏解决遇到问题之基于射线投射寻路算法的问题如何解决
互动游戏解决遇到问题之基于射线投射寻路算法的问题如何解决
|
3月前
|
算法 Python
【python】python基于 Q-learning 算法的迷宫游戏(源码+论文)【独一无二】
【python】python基于 Q-learning 算法的迷宫游戏(源码+论文)【独一无二】
|
5月前
|
算法 数据挖掘 开发者
LeetCode题目55:跳跃游戏【python5种算法贪心/回溯/动态规划/优化贪心/索引哈希映射 详解】
LeetCode题目55:跳跃游戏【python5种算法贪心/回溯/动态规划/优化贪心/索引哈希映射 详解】
|
5月前
|
算法 JavaScript 前端开发
【经典算法】LCR187:破冰游戏(约瑟夫问题,Java/C/Python3/JavaScript实现含注释说明,Easy)
【经典算法】LCR187:破冰游戏(约瑟夫问题,Java/C/Python3/JavaScript实现含注释说明,Easy)
81 1
|
5月前
|
移动开发 前端开发 程序员
程序员必知:基于HTML5堆木头游戏
程序员必知:基于HTML5堆木头游戏
32 0
|
5月前
切方块游戏 HTML5+jQuery【附源码】
切方块游戏 HTML5+jQuery【附源码】
39 0
|
5月前
|
算法
【经典LeetCode算法题目专栏分类】【第9期】深度优先搜索DFS与并查集:括号生成、岛屿问题、扫雷游戏
【经典LeetCode算法题目专栏分类】【第9期】深度优先搜索DFS与并查集:括号生成、岛屿问题、扫雷游戏