一个简单的触壁反弹

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{

padding: 0;

margin: 0;

}

#box{

width: 500px;

height: 350px;

border:1px solid #ccc;

margin: 20px auto 0;

position: relative;

}

#ball{

width: 50px;

height: 50px;

background: red;

position: absolute;

top:0;

left: 0;

}

#btn{

width: 50px;

height: 50px;

/*光标出现小手*/

cursor: pointer;

background: green;

}

</style>

</head>

<body>

<div id="box">

<div id="ball">

</div>

</div>

<div id="btn">

</div>

</body>

</html>

<script type="text/javascript">

var box=document.getElementById("box");

var ball=document.getElementById("ball");

var btn=document.getElementById("btn");

var speedX=10;//横向的移动速度

var speedY=10;//横向的移动速度

//点击更改ball的速度

btn.onclick=function(){

speedX=parseInt(Math.random()*4+1)+2;

speedY=parseInt(Math.random()*4+1)+2;

}

setInterval(function(){

ball.style.left=ball.offsetLeft+speedX+"px";

ball.style.top=ball.offsetTop+speedY+"px";

//判断ball的位置 触壁speed取反

if(ball.offsetLeft>=box.clientWidth-ball.offsetWidth||ball.offsetLeft<=0){

speedX*=-1;

}

if(ball.offsetTop>=box.clientHeight-ball.offsetHeight||ball.offsetTop<=0){

speedY*=-1;

}

},30)

</script>

时间: 2024-11-09 02:00:09

一个简单的触壁反弹的相关文章

手把手教你编写一个简单的PHP模块形态的后门

看到Freebuf 小编发表的用这个隐藏于PHP模块中的rootkit,就能持久接管服务器文章,很感兴趣,苦无作者没留下PoC,自己研究一番,有了此文 0×00. 引言 PHP是一个非常流行的web server端的script语言.目前很多web应用程序都基于php语言实现.由于php是个开源软件并易于扩展,所以我们可以通过编写一个PHP模块(module 或者叫扩展 extension)来实现一个Backdoor. 本文就简单介下如何一步步编写一个简单的php 动态扩展后门. 0×01. p

【webGl】threejs实现一个简单的动画-弹跳的小球

在这里,我们将动态画面简称为动画(animation).正如动画片的原理一样,动画的本质是利用了人眼的视觉暂留特性,快速地变换画面,从而产生物体在运动的假象.而对于Three.js程序而言,动画的实现也是通过在每秒中多次重绘画面实现的. 为了衡量画面切换速度,引入了每秒帧数FPS(Frames Per Second)的概念,是指每秒画面重绘的次数.FPS越大,则动画效果越平滑,当FPS小于20时,一般就能明显感受到画面的卡滞现象. 那么FPS是不是越大越好呢?其实也未必.当FPS足够大(比如达到

为什么一个简单腹泻,服用了附子理中丸后,会绵延十年不愈?(转)

为什么一个简单腹泻,服用了附子理中丸后,会绵延十年不愈? 这个患者腹泻已经十多年了,最开始腹泻一天3次左右,大便呈泡沫状,于是就用附子理中丸控制,服用后上症稍缓解,停药后又复发,患者遂间断用附子理中丸控制腹泻,可渐渐地效果就不好了. 3年前,开始在西医消化内科接受正式治疗,服用复发谷氨酰胺和双歧杆菌等,治疗后上症稍缓解,后又因饮酒而复发.又用中成药控制,附子理中丸,补脾益肠丸,参苓白术散,四神丸,肉蔻四神丸等等,但是依然停药又加重. 附子 遂遍访中医名医,具体用药不详,大概换了五个医师,依然服停

一个简单的主机管理模拟程序

最近写的一个小练习,主要是把前面学的东西整合一下.写了一个简单的主机管理界面,主要是练习以下知识点: Session和Cookie进行登录验证(装饰器) 数据库的基本操作 (单表,1对多,多对多) Form的简单使用实现验证 Bootstrap模板写个简单界面 自定义分页 信号,中间件,CSRF,模板语言,JavaScript,AJAX等等 界面比较low,毕竟不是专业的. 附件里面是Django的源代码,3个文件放在一起winrar解压就可以打开

Windows 上静态编译 Libevent 2.0.10 并实现一个简单 HTTP 服务器(无数截图)

[文章作者:张宴 本文版本:v1.0 最后修改:2011.03.30 转载请注明原文链接:http://blog.s135.com/libevent_windows/] 本文介绍了如何在 Windows 操作系统中,利用微软 Visual Studio 2005 编译生成 Libevent 2.0.10 静态链接库,并利用 Libevent 静态链接库,实现一个简单的 HTTP Web服务器程序:httpd.exe. 假设 Visual Studio 2005 的安装路径为“D:\Program

完成一个简单的时间片轮转多道程序内核代码

王康 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 " 分别是1 存储程序计算机工作模型,cpu执行程序的基础流程: 2 函数调用堆栈:各种寄存器和存储主要是为了指令的传取值,通过eip,esp,eax,ebp和程序内存的分区,搭配push pop call return leave等一系列指令完成函数调用操作. 3 中断:多道批程序! 在复习一下上一讲的几个重要指令

一个简单的税利计算器(网页版)

嗯嗯,做一个简单的网页版的税率计算器,功能比较简单,但是相对比较实用.因为参考了一些其他作品,所以在计算汇率的时候习惯性的是以美元做单位.具体的功能有着较为详细的标注.仅供大家学习参考下. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JavaScript Loan Calculator</title>

利用JSP编程技术实现一个简单的购物车程序

实验二   JSP编程 一.实验目的1. 掌握JSP指令的使用方法:2. 掌握JSP动作的使用方法:3. 掌握JSP内置对象的使用方法:4. 掌握JavaBean的编程技术及使用方法:5. 掌握JSP中数据库编程方法: 二.实验要求 : 利用JSP编程技术实现一个简单的购物车程序,具体要求如下. (1)用JSP编写一个登录页面,登录信息中有用户名和密码,分别用两个按钮来提交和重置登录信息. (2)编写一个JSP程序来处理用户提交的登录信息,如果用户名为本小组成员的名字且密码为对应的学号时,采用J

用L脚本语言开发一个简单的局域网聊天程序

#scp #这是一个简单的局域网聊天程序的例子 定义:字符串,string1 定义:字符串,string2 #addr1是对方的地址 #addr2是自己的地址 #如果addr1和addr2相同,就是自己和自己聊天 定义:地址,addr1,127.0.0.1,27015 定义:地址,addr2,127.0.0.1,27015 定义:整数,字节数,0 #在自己的UDP端口上监听 定义:网络连接,conn2,UDP 监听:conn2,addr2 #连接对方的UDP端口 定义:网络连接,conn1,UD