效果图：

 效果图消失只是截的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. linux系统中的命令替换与整数运算$(),$(())

    一.$()与`` 在 bash shell 中,$( ) 与 ` ` (反引号) 都是用来做命令替换(command substitution)用的. 所谓的命令替换与我们第五章学过的变量替换差不多, ...

  2. Siverlight MarkerSize 控制数据点半径大小 LineThickness 控制点与点之间直线的厚度

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...

  3. windows cmd命令相关知识和经验的碎片化记录

    1.循环遍历当前文件夹下的所有*.dll文件,并打印其绝对路径和相对路径 ``` for /f "tokens=*" %%a in ('dir /s/b/a-d "*.d ...

  4. es学习-索引管理

    1.创建索引 http://localhost:9200/suoyinguanli211/ 参数: { "settings":{ "index":{ ,分片数 ...

  5. Windows下如何安装MongoDB

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

  6. javascript总结36:DOM-点击按钮切换图片案例

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

  7. 使用VM克隆CentOS后，更改网络配置

    在使用VM克隆之后,遇到一件非常郁闷的事,就算我使用‘setup’命令,修改了我的网络配置,依然无法查询到我配置的网卡,也无法开启网卡. 经过百度等一系列手段,总结如下套路--PS:朋友称之为“破釜沉 ...

  8. Discuz!X2截屏控件手动安装教程-Xproer.ScreenCapture

    版权所有 2009-2015 荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com 官方博客:http://www.cnblogs.com/xproer 产品首页:h ...

  9. 部署图像深度学习Web网站

    1. 内网穿透 2. 深度学习Web化 https://www.cnblogs.com/haolujun/p/9778939.html

  10. 微信小程序自定义事件

    案例结构 首先,我还是会以案例的形式向大家讲解(这样也能方便大家更好的理解)简单介绍一下案例项目的内容(以上一章自定义组件的案例为基础)项目名称:component自定义子组件cpt父组件:logs ...