zoukankan      html  css  js  c++  java
  • 小球碰壁与互撞

    1.用一个数组存储小球

    2.生成小球并文档流插入和存入数组。生成的小球信息包括小球坐标、移动速度、移动方向、背景颜色、编号。

    3.小球移动。根据小球小球移动方向,小球坐标加或减速度。同时,判断是否碰壁,如果碰壁,改变小球移动方向。

    4.碰撞检测。判断小球是否与另一个小球相撞。如果相撞,判断2个小球的位置改变小球的移动方向。

    5.绑定事件。每点击一次按钮,增加一个小球,并让小球移动。

    部分代码:

    创造小球:

    var ball=document.createElement("p");
    //小球坐标
    ball.x=DOMhelp.randomNum(0,660);
    ball.y=DOMhelp.randomNum(0,460);
    //小球移动速度
    ball.speed=DOMhelp.randomNum(2,5);
    //小球移动方向
    if(Math.random()-0.5>0){
    ball.xflag=true;
    }
    else{
    ball.xflag=false;
    }
    if(Math.random()-0.5>0){
    ball.yflag=true;
    }
    else{
    ball.yflag=false;
    }
    //小球的背景颜色
    ball.style.backgroundColor=DOMhelp.randomColor();
    //小球编号
    ball.innerHTML=(++i);
    //将小球插入到wrap中
    wrap.appendChild(ball);
    //将小球存储到数组中
    balls.push(ball);

    判断是否相撞:

    Math.pow(x1-x2,2)+Math.pow(y1-y2,2)<=Math.pow((ballObj.offsetWidth+balls[i].offsetWidth)/2,2)

  • 相关阅读:
    网络知识学习系列(一)
    C# 开发系列(三)
    angularJS 系列(三)- 自定义 Service
    添加百度地图,显示定位
    angularJS 系列(二)——理解指令 understanding directives
    angularJS 系列(一)
    hbuilder 手机app开发系列(一)
    vue + 百度地图api
    百度地图api
    canvas的api
  • 原文地址:https://www.cnblogs.com/cdx0/p/balls.html
Copyright © 2011-2022 走看看