js实现小球碰撞游戏
效果图：
效果图消失只是截的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实现小球碰撞游戏的更多相关文章
- Canvas+Js制作动量守恒的小球碰撞
目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...
- js实现多个小球碰撞
实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y ...
- 【h5游戏开发】egret引擎p2物理引擎 - 小球碰撞地面搞笑的物理现象
重力的方向和地面的问题 p2中默认的方向是从上到下,如果重力默认是正数的话,物体放到世界中是会从上面往下面飘的 p2中plane地面默认的方向是y轴的方向,而在p2中y轴的方向默认是从上往下 首先来看 ...
- 基于Seajs的可控台球碰撞游戏
前言 不记得哪个黑色星期五,贪吃鱼基本完工的时候,产品突然增加需求,要求金币扔出去后不消失,互相可碰撞,其最终结果还要由服务器控制(没错,至今做的所有游戏都有幕后黑手,=W=). 对于碰撞以前只写过一 ...
- 原生js做h5小游戏之打砖块
前言 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...
- js实现小球的弹性碰撞。
前 言 MYBG 小编最近在做自己的个人网站,其中就用到了一个小球碰撞检测的功能,想自己写,无奈本人能力不足啊(毕竟还是一个菜鸟)!!就想着找个插件用一下也好,可是找了好久也没有找到一个比较好用 ...
- js实现一个小游戏（飞翔的jj）
js实现一个小游戏(飞翔的jj) 源代码+素材图片在我的仓库 <!DOCTYPE html> <html lang="en"> <head> & ...
- HTML5 Canvas彩色小球碰撞运动特效
脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效. 效果展示 http://hovertree.com/texiao/html5/39/ ...
- 用js实现2048小游戏
用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...
随机推荐
- 303. Range Sum Query 范围求和系列
Immutable ［抄题］: Given an integer array nums, find the sum of the elements between indices i and j (i ...
- impdp报错ORA-39083 ORA-02304 Object type TYPE failed to create
环境Red Hat Enterprise Linux Server release 5.8 (Tikanga)ORACLE Release 11.2.0.3.0 Production 我用expdp, ...
- CTE 中字符串拼接
1>cte语法 1.1>基础语句和递归语句中必须有字段 1.2>最后只能跟一条查询语句 1.3>字符串拼接,要将拼接的字段转成字符串类型,cast(fieldName as n ...
- Windows下redis的安装与使用
Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...
- query使用
1.row_array():返回查询结果中的第一条数据 include APP_PATH . "../mysql.class.php";$db = new mysql();$sql ...
- mongo学习-稀疏索引
因为,如果要创建唯一索引,那么如果这个值有好几个为Null的,所以也会导致我们创建索引失败,那么我们可以引进系数索引这个概念,它可以做到,支持如果值存在的情况,它必须是唯一的,我们可以 将 uniqu ...
- nignx ssl 配置
1. 找一个目录,例如: usr/local/nginx/ssl ,进入该目录 2. openssl genrsa -des3 -out server.key 1024 创建自身秘钥 3. op ...
- HDU 6162 Ch’s gift (线段树+树链剖分)
题意:给定上一棵树,每个树的结点有一个权值,有 m 个询问,每次询问 s, t , a, b,问你从 s 到 t 这条路上,权值在 a 和 b 之间的和.(闭区间). 析:很明显的树链剖分,但是要用 ...
- 利用predis操作redis方法大全
predis是PHP连接Redis的操作库,由于它完全使用php编写,大量使用命名空间以及闭包等功能,只支持php5.3以上版本,故实测性能一般,每秒25000次读写. 将session数据存放到re ...
- Linux查询系统信息命令
Linux查看系统信息是比较基础的知识,所以这个应该都需要掌握,命令和解释如下: #uname -a 查看操作系统.内核.CPU信息 #head -n 1 /etc/issue ...