html css javascript实现弹弹球
效果如图：
原创代码：
<!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实现弹弹球的更多相关文章
- JavaScript插件——弹出框
(JavaScript插件——弹出框) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.htm ...
- Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...
- Vim下的Web开发之html,CSS,javascript插件
Vim下的Web开发之html,CSS,javascript插件 HTML 下载HTML.zip 解压HTML.zip,然后将里面的所有文件copy到C:\Program Files\Vim\vi ...
- HTML,Css,JavaScript之间的关系
简述HTML,Css,JavaScript 网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript). 1.HTML(超文本标记语言 Hyper Te ...
- 购书网站前端实现（HTML+CSS+JavaScript）
购书+阅读静态网页设计与实现 一.主页设计HTML 1.效果展示及实现 2.完整代码 二.主页样式布局CSS 三.空间功能实现Javascript 主要功能 Javascript完整代码: 总结 购书 ...
- html+css+JavaScript实现爱恩斯坦棋游戏
title: "html+css+JavaScript实现爱恩斯坦棋游戏" author: Sun-Wind date: December 30, 2021 背景:本贴将基于前端的 ...
- html css javascript 加载的顺序
html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...
- Sublime Text插件：HTML+CSS+JAVASCRIPT+JSON快速格式化[转]
今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
随机推荐
- 一步一步教你PowerBI数据分析：制作客户RFM数据分析
客户分析就是根据客户信息数据来分析客户特征,评估客户价值,从而为客户制订相应的营销策略与资源配置.通过合理.系统的客户分析,企业可以知道不同的客户有着什么样的需求,分析客户消费特征与商务效益的关系,使 ...
- 物流配送中心管理系统(SSM+MYSQL)
工程项目视频观看地址:www.toutiao.com/i6804066711… 本文首先对系统所涉及到的基础理论知识进行阐述,并在此基础上进行了系统分析.系统分析是平台开发的一个不可缺少的环节,为了能 ...
- leetcode485——最大连续1的个数（easy)
一.题目描述 给定一个二进制数组, 计算其中最大连续1的个数. 示例 1: 输入: [1,1,0,1,1,1] 输出: 3 解释: 开头的两位和最后的三位都是连续1,所以最大连续1的个数是 3. 注意 ...
- Cassandra 简介
Cassandra是云原生和微服务化场景中最好的NoSQL数据库.我信了~ 1. Cassandra是什么 高可用性和可扩展的分布式数据库 Apache Cassandra™是一个开源分布式数据,可提 ...
- Java 在Excel中创建透视表
本文内容介绍通过Java程序在Excel表格中根据数据来创建透视表. 环境准备 需要使用Excel类库工具—Free Spire.XLS for Java,这里使用的是免费版,可通过官网下载Jar包并 ...
- JVM 调优测试 之 故意分配小的堆空间，观察gc回收打印的内容
测试代码如下: @Test public void testPrintGcDetail(){ HashMap<String, List> gcMap = new HashMap<&g ...
- javaweb学习之路（1）request
1.本次练习写一个简单的注册页面 准备工作:首先搭建好服务器tomcat环境,使用的编译软件是eclipse 2.在eclipse中创建一个web工程 3.在webContent文件夹下创建一个reg ...
- wangeditor在移动端的web应用
废话不多说,直接上代码 前端(前端多说一句,在初始使用阶段,不知道是怎么回事,复制在看云上的文档的配置参数时,一直有错误,后台获取不到$_file,整整一上午,下午上网搜了一下别人的上传图片代码才好用 ...
- SSH三大框架知识点
Hibernate ****************************************************************************************** ...
- Java——反射三种方式的效率对比
转载自:https://blog.csdn.net/aitcax/article/details/52694423 1 使用field(效率最高) long start = S ...