效果如图：



原创代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>足球</title>

		<style>

			#ball{

				position: absolute;

			}

		</style>

	</head>

	<body>

		<img src="img/ball.png" id="ball"/>

		<script>

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

			var height=window.innerHeight;//屏幕高

			var width=window.innerWidth;

			var ttop=0;

			var lleft=0;

			var flagud=true;//上下移动

			var flaglr=true;//左右移动

			function downupball(){

				if(flagud){

					dirmove("down",30);

					if(ttop+ball.offsetHeight>=height){

						flagud=false;

					}

				}else{

					dirmove("up",30)

					if(ttop<=0){

						flagud=true;

					}

				}

			}

			function lrball(){

				if(flaglr){

					dirmove("right",20);

					downupball();

					if(lleft+ball.offsetWidth>=width){

						flaglr=false;

					}

				}else{

					dirmove("left",20);

					downupball();

					if(lleft<=0){

						flaglr=true;

					}

				}

			}

			function dirmove(dir,speed){

				switch(dir){

					case "left":

					lleft-=speed;

					ball.style.left=lleft+"px";

					break;

					case "right":

					lleft+=speed;

					ball.style.left=lleft+"px";

					break;

					case "up":

					ttop-=speed;

					ball.style.top=ttop+"px";

					break;

					case "down":

					ttop+=speed;

					ball.style.top=ttop+"px";

					break;

					default:

					break;

				}

			}

			setInterval(lrball,100);

		</script>

	</body>

</html>

html css javascript实现弹弹球的更多相关文章

  1. JavaScript插件——弹出框

    (JavaScript插件——弹出框) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.htm ...

  2. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

  3. Vim下的Web开发之html,CSS,javascript插件

    Vim下的Web开发之html,CSS,javascript插件   HTML 下载HTML.zip 解压HTML.zip,然后将里面的所有文件copy到C:\Program Files\Vim\vi ...

  4. HTML,Css,JavaScript之间的关系

    简述HTML,Css,JavaScript 网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript). 1.HTML(超文本标记语言 Hyper Te ...

  5. 购书网站前端实现（HTML+CSS+JavaScript）

    购书+阅读静态网页设计与实现 一.主页设计HTML 1.效果展示及实现 2.完整代码 二.主页样式布局CSS 三.空间功能实现Javascript 主要功能 Javascript完整代码: 总结 购书 ...

  6. html+css+JavaScript实现爱恩斯坦棋游戏

    title: "html+css+JavaScript实现爱恩斯坦棋游戏" author: Sun-Wind date: December 30, 2021 背景:本贴将基于前端的 ...

  7. html css javascript 加载的顺序

    html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...

  8. Sublime Text插件：HTML+CSS+JAVASCRIPT+JSON快速格式化[转]

    今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...

  9. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

随机推荐

  1. Day_10【常用API】扩展案例2_获取输入日期是哪一年的哪一天的星期几

    分析以下需求,并用代码实现 1)已知日期字符串:"2015-10-20",将改日期字符串转换为日期对象 2)将(1)中的日期对象转换为日历类的对象 3)根据日历对象获取改日期是星期 ...

  2. 第一行Kotlin系列（二）Intent隐式显式跳转及向下传值

    1.Intent显式跳转页面 val button5 = findViewById<Button>(R.id.mButton5) button5.setOnClickListener { ...

  3. 深入理解JS中的对象（二）：new 的工作原理

    目录 序言 不同返回值的构造函数 深入 new 调用函数原理 总结 参考 1.序言 在 深入理解JS中的对象(一):原型.原型链和构造函数 中,我们分析了JS中是否一切皆对象以及对象的原型.原型链和构 ...

  4. [hdu5353]模拟

    题意:有n个小朋友,每个小朋友手上有一些糖,考虑每两个相邻的小朋友a.b,可以选择执行3种操作中的任一种:(1)a给b一粒糖(2)b给a一粒糖(3)不进行任何动作,问能否通过确定每两个相邻的小朋友的操 ...

  5. P2220 [HAOI2012]容易题(快速幂)

    Describe 为了使得大家高兴,小Q特意出个自认为的简单题(easy)来满足大家,这道简单题是描述如下: 有一个数列A已知对于所有的A[i]都是1~n的自然数,并且知道对于一些A[i]不能取哪些值 ...

  6. 手机app传统邀请码安装与免邀请码安装区别，如何选择呢？

    App 邀请机制是每个产品几乎必做的功能点,它一般以两种形式存在:一是作为常置功能用于推荐,二是作为裂变活动用于邀请. 无论以哪种形式出现,都可以归为社交分享的一种表现方式.相较于营销推广,邀请好友机 ...

  7. gather函数

    gather(input, dim, index):根据  index,在  dim  维度上选取数据,输出的  size  与  index  一致 # input (Tensor) – 源张量 # ...

  8. 一文解读C# 动态拦截第三方进程中的方法函数（外挂必备）

    一.前言 由于项目需要,最近研究了一下跨进程通讯改写第三方程序中的方法(运行中),把自己程序中的目标方法直接覆盖第三方程序中的方法函数:一直没有头绪,通过搜索引擎找了一大堆解决方案,资料甚是稀少,最后 ...

  9. 萌新带你开车上p站（终极番外）

    本文由“合天智汇”公众号首发,作者:萌新 0x01前言 这关其实和pwn关系不大,主要考察的都是linux下一些函数的操作,考察linux的基本功.涉及到的知识点包括一些经典的函数原型.IO重定向.文 ...

  10. Codeforces1141E(E题）Superhero Battle

    A superhero fights with a monster. The battle consists of rounds, each of which lasts exactly nn min ...