效果如图：



原创代码：

<!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. 微信小程序下拉刷新时有部分区域不随着下拉移动

    问题 区域元素使用(position: fixed),小程序页面下拉刷新时,这部分区域不会随页面下拉移动. 如何解决 删除设置的top属性

  2. Android自定义顶部栏及侧滑菜单和fragment+viewpag滑动切换的实现

    嘿嘿嘿,关于android滑动的操作,是不是经常都会用到呢. 我肯定也要学习一下啦. https://blog.csdn.net/u013184970/article/details/82882107 ...

  3. Web前端基础第一天

    Web标准的构成 结构:结构对于网页元素进行整理和分类,现阶段主要学的是html 表现:表现用于设置元素的板式.颜色.大小等外观样式,主要指的是CSS 行为:行为是指网页模型的定义及交互的编写,现阶段 ...

  4. MySQL数据类型笔记

    引言 作为一个做Java后端的开发者,无论是在自己平时项目学习实战还是工作中的真实项目,都离不开和数据库打交道.而MySQL作为当今最流行的关系型数据库之一,也成为了我们必须掌握的一门技术.最近在工作 ...

  5. 【Spark】RDD的依赖关系和缓存相关知识点

    文章目录 RDD的依赖关系 宽依赖 窄依赖 血统 RDD缓存 概述 缓存方式 RDD的依赖关系 RDD和它依赖的父RDD的关系有两种不同的类型,即窄依赖(narrow dependency) 和宽依赖 ...

  6. Boosting算法总结（ada boosting、GBDT、XGBoost）

    把之前学习xgb过程中查找的资料整理分享出来,方便有需要的朋友查看,求大家点赞支持,哈哈哈 作者:tangg, qq:577305810 一.Boosting算法 boosting算法有许多种具体算法 ...

  7. R语言：日薪和应发工资

    生产部门普通员工为日薪,有时要知道日薪和应发工资的转换关系.做表一为日薪取整数,白天工资+晚上工资=应发工资,延长工作时间取时薪的1.5倍,应发工资保留到十位.做表二为应发工资取十的倍数,推算相应日薪 ...

  8. 从卷积拆分和分组的角度看CNN模型的演化

    博客:博客园 | CSDN | blog 写在前面 如题,这篇文章将尝试从卷积拆分的角度看一看各种经典CNN backbone网络module是如何演进的,为了视角的统一,仅分析单条路径上的卷积形式. ...

  9. PAT 1002 A+B for Polynomials (25分)

    题目 This time, you are supposed to find A+B where A and B are two polynomials. Input Specification: E ...

  10. 数学分析新讲(1) NOTE

    前言:无聊才翻翻看看来复习啦..所以慢更(●'◡'●) 1.利用求和公式的性质推导: \[\sum^{n}_{k=1}k=n \] \[\sum^{n}_{k=1}k^2=\frac{n(n+1)(2 ...