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是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...
随机推荐
- Linux系统profile、bashrc、bash_profile等环境设置文件的使用
一.前言 关于bash的环境设置文件,分为系统设置和个人设置,一般来说建议用户直接修改个人的设置. 本文测试环境为:centos6.5. 二.系统设置值 1. /etc/sysconfig/i18n ...
- CentOS搭建VSFTP服务器
一.安装vsftpd 1.查看是否已经安装vsftpd 2.如果没有,就安装 3.测试是否安装成功 4.安装成功设置开机启动 二.配置vsftpd 1.修改配置文件/etc/vsftpd/vsftpd ...
- code2198 数字三角形WWW
数字三角形的新变种 设要经过的点为x y,那么dp[x][k] = -Max k=1~x and k!=y 其他一样:dp[i][j] = max(dp[i-1][j],dp[i-1[j-1]) ...
- Excel中使用VBA访问Access数据库
VBA访问Access数据库 1. 通用自动化语言VBA VBA(Visual Basic For Application)是一种通用自动化语言,它可以使Excel中的常用操作自动化,还可以创建自定义 ...
- diskpart setid value list
ntfs : 07 / 17 显示/隐藏 fat32: 0C / 1C 显示/隐藏 0 空 24 NEC DOS 81 Minix / 旧 Linu bf Solaris 1 FAT12 27 隐藏的 ...
- POC索引
最近在看窗口函数,接触到了POC索引,所以借此机会好好研究一下索引. 一般支持窗口函数的索引指南都遵循POC的概念,也就是Partitioning(分区).Ordering(排序)和Covering( ...
- How attach Java source（为eclipseIDE附加资源）
In Eclipse, when you press Ctrl button and click on any Class names, the IDE will take you to the s ...
- linux 学习管道 和重定向
开源文化的理念之一 就是不要重新发明轮子 在linux 系统中大多是都是非常简单的命令,每个命令都是实现一个或者几个简单的功能,我们可以将不同的命令组合在一起 来达到复杂的功能的目的,在linux中因 ...
- Autoconf 中文手册
Autoconf Autoconf Creating Automatic Configuration Scripts Edition 2.13, for Autoconf version 2.13 D ...
- 微软编程一小时 题目2： Longest Repeated Sequence
题目2 : Longest Repeated Sequence 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 You are given a sequence of i ...