效果图：

 效果图消失只是截的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. Openssl oscp命令

    一.简介 ocsp,在线证书状态命,能够执行很多OCSP的任务,可以被用于打印请求文件和响应文件, 二.语法 openssl ocsp [-out file] [-issuer file] [-cer ...

  2. Redis学习（3）——认识配置文件redis.conf[转]

    #是否作为守护进程运行  daemonize yes  #配置 pid 的存放路径及文件名,默认为当前路径下  pidfile redis.pid  #Redis 默认监听端口  port 6379  ...

  3. [Training Video - 7] [Database connection] Various databases which are supported, Drivers for database connection, SQL Groovy API

    Various databases which are supported Drivers for database connection groovy.sql.Sql package SoapUI怎 ...

  4. 后台注册js代码的方法

    Page.ClientScript.RegisterClientScriptBlock(JSUtil.CurrentPage.GetType(), Util.NewGuid(), @"< ...

  5. c语言条件编译#ifdef与#if defined

    c语言条件编译#ifdef与#if defined   c语言条件编译#ifdef与#if defined 摘自:https://www.cnblogs.com/zhangshenghui/p/566 ...

  6. HUST软测1504班第4周小组作业成绩：WordCount优化

    说明 本次公布的成绩为第四周作业的结果: 第4周小组作业:WordCount优化 博客推荐:本次作业有一位同学完成有创意,推荐优秀博客.(优秀博客不会对成绩带来正面或者负面影响)PS:做任何创新的任务 ...

  7. 大型Unity手游《英雄之刃-最后之战》源码分析

    英雄之刃之最后一战是国内首款原创精品MOBA手游,是一款由前暴雪文案亲自操刀世界观,日韩专业团队打造美术场景,新加坡团队精心制作战斗音乐的旷世之作! 超快速的匹配对战.默契的团队协作给你带来意犹未尽的 ...

  8. await Task传异步Lambda问题

    微软在.NET4.5中升级了C#语言到5.0,加入了await和async语法,极大地方便了广大开发人员的异步编程,也是为了和WinRT API配套,因为这套API充满了异步编程. 在开发过程中发现有 ...

  9. 关于.net和java des加密

    在.net和java环境中对于des加密,有几点要协同的地方: 密钥和密钥向量Key IV 加密模式CipherMode 填充模式PaddingMode 密文编码方式 下面一段.net的des加密方式 ...

  10. vs 页面浏览不显示.aspx后缀名

    转:http://www.cnblogs.com/hllive/p/6029763.html 由vs2013新建“web窗体应用程序”的网站,URL不显示扩展名.那今天就实现该功能 1.首先打开vs2 ...