首先写一个小页面；页面需要一个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. tensorflow初探

    TensorFlow是一个采用数据流图,用于数值计算的开源软件库.自己接触tensorflow比较的早,可是并没有系统深入的学习过,现在TF在深度学习已经成了"标配",所以打算系统 ...

  2. SSM Spring+SpringMVC+mybatis+maven+mysql环境搭建

    SSM Spring+SpringMVC+mybatis+maven环境搭建 1.首先右键点击项目区空白处,选择new->other..在弹出框中输入maven,选择Maven Project. ...

  3. 腾讯 AI Lab 计算机视觉中心人脸 & OCR团队近期成果介绍（3）

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:周景超 在上一期中介绍了我们团队部分已公开的国际领先的研究成果,近期我们有些新的成果和大家进一步分享. 1 人脸进展 人脸是最重要的视觉 ...

  4. codeforces 893C Rumor 前向星+dfs

    893C Rumor 思路: 前向星+DFS 代码: #include <bits/stdc++.h> using namespace std; #define _for(i,a,b) f ...

  5. php命令执行脚本

    php -f jiaoben.php &  读入并解释指明的文件.

  6. YiShop_商城系统如何做好口碑营销

    口碑营销是指企业在品牌建立过程中,通过客户间的相互交流将自己的产品信息或者品牌传播开来.口碑是目标,营销是手段,产品是基石.那么,商城系统如何做好口碑营销呢?  下面由YiShop小编带你了解一下:1 ...

  7. 【luogu P1186】玛丽卡

    https://www.luogu.org/problem/show?pid=1186 考虑暴力,枚举图上每一条边删去后跑Dijkstra,取M次的最大值. 仔细想想就会发现删除最短路以外的边对最短路 ...

  8. 虚拟DOM详解

    虚拟DOM简介 Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树,其主要是通过vnode,实现一个无状态的组件,当组件状态发生更新时,然后触发Virtual Dom数据的变 ...

  9. 学校的c++程序课程设计（简单的写法 并无太多c++的特色）

    好久没更新博客了,最近一直在忙,花了一天时间做出这个简陋版的课程设计, 为了储存,也为了更新,所以于今天更新我的博客. 我选的课程设计题目如下: 某某公司的设备管理系统 功能及要求描述: (1)公司主 ...

  10. UPDATE/INSERT用法研究

    UPDATE和INSERT语法相信大家都很熟悉,UPDATE的基本语法结构是 : UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 INSERT的基本语法是: INSERT ...