效果图：

 效果图消失只是截的gif图的问题

源码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>小球碰撞游戏</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        #area{

            width: 600px;

            height: 500px;

            border: 1px solid black;

            margin: 100px auto;

            position: relative;

        }

        #ball{

            width: 40px;

            height: 40px;

            border-radius: 20px;

            background-color: red;

            position: absolute;

        }

    </style>

    <!--<script src="../jquery/jquery-3.3.1.min.js"></script>-->

</head>

<body>

<div id="area">

    <div id="ball"></div>

</div>

<script type="text/javascript">

    var ballX = 0;//小球X轴初始位置

    var ballY = 0;//小球Y轴初始位置

    directX = 1;//小球X轴方向

    directY = 1;//小球Y轴方向

    speed = 2;//小球运动速度

    //封装获取id函数

    function $(id){

        return document.getElementById(id);

    }

    function move(){

        ballX += directX*speed;

        ballY += directY*speed;

        $("ball").style.left = ballX+directX+"px";

        $("ball").style.top = ballY+directY+"px";

        maxWidth = $("area").offsetWidth - $("ball").offsetWidth;

        maxHeight = $("area").offsetHeight - $("ball").offsetHeight;

        if(ballX >= maxWidth || ballX<=0){

            directX = -directX;

        }

        if(ballY >= maxHeight ||ballY<=0){

            directY = -directY;

        }

    }

    setInterval("move()",10)

</script>

</body>

</html>

js实现小球碰撞游戏的更多相关文章

  1. Canvas+Js制作动量守恒的小球碰撞

    目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...

  2. js实现多个小球碰撞

    实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y ...

  3. 【h5游戏开发】egret引擎p2物理引擎 - 小球碰撞地面搞笑的物理现象

    重力的方向和地面的问题 p2中默认的方向是从上到下,如果重力默认是正数的话,物体放到世界中是会从上面往下面飘的 p2中plane地面默认的方向是y轴的方向,而在p2中y轴的方向默认是从上往下 首先来看 ...

  4. 基于Seajs的可控台球碰撞游戏

    前言 不记得哪个黑色星期五,贪吃鱼基本完工的时候,产品突然增加需求,要求金币扔出去后不消失,互相可碰撞,其最终结果还要由服务器控制(没错,至今做的所有游戏都有幕后黑手,=W=). 对于碰撞以前只写过一 ...

  5. 原生js做h5小游戏之打砖块

    前言 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...

  6. js实现小球的弹性碰撞。

      前  言 MYBG 小编最近在做自己的个人网站,其中就用到了一个小球碰撞检测的功能,想自己写,无奈本人能力不足啊(毕竟还是一个菜鸟)!!就想着找个插件用一下也好,可是找了好久也没有找到一个比较好用 ...

  7. js实现一个小游戏（飞翔的jj）

    js实现一个小游戏(飞翔的jj) 源代码+素材图片在我的仓库 <!DOCTYPE html> <html lang="en"> <head> & ...

  8. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

  9. 用js实现2048小游戏

    用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...

随机推荐

  1. redis 面试题2

    使用过Redis分布式锁么,它是什么回事? 先拿setnx来争抢锁,抢到之后,再用expire给锁加一个过期时间防止锁忘记了释放. 这时候对方会告诉你说你回答得不错,然后接着问如果在setnx之后执行 ...

  2. 使用Qt Installer Framework制作软件安装包

    概述 Qt Installer Framework(缩写QIF)是Qt官方用于生成软件安装包的工具.包括Qt Creator和Qt Installer Framework自身的安装包都是由这个工具制作 ...

  3. 注意for循环中变量的作用域-乾颐堂

    1 2 for e in collections:     pass 在for 循环里, 最后一个对象e一直存在在上下文中.就是在循环外面,接下来对e的引用仍然有效. 这里有个问题容易被忽略,如果在循 ...

  4. CentOS/RedHat安装Python3

    CentOS/RedHat安装Python3 摘自:https://blog.csdn.net/mvpboss1004/article/details/79377019 CentOS/RedHat默认 ...

  5. STL中 set 和 multiset

    1. 所在头文件: <set>, 命名空间: std ; 声明如下: namespace std{ template <class T, class Compare = less&l ...

  6. 二项分布&超几何分布

    伯努利分布  在一次试验中,事件A出现的概率为p,不出现的概率为q=1-p.若以β记事件A出现的次数,则β仅取0,1两值,相应的概率分布为: 二项分布是指在只有两个结果的n次独立的伯努利试验中,所期望 ...

  7. 基于maven从头搭建springMVC框架

    0.准备工作 首先将eclipse和需要的插件准备好,例如maven插件,spring IDE插件. 1.建立maven下的webapp项目 1.新建一个maven项目,类型为webapp,如下图 2 ...

  8. Windows下如何安装MongoDB

    下载地址: http://www.mongodb.org/downloads 我下载的是:mongodb-win32-x86_64-2008plus-2.6.6 解压到:D:\soft 同时在该目录下 ...

  9. css flex cheat sheet

    .container{ display: -webkit-flex/inline-flex; display: -moz-flex/inline-flex; display: -ms-flex/inl ...

  10. How to design a product table for many kinds of product where each product has many parameters

    https://stackoverflow.com/questions/695752/how-to-design-a-product-table-for-many-kinds-of-product-w ...