扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >html5怎么实现模拟平抛运动
  • 507

0
分享到

html5怎么实现模拟平抛运动

2024-04-02 19:04:59 507人浏览 泡泡鱼
摘要

本文小编为大家详细介绍“HTML5怎么实现模拟平抛运动”，内容详细，步骤清晰，细节处理妥当，希望这篇“html5怎么实现模拟平抛运动”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

本文小编为大家详细介绍“HTML5怎么实现模拟平抛运动”，内容详细，步骤清晰，细节处理妥当，希望这篇“html5怎么实现模拟平抛运动”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

物体以一定的初速度沿水平方向抛出，如果物体仅受重力作用，这样的运动叫做平抛运动。平抛运动可看作水平方向的匀速直线运动以及竖直方向的自由落体运动的合运动。平抛运动的物体，由于所受的合外力为恒力，所以平抛运动是匀变速曲线运动,平抛物体的运动轨迹为一抛物线。平抛运动是曲线运动 平抛运动的时间仅与抛出点的竖直高度有关；物体落地的水平位移与时间（竖直高度）及水平初速度有关。

代码如下:

<html>

<head>

<meta charset=utf-8>

<title>html5炮弹</title>

<script>

//box

var box_x=0;

var box_y=0;

var box_width=300;

var box_height=300;

//ball

var ball_x=10;

var ball_y=10;

var ball_radius=10;

var ball_vx=10;

var ball_vy=0;

//constant

var g=10;//note

var rate=0.9;

//bound

var bound_left=box_x+ball_radius;

var bound_right=box_x+box_width-ball_radius;

var bound_top=box_y+ball_radius;

var bound_bottom=box_y+box_height-ball_radius;

//context

var ctx;

function init()

{

ctx=document.getElementById('canvas').getContext('2d');

ctx.lineWidth=ball_radius;

ctx.fillStyle="rgb(200,0,50)";

move_ball();

setInterval(move_ball,100);

}

function move_ball()

{

ctx.clearRect(box_x,box_y,box_width,box_height);

move_and_check();

ctx.beginPath();

ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true);

ctx.fill();

ctx.strokeRect(box_x,box_y,box_width,box_height);

}

function move_and_check()

{

var cur_ball_x=ball_x+ball_vx;

var temp=ball_vy;

ball_vy=ball_vy+g;

var cur_ball_y=ball_y+ball_vy+g/2;

if(cur_ball_x<bound_left)

{

cur_ball_x=bound_left;

ball_vx=-ball_vx*0.9;

ball_vy=ball_vy*0.9;

}

if(cur_ball_x>bound_right)

{

cur_ball_x=bound_right;

ball_vx=-ball_vx*0.9;

ball_vy=ball_vy*0.9;

}

if(cur_ball_y<bound_top)

{

cur_ball_y=bound_top;

ball_vy=-ball_vy*0.9;

ball_vx=ball_vx*0.9;

}

if(cur_ball_y>bound_bottom)

{

cur_ball_y=bound_bottom;

ball_vy=-ball_vy*0.9;

ball_vx=ball_vx*0.9;

}

ball_x=cur_ball_x;

ball_y=cur_ball_y;

}

</script>

</head>

<body onLoad="init()">

<canvas id="canvas" width="400" height="400"/>

</body>

</html>

读到这里，这篇“html5怎么实现模拟平抛运动”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网node.js频道。

--结束END--

本文标题: html5怎么实现模拟平抛运动

