首先写一个小页面；页面需要一个div 这个div就是盒子，然后在div里在包含一个子div 这个子div就包含一张小球的图片

代码：

<!doctype html>

<html>

<head><meta http-equiv="content-type" content="text/html;charset=utf-8"/><title>小球碰撞游戏</title><head>

<body>

<div id="gamescroll" style="width:600px;height:400px;position:absolute;top:0px;left:0px;border:1px solid black">

<div id="qiu"><img src="qiu.gif"/></div>

</div>

<script type="text/javascript" language="javascript">

function $(id){ return document.getElementById(id);};

function TinyGame(x,y,direx,direy){

this.x =x ;//横坐标

this.y = y;//纵坐标

this.direx = direx; //x方向移动的值

this.direy = direy;//y方向移动的值

this.moveqiu  = function(){

this.x += this.direx;

this.y += this.direy;

$("qiu").style.left = this.x +'px';

$("qiu").style.top = this.y+'px';

if(this.x+$('qiu').offsetWidth >= $("gamescroll").offsetWidth || this.x <= 0){

/*如果x方向移动的距离+小球的实际宽度(offsetWidth-在浏览器里的实际宽度，offsetHeight--在浏览器里的实际高度)>=盒子的实际宽度 或者 x方向移动的距离小于等于0

就表示到达了边界

*/

this.direx = -this.direx;//正变负 负变正  表示处于两个不同的边界的情况处理

}

if(this.y+$('qiu').offsetHeight >= $("gamescroll").offsetHeight || this.y <= 0){

this.direy= -this.direy;//正变负 负变正  表示处于两个不同的边界的情况处理

}

}

}

var TG1 = new TinyGame(0,0,1,1);

setInterval("TG1->moveqiu()",500);

</script>

</body>

</html>

jsDOM编程-小球在盒子里来回撞击的更多相关文章

  1. 今盒子里有n个小球，A、B两人轮流从盒中取球，每个人都可以看到另一个人取了多少个

    /* 题目描述 今盒子里有n个小球,A.B两人轮流从盒中取球,每个人都可以看到另一个人取了多少个,也可以看到盒中还剩下多少个,并且两人都很聪明,不会做出错误的判断. 我们约定: 每个人从盒子中取出的球 ...

  2. 不要困在自己建造的盒子里——写给.NET程序员（附精彩评论）

    此文章的主旨是希望过于专注.NET程序员在做好工作.写好.NET程序的同时,能分拨出一点时间接触一下.NET之外的东西(例如10%-20%的时间),而不是鼓动大家什么都去学最后什么都学不精,更不是说. ...

  3. r个有标志的球放进n个不同的盒子里，要求无一空盒，问有多少种不同的分配方案？

           由题意可知道r>=n,我原来想的是先取n个全排列,剩下的r-n个每个有n中选择,所以结果是n!*n^(r-n).经满神猜测,这样是会重复的.比如说,1到5个球,ABC三个盒子,ms ...

  4. 在intellij idea 里来回跳转查询方法

    在intellij idea 里来回跳转查询方法,在不知道快捷键的时候真是抓狂. 看到key map中的快捷键 后退back  ctrl +alt + ← 或者button4 click 前进forw ...

  5. 滑动门出现的背景---实例微信导航栏（a盒子里面包span盒子，文字写在span里）

    需求: 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,其中最大的问题是字数不同,如何做? 解决: 用一个a包含span来制作,字数放在span里面. ...

  6. Win64 驱动内核编程-24.64位驱动里内嵌汇编

    64位驱动里内嵌汇编 讲道理64位驱动是不能直接内链汇编的,遇到这种问题,可以考虑直接把机器码拷贝到内存里,然后直接执行. 获得机器码的方式,可以写好代码之后,直接通过vs看反汇编,然后根据地址在看内 ...

  7. 我说AOP(面向切面编程)--藏在苹果里的五角星

    这只是一篇入门理解! 一直听说AOP的名字,却从未使用过,因为我不会.但--那只是曾经-- 先看官方解释:AOP(Aspect-Oriented Programming,面向切面的编程),它是可以通过 ...

  8. 【React】学习笔记（一）——React入门、面向组件编程、函数柯里化

    课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...

  9. jsDOM编程-拖拽层

    页面样式代码: <!doctype html><html><head><meta http-equiv="content-type" co ...

随机推荐

  1. WPF自定义产品框架

    在讲解之前先看一下效果,有助于理解: 这是客户端的效果图.整个产品分为两部分:1.WPF开发的展示效果的客户端   2.WCF开发的提供数据服务接口的服务端   本章主要讲解一下实际中开发WPF开发客 ...

  2. 51nod 1020 逆序排列 DP

    在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数. 如2 4 3 1中,2 1,4 3,4 1,3 1是逆序 ...

  3. 51Nod--1085背包问题

    1085 背包问题 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 在N件物品取出若干件放在容量为W的背包里,每件物品的体积为W1,W2--Wn(Wi为整 ...

  4. CCF-201604-1-折点计数

    问题描述 试题编号: 201604-1 试题名称: 折点计数 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个整数表示一个商店连续n天的销售量.如果某天之前销售量在增长 ...

  5. PHP 静态缓存

    今天来说说PHP页面的静态缓存. 根据个人理解,由于客户端重复的请求某个页面,导致该页面短时间内被重复请求相同的数据,导致给服务端一定的压力,同时用户访问速度也会变慢.此时如果把这个页面缓存起来,客户 ...

  6. JAVA字符串转换MD5值

    简介: MD5即Message-Digest Algorithm 5(信息-摘要算法5),用于确保信息传输完整一致.是计算机广泛使用的杂凑算法之一(又译摘要算法.哈希算法),主流编程语言普遍已有MD5 ...

  7. 转自知乎-wifi破解

    上点python有意思的代码. 环境准备 python2.7 pywifi模块 字典 清除系统中的任何wifi连接记录 导入模块 这里用的模块就这三个 pywifi的_wifiutil_linux.p ...

  8. cxf,两个声明导致 ObjectFactory 类中发生冲突

    说明先,这里不管是client还是server端都是用java语言编写,如有写得不好,望原谅! 问题 http://localhost:8080/WEB-SMVC/cxf/userService?ws ...

  9. CSS3实现的一批hover特效

    本特效的原版是codepen上面的hover.css项目.个人非常喜欢所以把全部的hover特效自己也写了一遍,上传文件麻烦所以直接把css整合到HTML代码中了.代码复制下来保存后就可以用浏览器打开 ...

  10. 我的Java开发学习之旅------&gt;Base64的编码思想以及Java实现

    Base64是一种用64个字符来表示随意二进制数据的方法. 用记事本打开exe.jpg.pdf这些文件时,我们都会看到一大堆乱码,由于二进制文件包括非常多无法显示和打印的字符.所以,假设要让记事本这种 ...