首先写一个小页面；页面需要一个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. 外部地址访问xampp

    默认情况下xampp只能访问本地服务器的地址.即localhost如果需要在外部机器访问XAMPP,则需要修改配置:找到xampp的文件夹,找到apache文件夹中的conf->extra-&g ...

  2. UVA434 - Matty's Blocks

    题意:已知前视图和右视图,求最少需要几个正方体以及至多可以再增加几个正方体. 分析:先对于最小木块数,要想用最少的立方体搭建,那就意味着前视图中的每一竖立方体的高度最好都要被右视图中的高度所利用到.所 ...

  3. Javascript 数组（Array）相关内容总结

    创建数组 var colors = new Array(); //创建新数组 var num = new Array(3); //创建包含三项的新数组 var names = new Array(&q ...

  4. Codeforces 890B - Vlad and Cafes Set

    B. Vlad and Cafestime limit per test2 secondsmemory limit per test256 megabytesinputstandard inputou ...

  5. mysql 有哪些索引

    Mysql支持哪几种索引 从数据结构角度 1.B+树索引(O(log(n))):关于B+树索引,可以参考 MySQL索引背后的数据结构及算法原理 2.hash索引:a 仅仅能满足"=&quo ...

  6. SpringBoot运行原理

    如果我们使用的是SpringApplication的静态run方法,那么,这个方法里面首先要创建一个SpringApplication对象实例,然后调用这个创建好的SpringApplication的 ...

  7. Golang中的信号处理

    信号类型 个平台的信号定义或许有些不同.下面列出了POSIX中定义的信号. Linux 使用34-64信号用作实时系统中. 命令 man 7 signal 提供了官方的信号介绍. 在POSIX.1-1 ...

  8. hadoop多文件格式输入

    版本号: CDH5.0.0 (hdfs:2.3.mapreduce:2.3,yarn:2.3) hadoop多文件格式输入,一般能够使用MultipleInputs类指定不同的输入文件路径以及输入文件 ...

  9. HBase1.0.1基本操作（java代码）

    public class HQuery { private static ConnHBase connHbase=new ConnHBase(); /***************建表******** ...

  10. 002Java概述

    1Sun(Stanford University Network )公司1995年推出的高级编程语言 2.面向Internet的编程语言 3.已经成为web应用程序的首选开发语言 4.完全面向对象简单 ...