首先写一个小页面；页面需要一个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. c# winform 窗体之间的传参

    说起winform程序中窗体之间的参数互传,大家找度娘会找到很多方法: 1.在窗体类中创建全局变量,类型为公开.静态的: 2.在窗体类中定义狗仔函数: 3.通过实践来船体参数: 这三种思路完全来自于霖 ...

  2. android动画基础之Animation

    android 动画 摘要: 概述 最近总结一下Android的一些东西,毕竟基础不牢地动山摇.本篇主要涉及Animation,对Tween和Frame动画做些总结. Tween Tween动画即补间 ...

  3. Oracle11g静默安装

    静默安装Oracle11G 前期准备 1虚拟机准备: Centos 6.5 64位 内存2G 硬盘30G Cpu 4核 Hostname silent 将安装包放到/tmp/oracle目录下 2.软 ...

  4. js中对节点属性的操作和对节点的操作

    常用的节点属性操作方法 1.setAttribute(name,value):给某个节点添加一个属性 2.getAttribute(name):获取某个节点属性的值. 3.removeAttribut ...

  5. canvas画一个时钟

    效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. 中文编程语言之Z语言初尝试: ZLOGO 4

    原文: https://zhuanlan.zhihu.com/p/31505895. 作者为本人. @TKT2016 开发的Z语言(ZLOGO是它的一个部分)是本人至今看到的唯一一个仍活跃开发的开源且 ...

  7. OpenStack搭建遇到的问题

    前言:对于像我这种新手来说,搭建OpenStack真的很费劲,因为我总是每配置一个服务,我就想弄懂,后来搭建过程很累人,因此我想了个办法,等我搭建出来再学.我这里将记录我从开始之初到我学习,再到我毕业 ...

  8. HDU3792---Twin Prime Conjecture（树状数组）

    Twin Prime Conjecture Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  9. PHP7源码安装MongoDB和MongoDB拓展

    一.安装MongoDB 1.创建mongodb用户组和用户 groupadd mongodb useradd -r -g mongodb -s /sbin/nologin -M mongodb 2.下 ...

  10. 为并发而生的 ConcurrentHashMap（Java 8）

    HashMap 是我们日常最常见的一种容器,它以键值对的形式完成对数据的存储,但众所周知,它在高并发的情境下是不安全的.尤其是在 jdk 1.8 之前,rehash 的过程中采用头插法转移结点,高并发 ...