本文链接: https://lsjlt.com/news/92115.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • html5怎么实现模拟平抛运动
    本文小编为大家详细介绍“html5怎么实现模拟平抛运动”，内容详细，步骤清晰，细节处理妥当，希望这篇“html5怎么实现模拟平抛运动”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。...
    99+
    2024-04-02
  • html5怎么模拟平抛运动
    这篇文章主要讲解了“html5怎么模拟平抛运动”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“html5怎么模拟平抛运动”吧！物体以一定的初速度沿水平方向抛出...
    99+
    2024-04-02
  • HTML5中怎么用Canvas实现3D水体模拟动画
    这篇文章主要介绍了HTML5中怎么用Canvas实现3D水体模拟动画的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML5中怎么用Canvas实现3D水体模拟动画文章都会有所...
    99+
    2024-04-02
  • python怎么实现主动抛出异常
    在Python中，我们可以使用`raise`语句来主动抛出异常。`raise`语句可以与内置的异常类结合使用，也可以自定义异常类。以...
    99+
    2023-10-12
    python
  • 基于Python如何实现模拟三体运动
    本文小编为大家详细介绍“基于Python如何实现模拟三体运动”，内容详细，步骤清晰，细节处理妥当，希望这篇“基于Python如何实现模拟三体运动”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。拉格朗日方程此前所做的...
    99+
    2023-07-05
  • java mockito模拟抛出异常怎么解决
    在使用Mockito模拟方法抛出异常时，可以使用Mockito的doThrow()方法来模拟方法抛出异常。下面是一个简单的示例： 假...
    99+
    2024-03-13
    java
  • CSS如何实现小球抛物线运动的动画效果
    这篇文章将为大家详细讲解有关CSS如何实现小球抛物线运动的动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　一个物体实现抛物线运动，物理上是将物体分为水平运动...
    99+
    2024-04-02
  • html5表白模板怎么实现
    这篇文章主要讲解了“html5表白模板怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“html5表白模板怎么实现”吧！ 　　HTML代码如下： 　...
    99+
    2024-04-02
  • 基于matlab怎么模拟打桩机运动学
    这篇文章主要介绍“基于matlab怎么模拟打桩机运动学”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“基于matlab怎么模拟打桩机运动学”文章能帮助大家解决问题。1...
    99+
    2024-04-02
  • C++中怎么用Clock类模拟实现闹钟运行
    今天小编给大家分享一下C++中怎么用Clock类模拟实现闹钟运行的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。定义一个时钟类...
    99+
    2023-06-29
  • 基于Python实现模拟三体运动的示例代码
    目录拉格朗日方程推导方程组微分方程算法化求解+画图动图绘制温馨提示，只想看图的画直接跳到最后一节 拉格朗日方程 此前所做的一切三体和太阳系的动画，都是基于牛顿力学的，而且直接对微分进...
    99+
    2023-03-10
    Python模拟三体运动 Python三体运动 Python三体
  • html5缓动效果怎么实现
    这篇文章主要介绍“html5缓动效果怎么实现”，在日常操作中，相信很多人在html5缓动效果怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”html5缓动效果怎么实现”...
    99+
    2024-04-02
  • HTML5和CSS3怎么实现模态框
    这篇文章主要介绍“HTML5和CSS3怎么实现模态框”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“HTML5和CSS3怎么实现模态框”文章能帮助大家解决问题。源码示例可能你并不想看我下面的一堆冗长的...
    99+
    2023-07-05
  • C语言怎么模拟实现动态通讯录
    本篇内容主要讲解“C语言怎么模拟实现动态通讯录”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“C语言怎么模拟实现动态通讯录”吧!目录模拟实现通讯录总体架构一览图文件执行任务分模块实现 测...
    99+
    2023-06-20
  • C++Clock类模拟实现闹钟运行
    本文实例为大家分享了C++ Clock类模拟闹钟运行的具体代码，供大家参考，具体内容如下 定义一个时钟类Clock，设计成员函数SetAlarm（int hour,int minut...
    99+
    2024-04-02
  • 小程序怎么实现购物车抛物线动画
    这篇文章主要介绍“小程序怎么实现购物车抛物线动画”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“小程序怎么实现购物车抛物线动画”文章能帮助大家解决问题。分析要实现抛物线动画，我当时想到的是用插件的方式...
    99+
    2023-06-26
  • 【C++】平衡二叉搜索树的模拟实现
    🌇个人主页：平凡的小苏 📚学习格言：命运给你一个低的起点，是想看你精彩的翻盘，而不是让你自甘堕落，脚下的路虽然难走，但我还能走，比起向阳而生，我更想尝试逆风翻盘。 ...
    99+
    2023-09-11
    c++ 开发语言
  • HTML5中怎么实现动画效果
    这期内容当中小编将会给大家带来有关HTML5中怎么实现动画效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。1.canvas html代码： 代码如下:<html&...
    99+
    2024-04-02
  • 怎么在html5中模拟长按事件
    本篇文章为大家展示了怎么在html5中模拟长按事件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。思路放弃click事件，通过判断按的时长来决定是单击还是长按使用touchstart和touchend...
    99+
    2023-06-09
  • html5中如何使用requestAnimationFrame实现平滑滚动效果
    这篇文章将为大家详细讲解有关html5中如何使用requestAnimationFrame实现平滑滚动效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。使用request...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作