效果图：

 效果图消失只是截的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. HBase预分区方法

    (what)什么是预分区? HBase表在刚刚被创建时,只有1个分区(region),当一个region过大(达到hbase.hregion.max.filesize属性中定义的阈值,默认10GB)时 ...

  2. es-多文档简单查询（_mget）

    1.多文档查询 (1)url:POST http://localhost:9200/_mget?pretty/ 参数: { "docs": [{ "_index" ...

  3. javascrip总结42:属性操作案例: 点击盒子,改变盒子的位置和背景颜色

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  4. UVa 12099 The Bookcase (DP)

    题意:有 n 本书,每本书有一个高度和宽度,然后让你制作一个3层的书架,可以放下所有的书,并且要高*宽尽量小. 析:先把所有的书按高度进行排序,然后dp[i][j][k] 表示 前 i 本书,第二 层 ...

  5. JAVA 异常分类与理解

    摘自CSDN:::::http://blog.csdn.net/hguisu/article/details/6155636 1. 引子 try…catch…finally恐怕是大家再熟悉不过的语句了 ...

  6. 编写高质量代码改善C#程序的157个建议——建议152：最少，甚至是不要注释

    建议152:最少,甚至是不要注释 以往,我们在代码中不写上几行注释,就会被认为是钟不负责任的态度.现在,这种观点正在改变.试想,如果我们所有的命名全部采用有意义的单词或词组,注释还有多少存在的价值. ...

  7. 安装了IntelliJ IDEA中文输入法光标不跟随处理办法

    安装了IntelliJ IDEA 2017.2.3版本发现搜狗输入法中文输入的时候光标不跟随,而且存在卡屏的现象,网上找了很多办法试了之后都不管用.最后在这里找到了解决方案,亲测可用! 首先,将IDE ...

  8. Maven整理笔记の安装及配置

      第一部分:在Windows上安装Maven    检查JDK的安装 在安装Maven之前,首先确认你已经正确安装了JDK.Maven可以运行在JDK1.4及以上版本.先打开Windows命令,运行 ...

  9. 下了个蓝屏代码查看工具，就中病毒了。。。什么鬼病毒，竟然还是用的VBS

    扫描所有盘下面的html文件,加入VBS脚本...真是奇葩,多少年前的病毒了... http://files.cnblogs.com/files/guangshan/lpdmcxq.rar 这个是病毒 ...

  10. Panda3d code in github

    https://github.com/panda3d/panda3d [ref files] http://www.panda3d.noie.name/ https://www.panda3d.org ...