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 弹弹球小游戏(二)
新版弹弹球小游戏,在上一次的基础上,做了改进,可以任意添加小球,而且跑动时可以互不干扰 <html><head><meta charset="utf-8&quo ...
JavaScript - JavaScript自定义弹出对话框
本脚本使用自定义的浮动窗口替代浏览器自己的对话框,效果非常不错.包含Error | Warning | Success | Prompt 四个对话框窗口兼容性:IE6+ FireFox2+ Oper ...
html悬浮弹窗后面背景变深,JS+CSS实现Div弹出窗口同时背景变暗的方法
本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: JS+CSS实现的Div弹出窗口,同时背景变暗 function locki ...
html鼠标可拖动窗体,javascript div 弹出可拖动窗口
javascript div 弹出可拖动窗口更新时间:2009年02月26日 21:50:37 作者: 创建弹出div窗口. /* * 创建弹出div窗口. 1.接口说明:DivWindow(i ...
【Web前端】html+css+javascript
1 HTML 1.1. HTML基本概念 HTML:hyper text markup language 超文本标记语言,就是超出纯文本范畴的语言,其中既可以定义文本也可以定义图片,超链接等等非文本性 ...
基于javaweb的私人牙科诊所病历管理系统(java+jsp+css+javascript+mysql)
基于javaweb的私人牙科诊所病历管理系统(java+jsp+css+javascript+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/id ...
CRM后台管理系统：HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面)
CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面) 一款使用Bootstrap构建,多个主页版本的企业网站后台管理系统,咨询管理,数据统计后台管理 ...
基于Html+Css+javascript的动漫网站
1.前端三门技术学习Web前端技术需要掌握三门基本技术:HTML,CSS,JavaScript: HTML:HTML是网页内容的载体.内容就是网页制作者放在页面上想要用户浏览的信息,可以包含文件.图 ...
青柠起始页样式书写+清新风格登录界面——Html+Css+JavaScript
青柠起始页样式书写--Html+Css+JavaScript 效果展示清新风格登录界面首先是制作青柠其实起始页的html 构思一个结构下面呈现代码 <!-- 作业专用html框架 --&g ...

html css javascript实现弹弹球

html css javascript实现弹弹球相关推荐

最新文章

热门文章