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实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
随机推荐
- 软路由OpenWrt（LEDE）2020.4.6编译 UnPnP+NAS+多拨+网盘+DNS优化
近期更新:2020.04.06编译-基于OpenWrt R2020.3.19版本,源码截止2020.04.06. 2020.04.06更新记录: 以软件包形式提供ServerChan(微信推送) ...
- 【Spark】Spark任务调度相关知识
文章目录 准备知识 DAG 概述 shuffle 概述 SortShuffleManager 普通机制 bypass机制 Spark任务调度 流程 准备知识 要弄清楚Spark的任务调度流程,就必须要 ...
- jvm入门及理解（五）——运行时数据区（虚拟机栈）和本地方法接口
一.虚拟机栈背景 由于跨平台性的设计,java的指令都是根据栈来设计的.不同平台CPU架构不同,所以不能设计为基于寄存器的. 优点是跨平台,指令集小,编译器容易实现,缺点是性能下降,实现同样的功能需要 ...
- BIO、NIO、AIO的形象比喻
BIO (Blocking I/O):同步阻塞I/O模式. NIO (New I/O):同步非阻塞模式. AIO (Asynchronous I/O):异步非阻塞I/O模型. 先看阻塞和非阻塞的区别, ...
- python语法学习第十天--魔法方法
魔法方法二!!! 属性访问:在对属性任何操作时,都会调用 有关属性 __getattr__(self, name) 定义当用户试图获取一个不存在的属性时的行为 __getattribute__(s ...
- 在ef core中使用postgres数据库的全文检索功能实战之中文支持
前言 有关通用的postgres数据库全文检索在ef core中的使用方法,参见我的上一篇文章. 本文实践了zhparser中文插件进行全文检索. 准备工作 安装插件,最方便的方法是直接使用安装好插件 ...
- C++17结构化绑定
动机 std::map<K, V>的insert方法返回std::pair<iterator, bool>,两个元素分别是指向所插入键值对的迭代器与指示是否新插入元素的布尔值, ...
- android LoaderManger加载数据Tip
要查看LoaderManager的具体介绍请看博客: LoaderManager介绍 使用时发现不管怎么调用getLoaderManager().restartLoader(LOADER_TYPE_Q ...
- place-holder样式
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #777; } input:-moz-pl ...
- 存储系列之 LUN 和 LVM
一.LUN 1.LUN的由来 上一篇文章已经介绍了RAID技术的原理,那么RAID的实现呢?有两种方式,RAID软件和RAID硬件.但是因软件RAID占用主机CPU和主机内存,而且RAID功能不易实现 ...