效果图：

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

源码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>小球碰撞游戏</title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         #area{
  12.             width: 600px;
  13.             height: 500px;
  14.             border: 1px solid black;
  15.             margin: 100px auto;
  16.             position: relative;
  17.         }
  18.         #ball{
  19.             width: 40px;
  20.             height: 40px;
  21.             border-radius: 20px;
  22.             background-color: red;
  23.             position: absolute;
  24.         }
  25.     </style>
  26.     <!--<script src="../jquery/jquery-3.3.1.min.js"></script>-->
  27.  
  28. </head>
  29. <body>
  30. <div id="area">
  31.     <div id="ball"></div>
  32. </div>
  33. <script type="text/javascript">
  34.     var ballX = 0;//小球X轴初始位置
  35.     var ballY = 0;//小球Y轴初始位置
  36.     directX = 1;//小球X轴方向
  37.     directY = 1;//小球Y轴方向
  38.     speed = 2;//小球运动速度
  39.     //封装获取id函数
  40.     function $(id){
  41.         return document.getElementById(id);
  42.     }
  43.  
  44.     function move(){
  45.         ballX += directX*speed;
  46.         ballY += directY*speed;
  47.         $("ball").style.left = ballX+directX+"px";
  48.         $("ball").style.top = ballY+directY+"px";
  49.         maxWidth = $("area").offsetWidth - $("ball").offsetWidth;
  50.         maxHeight = $("area").offsetHeight - $("ball").offsetHeight;
  51.         if(ballX >= maxWidth || ballX<=0){
  52.             directX = -directX;
  53.         }
  54.         if(ballY >= maxHeight ||ballY<=0){
  55.             directY = -directY;
  56.         }
  57.     }
  58.     setInterval("move()",10)
  59. </script>
  60. </body>
  61. </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. WebSocket 教程（转载）

    WebSocket 教程   作者: 阮一峰 日期: 2017年5月15日 WebSocket 是一种网络通信协议,很多高级功能都需要它. 本文介绍 WebSocket 协议的使用方法. 一.为什么需 ...

  2. 案例研究：手机APP的UI设计流程

    以下内容由Mockplus(http://www.mockplus.cn)团队翻译整理,仅供学习交流. UI设计——不仅仅是创造漂亮的图像. 面临的挑战 我为自己提供了一个绝佳的机会来训练我的视觉设计 ...

  3. Part3_lesson1---ARM汇编编程概述

    bootloader以及内核需要使用汇编语言,特别是在初始化的时候!以及在效率要求很高的地方会使用. 汇编程序框架: 其入口在_start处,这个入口需要用一个关键字为.global来声明它是一个全局 ...

  4. Golang 线程池

    经常会用到协程,但是不能一下开那么多协调,只需要 poolSize 个即可,多了不行.这些个协程在执行完后必须等其完成之后才能进行下一步动作.假定工作方法为 work . package main i ...

  5. Notepad++ xml/json格式化

    Xml格式化: 1. 安装XML Tools插件 (1) 通过网址http://sourceforge.net/projects/npp-plugins/files/XML%20Tools/下载XML ...

  6. HUST软工1501-1503班第2周作业成绩公布

    说明 本次公布的成绩对应的作业为: 第2周个人作业:WordCount编码和测试 如果同学对作业成绩存在异议,在成绩公布的72小时内(截止日期4月26日0点)可以进行申诉,方式如下: 毕博平台的第二周 ...

  7. Linux Mint 17使用配置2

    tee命令--作用:读取标准输入的数据, 并将其内容输出成文件 who | tee who.out # 将who命令的输出写入同目录文件who.out中 who | grep loger9567 | ...

  8. Spring框架总结(二)

    开发一个简单的Spring项目: 一.开发环境搭建: 1.引入源码jar :3.0以前的版本含有依赖jar包,3.0以后只有spring的核心jar 包 core的jar包 commons-loggi ...

  9. 金牌选手zzy的卡常头文件

    一定要粘上去啊,亲测快两倍 #pragma GCC diagnostic error "-std=c++11" #pragma GCC optimize("-fdelet ...

  10. jmeter - 命令行方式运行

    命令格式: jmeter -n -t <testplan filename> -l <listener filename> 参数说明: -n 非 GUI 模式 -> 在非 ...