效果图：

 效果图消失只是截的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. JVM垃圾回收算法及回收器详解

    引言 本文主要讲述JVM中几种常见的垃圾回收算法和相关的垃圾回收器,以及常见的和GC相关的性能调优参数. GC Roots 我们先来了解一下在Java中是如何判断一个对象的生死的,有些语言比如Pyth ...

  2. Linux安装设置VNC远程桌面

    1,先检查一下服务器是否已经安装了VNC服务,没有安装,检查服务器的是否安装VNC的命令如下[root@linuxidc rpms]# ps -eaf|grep vncroot      1789  ...

  3. Openssl pkey命令

    一.简介 pkey是一个公钥或私钥的处理命令,可以用于打印和转换不同的表单和组件 二.语法 openssl pkey [-inform PEM|DER] [-outform PE|DER] [-in ...

  4. [C++] Variable storage space

    Variable storage space

  5. nyoj746 整数划分

    nyoj746 http://acm.nyist.net/JudgeOnline/problem.php?pid=746 一道区间dp的题目: 设:a[i][j]为那一串数字中从第i位到第j位的数是多 ...

  6. hadoop分布式集群搭建前期准备（centos7）

    那玩大数据,想做个大数据的从业者,必须了解在生产环境下搭建集群哇?由于hadoop是apache上的开源项目,所以版本有些混乱,听说都在用Cloudera的cdh5来弄?后续研究这个吧,就算这样搭建不 ...

  7. spring boot☞Swagger2文档构建及单元测试

    首先,回顾并详细说明一下在快速入门中使用的@Controller.@RestController.@RequestMapping注解.如果您对Spring MVC不熟悉并且还没有尝试过快速入门案例,建 ...

  8. spring 整合 mybatis （不含物理分页）

    http://www.mybatis.org/spring/mappers.html http://www.mybatis.org/spring/zh/mappers.html <?xml ve ...

  9. 编写高质量代码改善C#程序的157个建议——建议108：将类型标识为sealed

    建议108:将类型标识为sealed sealed能够阻止类型被其他类型继承.代码如下: sealed class SampleClass { } class OtherClass : SampleC ...

  10. git 只merge一个commit的方法

    https://git-scm.com/book/tr/v2/Git-Basics-Viewing-the-Commit-History gil log 来查看commit的记录 Other main ...