Maison > Article > interface Web > Comment utiliser JS pour réaliser le mouvement de trajectoire parabolique d'une petite balle

Comment utiliser JS pour réaliser le mouvement de trajectoire parabolique d'une petite balle

亚连original: 2018-06-19 15:58:291915parcourir

Cet article présente principalement deux méthodes pour réaliser le mouvement de trajectoire parabolique d'une balle JS. Il analyse les compétences pertinentes en matière de calcul et de dessin graphique de JavaScript pour réaliser la trajectoire parabolique d'une petite balle sous forme d'exemples. peut s'y référer

Les exemples de cet article décrivent deux méthodes de mise en œuvre du mouvement de trajectoire parabolique des balles JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

L'idée générale deimplémenter le mouvement de trajectoire parabolique de la balle en js :

1. 🎜> méthode pour effectuer un rafraîchissement par intervalles et mettre à jour la position du ballon, pour obtenir des effets dynamiquessetInterval()2. Dessinez le ballon et la zone sportive peut être centrée verticalement grâce à la disposition flexible
3. formule physique
S(y)=1/2*g*t* t, S(x)=V(x)t pour calculer le chemin Déterminez maintenant
V(x)=4m/s, et l'intervalle de temps de rafraîchissement est défini sur 0,1 s. À l'origine, la conversion entre px et mètres est différente selon les tailles. Dans cet exemple, un moniteur de 17 pouces est utilisé, soit environ 1 px = 0,4 mm. Cependant, le navigateur est trop petit et ne peut donc simuler qu'une trajectoire parabolique. Dans cet exemple, la distance entre les px et les mètres est réduite à 100 fois.

Première méthode : dessiner la balle à travers le rayon de bordure

Idée : utiliser

pour dessiner la balle et la définir par rapport à la balle , calculez à chaque fois la position actuelle de la balle et attribuez-la en haut et à gauche. Lors du calcul de la trajectoire de mouvement, la variable peut être incrémentée pour calculer le nombre d'appels border-radius: 50%, chaque fois étant de 0,1 s, afin que le temps total puisse être calculé. Le code est le suivant : setInterval

<!DOCTYPE>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
  /*给body进行flex布局，实现垂直居中*/
  body {
  min-height: 100vh;/*高度适应浏览器高度*/
  display: flex;
  justify-content: center;/*水平居中*/
  align-items: center;/*垂直居中*/
    font-size: 20px;
    font-weight: bold;
  }
  /*设置运动区域*/
  #bg {
    width: 600px;
    height: 600px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;/*给p设置圆角*/
    padding: 20px;
  }
  /*生成小球，并定义初始位置*/
  #ball {
    border-radius: 50%;/*可把正方形变成圆形，50%即可*/
    background: #e0e0e0;
    width: 60px;
    height: 60px;
    position: relative;
    top: 30px;
    left: 30px;
  }
  button {
    width: 80px;
    height: 30px;
    border-radius: 4px;
    color: #fff;
    background: #AA7ECC;
    font-size: 20px;
    font-weight: bold;
    margin-left: 20px;
  }
  </style>
</head>
<body>
<p id="bg">
  此时水平速度为：4<button onclick="start()">演示</button>
  <p id="ball"></p>
</p>
<script type="text/javascript">
function start(){
  var x,y,k=1,t;
  //x是水平方向移动路径；y是垂直方向的；k记录次数，可与0.1相乘得时间；t记录setInterval的返回id，用于clearInterval
  t = setInterval(function(){
  x = 30+0.1*k*4*100;
    //S(x)=S(0)+t*V(x)，100是自定义的米到px转换数
    y = 30+1/2*9.8*0.1*k*0.1*k*100;//S(y)=S(0)+1/2*g*t*t
  var j = document.getElementById("ball");
    //通过修改小球的top和left，修改小球的位置
    j.style.top = y;
    j.style.left = x;
  k++;//每次调用，k自增，简化计算
  if(x>480||y>480){
  clearInterval(t);//小球达到边界时，清除setInterval
  }
  },100);//每0.1s调用一次setInterval的function
}
</script>
</body>
</html>

Deuxième type : le canevas en h5 dessine des petites boules et des zones de sport

Idée : Utiliser le canevas pour dessiner de petites boules Ball, puisque la balle ne peut pas se déplacer en haut et à gauche, elle doit effacer la toile avec clearRect à chaque fois qu'elle est appelée, puis dessiner la balle avec la position calculée. Le code est le suivant :

<!DOCTYPE>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
  body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  #myCanvas {
  box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9;
  }
  </style>
</head>
<body>
<canvas id="myCanvas" width="600px" height="600px"></canvas>
<script type="text/javascript">
var x=50,y=50,k=1;
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#e0e0e0";
cxt.beginPath();
cxt.arc(x,y,30,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
t=setInterval("parabola()",100);
function parabola(){
  cxt.clearRect(0,0,600,600);//清除原始图形
  cxt.beginPath();
  x=50+0.1*k*4*100;y=50+9.8*0.1*k*0.1*k*1/2*100;
  cxt.arc(x,y,30,0,Math.PI*2,true);
  cxt.closePath();
  cxt.fill();
  k++;
  if(x>520||y>520){
  clearInterval(t);
  }
}
</script>
</body>
</html>

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles associés :

Comment implémenter une version web de la calculatrice en JS

Comment supprimer le signe # de l'url dans Angular2 (Tutoriel détaillé)

Comment utiliser la bibliothèque de composants mobiles dans Vue.js (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter une version Web de la calculatrice en JSArticle suivant：Comment implémenter une version Web de la calculatrice en JS

Articles Liés

Voir plus