效果如图：



原创代码：

<!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. 【学习笔记】Shell-1 变量：命名规范、变量赋值/取值/取消、局部变量/全局变量、预设环境变量

    1.Shell变量 从变量的实质上来说,变量名是指向一片用于存储数据的内存空间. Shell变量是一种弱类型的变量,即声明变量时不需要指定其变量类型,也不需求遵循“先声明再使用”的规定,想用即可用. ...

  2. Django 设置admin后台表和App(应用)为中文名

    设置表名为中文 1.设置Models.py文件 class Post(models.Model): name = models.CharField() --省略其他字段信息 class Meta: v ...

  3. u-boot: Not enough room for program headers, try linking with -N

    在编译u-boot的时候出现了以下错误: arm-linux-gnueabi-ld.bfd: u-boot: Not enough room for program headers, try link ...

  4. Python 常用编码规范

    一.简明概述 1.编码 如无特殊情况, 文件一律使用 UTF-8 编码 如无特殊情况, 文件头部必须加入#-*-coding:utf-8-*-标识 2.代码格式 2.1.缩进 统一使用 4 个空格进行 ...

  5. 「雕爷学编程」Arduino动手做（20）—水银开关模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...

  6. Codeforces1141E(E题）Superhero Battle

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

  7. 3.5 Go布尔型

    1.Go布尔型 一个布尔类型的值只有两种:true 和 false. if 和 for 语句的条件部分都是布尔类型的值,并且==和<等比较操作也会产生布尔型的值. package main im ...

  8. Linux系统rabbitmq安装

    rabbitmq消息队列(Message Queue)是一种应用间的通信方式,消息发送后可以立即返回,由消息系统来确保消息的可靠传递.消息发布者只管把消息发布到 MQ 中而不用管谁来取,消息使用者只管 ...

  9. Django模板之模板组件(include)

    可以将常用的页面内容如导航条,页尾信息等组件保存在单独的文件中的一个小功能块,然后在需要使用的地方,文件的任意位置按如下语法导入即可. 模板组件: 新建一个组件zujian.html文件(一个固定写好 ...

  10. Python PIL Image图片显示系列

    1. PIL Image图片显示 在使用PIL函数中的Image方法读取图片时,对于图片的shape,可能有不少宝宝存在疑惑.是什么疑惑了?就是image = Image.open(image_pat ...