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实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
随机推荐
- 教你配置windows上的windbg,linux上的lldb，打入clr内部这一篇就够了
一:背景 1. 讲故事 前几天公众号里有位兄弟看了几篇文章之后,也准备用windbg试试看,结果这一配就花了好几天,(づ╥﹏╥)づ,我想也有很多跃跃欲试的朋友在配置的时候肯定会遇到这样和那样的问题,所 ...
- java读源码 之 map源码分析（HashMap，图解）一
开篇之前,先说几句题外话,写博客也一年多了,一直没找到一种好的输出方式,博客质量其实也不高,很多时候都是赶着写出来的,最近也思考了很多,以后的博客也会更注重质量,同时也尽量写的不那么生硬,能让大家 ...
- Spring Boot学习 之 Spring Boot Actuator（一）
Spring Boot版本:2.1.4.RELEASE 启用: spring-boot-actuator模块提供了一系列的用于监控的端点.最简单的开启这个功能的方法就是,在pom文件中添加如下的依赖. ...
- uniapp自定义简单弹窗组件
2.0(2019-08-31) 船新版本的信息弹窗组件 插件市场地址:http://ext.dcloud.net.cn/plugin?id=672 可以弹出很多条信息,并单独控制消失时间.点击消失. ...
- JS实现显示来访者的停留时间
显示来访者的停留时间 <script language="javascript"> var ap_name = navigator.appName; var ap_vi ...
- 【Spark】快来学习RDD的创建以及操作方式吧！
目录 RDD的创建 三种方式 从一个集合中创建 从文件中创建 从其他的RDD转化而来 RDD编程常用API 算子分类 Transformation 概述 帮助文档 常用Transformation表 ...
- FOC 算法基础之欧拉公式
文章目录 欧拉公式 几何意义 复数平面 动态过程 加法 FOC电压矢量的推导 总结 参考 FOC中电压矢量合成的推导,对于欧拉公式的几何意义做了一个全面的回顾. 欧拉公式 欧拉是一个天才,欧拉公式甚至 ...
- [工具]微软的学习平台Microsoft Learn很好用，推荐一下
1. 什么是Microsoft Learn Microsoft Learn是微软这两年大力推广的全新学习平台,可提供 Microsoft 产品交互式学习体验.基本上无需登录即可使用,但登录后可以使用更 ...
- flink流处理从0到1
一.DataStream API之Data Sources(消费者之数据源) 介绍: source是程序的数据源输入,你可以通过StreamExecutionEnvironment.addSource ...
- Nginx｜构建简单的文件服务器（mac） 续-FastDFS安装（mac）｜文件存储方案
目录 Nginx|构建简单的文件服务器(mac) 1 所需安装包 2 安装fastdfs-nginx-module-master 3 安装Nginx Nginx|构建简单的文件服务器(mac) 续上文 ...