前端有趣的案例之HTML+CSS+JS-实现弹球
效果图:
功能描述:
点击开始游戏就可以玩碰碰球小游戏啦,若小球碰到下边框时,游戏结束。需要刷新页面后重新开始游戏。
index.HTML
<div id="contain"><div id="box"><div class="board"></div><div class="ball"></div></div><button>开始游戏</button><br><span>Score:</span><span class="score">0</span>
</div>
CSS样式
1)contain选择器 的作用是使游戏布局在整个浏览器的中心
2)box选择器 划定游戏区域的样式设计
3)类选择器 board 和类选择器 ball 分别代表碰撞板和球的样式设计
<style>*{margin: 0;padding: 0;}#contain {width: 500px;height: 480px;margin: 0 auto;margin-top: 100px;}#box {width: 500px;height: 400px;margin: 0 auto;/* 子绝父相 */position:relative ;border: 1px solid #ccc;}.board {width: 100px;height: 10px;background-color: black;/* 子绝父相 */position:absolute;/* board水平居中 */left:200px;top: 80%;}.ball {width: 15px;height: 15px;border-radius: 50%;background-color: coral;/* 子绝父相 */position: absolute;left:242px;top:76%;}button {width: 100px;background-color: dodgerblue;border-radius: 10%;color: white;padding: 4px 0;margin: 5px 0;}
</style>
JS代码:
<script src="../jquery.js"></script>
<script>
//获取各所需元素var contain = document.getElementById("contain");var box = document.getElementById("box");var board = document.getElementsByClassName("board")[0];var ball = document.getElementsByClassName("ball")[0];var btn = document.getElementsByTagName("button")[0];var score = document.getElementsByClassName("score")[0];//分别代表board左距离、右距离;ball左距离、右距离var board_left,board_top,ball_left,ball_top ;var interval,flag=1,sum=0; //设置小球的速度var speedX = -1,speedY = -1;//监听鼠标进入boxbox.onmousemove = function() {//事件对象(兼容)var e = event || window.event; //更改board的left和topboard_left = event.pageX - box.offsetLeft -50;board_top = event.pageY - box.offsetTop; //检测board是否超出边框并更改board和ball位置if(board_left>=0 && board_left<=400) {board.style.left = board_left + "px";//flag的作用是防止点击按钮后再次进入Box后球的位置再变化if(flag) {ball_left = board_left + 45;ball.style.left = ball_left + "px";} } if(board_top>=0 && board_top<=390){board.style.top = board_top + "px";if(flag) {ball_top = board_top - 15;ball.style.top = ball_top +"px";}} }//监听按钮点击事件btn.onclick = function() {//清除定时器,防止定时器重叠clearInterval(interval);//flag=0后ball不再随board位置变化flag=0;//设置定时器interval = setInterval(function(){ ball_left += speedX;ball_top += speedY;if(ball_left>=0 && ball_left<=485){ball.style.left = ball_left + "px";}if(ball_top>=0 && ball_top<=385){ball.style.top = ball_top + "px";}//球的方向改变//撞d到左边右边边框if(ball_left<0|| ball_left>485 ){speedX = -speedX; }else if(ball_top<0){//撞到上边边框边框speedY = -speedY; } //检测ball碰到boardif((ball_top+15) >= board_top && ball_left>=board_left && ball_left <= (board_left+50)){speedX = -speedX; speedY = -speedY;//分数改变sum+=5;score.innerHTML = sum;}//游戏结束if(ball_top>385 ){alert("游戏结束,刷新后重新开始");clearInterval(interval);}},5) }
</script>
JS代码详解:
1、JS核心代码解析----监听鼠标移入
1)事件对象要使用兼容写法用事件对象是为了获取 board 左距离,右距离和 ball 左距离,右距离,方便改动 board 和 ball 的位置,不了解事件对象的可看JS事件对象
2) board_left = event.pageX - box.offsetLeft -50; 这句代码中 board_left 之所以 -50 是为了实现鼠标移动时指向的是 *board* 的正中间,更加美观
3)在两个 if语句 中嵌套使用了 if语句,并且使用了一个标志 变量 flag。外层 if语句 目的是限制 *board* 能移动的范围,内层 if语句 和 变量 flag 是为了防止点击了游戏开始按钮后,在游戏过程中出现当鼠标再进入游戏区域时出现小球运动错误的bug(有兴趣可以试试替换成下面的代码会出现什么情况)
if(board_left>=0 && board_left<=400) {board.style.left = board_left + "px";ball_left = board_left + 45;ball.style.left = ball_left + "px";
} if(board_top>=0 && board_top<=390){board.style.top = board_top + "px";ball_top = board_top - 15;ball.style.top = ball_top +"px";
}
以下为 监听鼠标移入的正确代码展示
//监听鼠标进入boxbox.onmousemove = function() {//事件对象(兼容)var e = event || window.event; //更改board的left和topboard_left = event.pageX - box.offsetLeft -50;board_top = event.pageY - box.offsetTop; //检测board是否超出边框并更改board和ball位置if(board_left>=0 && board_left<=400) {board.style.left = board_left + "px";//flag的作用是防止点击按钮后再次进入Box后球的位置再变化if(flag) {ball_left = board_left + 45;ball.style.left = ball_left + "px";} } if(board_top>=0 && board_top<=390){board.style.top = board_top + "px";if(flag) {ball_top = board_top - 15;ball.style.top = ball_top +"px";}} }
2、JS核心代码解析----监听游戏开始按钮点击事件
1)清除定时器,防止出现定时器重叠现象
2)不要忘了 flag变量 ,进入点击事件立即将flag变量 置零
(建议结合上一目录监听鼠标移入同时分析)
//清除定时器,防止定时器重叠
clearInterval(interval);//flag=0后ball不再随board位置变化
flag=0;
3、JS核心代码解析----监听球的碰撞
1)球碰到上边界、左右边界时,要改变运动方向,即要考虑在什么情况下将speedX或speedY改为相反数
2)球碰到碰撞板时speedX和speedY都要改为相反数
,相应的游戏分数要改变
3)当球碰到下边界时提示游戏结束,清除定时器
if(ball_left>=0 && ball_left<=485){ball.style.left = ball_left + "px";}
if(ball_top>=0 && ball_top<=385){ball.style.top = ball_top + "px";}//球的方向改变
//撞到左边右边边框
if(ball_left<0|| ball_left>485 ){speedX = -speedX;
}else if(ball_top<0){//撞到上边边框边框speedY = -speedY; } //检测ball碰到board
if((ball_top+15) >= board_top && ball_left>=board_left && ball_left <= (board_left+50)){speedX = -speedX; speedY = -speedY;
//分数改变sum+=5;score.innerHTML = sum;}
//游戏结束
if(ball_top>385 ){alert("游戏结束,刷新后重新开始");clearInterval(interval);
}
前端有趣的案例之HTML+CSS+JS-实现弹球相关推荐
- 有趣的HTML实例(八) 一个很有趣的动态背景(css+js)
小时候,谁都觉得自己的未来闪闪发光,不是吗?但是一旦长大,没有一件事会遂自己心愿. --<被嫌弃的松子的一生> 目录 一.前言 二.往期作品回顾 三.作品介绍 四.本期代码介绍 五.效果显 ...
- html css js 实战案例_使用html+css+js实现弹球游戏
php中文网最新课程 每日17点准时技术干货分享 使用html+css+js实现弹球游戏 代码如下,复制即可使用: <head> <style type="text/css ...
- html实现页面弹球,使用html+css+js实现弹球游戏
使用html+css+js实现弹球游戏 代码如下,复制即可使用: 开始 0 暂停 提示:键盘左右箭头控制滑板
- 使用html+css+js实现弹球游戏
使用html+css+js实现弹球游戏 使用html+css+js实现弹球游戏 效果图: 代码如下,复制即可使用: <!doctype html> <head><styl ...
- html5弹球游戏的实现,使用html+css+js实现弹球游戏
使用html+css+js实现弹球游戏 代码如下,复制即可使用: .panel{ position: relative; z-index: 0; top:0px; left: 400px; width ...
- html弹球游戏,使用html+css+js实现弹球游戏
使用html+css+js实现弹球游戏 代码如下,复制即可使用: .panel{ position: relative; z-index: 0; top:0px; left: 400px; width ...
- 前端开发规范文档(html,css,js)
首先吐槽一句,本来想上传word文档的,可是发现博客不能上传word文档,这就很尴尬了. 首先声明该规范不是本人写的,网上搜前端规范发现这个很详细就先复制下来做笔记,当然不可能啥都按规范来,每个公司的 ...
- 前端基础知识点整理(html+css+js基础)、不包含框架
css盒子模型 盒模型都是由四个部分组成的,分别是margin.border.padding和content. 标准盒模型和IE盒模型的区别在于设置width和height时,所对应的范围不同.标 ...
- 动态生成表格案例(HTML+CSS+JS)
在这里实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除. 实现思路为:先创建一个表格和一个表单,将表单中输入的 ...
最新文章
- 新都一职高计算机学什么,新都第一职业高中怎么样
- 12月22日 find命令
- C#编译器选项(目标平台)
- CheLunTan.Net无需注册同样享有发帖和回帖权利
- C++ 类型转换(强制类型转换)
- javascript --- 瀑布流的实现
- 面试官问:如果MySQL引起CPU消耗过大,你会怎么优化
- (OS 64)指定的网络名不再可用,winnt_accept: Asynchronous AcceptEx failed.
- 非精确运算和精确运算
- 【Android】Binder机制
- 网站建设 之 CSS渐变
- 蓝湖 Axure 墨刀
- vcs+verdi简单的仿真
- 谷歌浏览器自定义快捷搜索引擎
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- 学习笔记-应用光学 第二章 球面和球面系统
- 如何更高效地阅读JDK源码
- 帝国 ajax评论插件,帝国cms评论仿畅言评论插件兼容7.0/7.2版本
- mysql server has gone away 2006_#2006 - MySQL server has gone away 问题解决方法
- Xmanager的下载和使用