效果图:

 效果图消失只是截的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. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  2. Java学习笔记之接口

    一.接口的概念与定义 首先考虑一个简单的接口的定义: public interface Output { int MAX_LINE = 40; void out(); void getData(Str ...

  3. 移动端 Retina屏 各大主流网站1px的解决方案

    Retina屏的移动设备如何实现真正1px的线? 在retina屏下面,如果你写了这样的meta <meta name="viewport" content="in ...

  4. Spring Security 入门(1-2)Spring Security - 从 配置例子例子 开始我们的学习历程

    1.Spring Security 的配置文件 我们需要为 Spring Security 专门建立一个 Spring 的配置文件,该文件就专门用来作为 Spring Security 的配置. &l ...

  5. PAT1056:Mice and Rice

    1056. Mice and Rice (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Mice an ...

  6. Vue使用watch监听一个对象中的属性

    问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedSta ...

  7. WebService的两种方式SOAP和REST有什么不同?

    REST API 优点: 1. 轻量级的解决方案,不必向SOAP那样要构建一个标准的SOAP XML. 2. 可读性比较好:可以把URL的名字取得有实际意义. 3. 不需要SDK支持:直接一个Http ...

  8. 编程菜鸟的日记-初学尝试编程-C++ Primer Plus 第4章编程练习6

    #include <iostream>using namespace std;struct CandyBar{ char kind[20]; float weight; int calor ...

  9. Python 管道

    from multiprocessing import Process,Pipe def f1(conn): from_zhujincheng = conn.recv() print("我是 ...

  10. Appium学习——安装appium Server

    安装appium Server 下载地址:百度网盘的下载链接:https://pan.baidu.com/s/1pKMwdfX 下载后, AppiumForWindows.zip 进行解压,点击 ap ...