掐掐手指一算，这个寒假可有四个多月长了！！！而且都快五个月没见到女朋友了！！！突发奇想，写个前端小游戏让她开心开心。
虽然可以搜得到很多大佬写的小游戏，但觉得自己写的会更有意义！
一、游戏描述
点击开始游戏就可以玩碰碰球小游戏啦
若小球碰到下边框时，游戏结束。需要刷新页面后重新开始游戏
二、游戏展示
三、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核心代码
1、全部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;
//监听鼠标进入box
box.onmousemove = function() {
//事件对象(兼容)
var e = event || window.event;
//更改board的left和top
board_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碰到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);
}
},5)
}
</script>
2、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";
}
以下为 监听鼠标移入 的正确代码展示：
//监听鼠标进入box
box.onmousemove = function() {
//事件对象(兼容)
var e = event || window.event;
//更改board的left和top
board_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";
}
}
}
3、JS核心代码解析----监听游戏开始按钮点击事件
（1）首先要清除定时器，防止出现定时器重叠现象
（2）特别不要忘了 flag变量 ，进入点击事件立即将flag变量 置零 （建议结合上一目录监听鼠标移入同时分析）
//清除定时器,防止定时器重叠
clearInterval(interval);
//flag=0后ball不再随board位置变化
flag=0;
4、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);
}
欧啦！！代码拿去哄女朋友叭！！不用谢嘿嘿
另外代码还有很多需要改进的地方，希望各位大佬多多提点！！！
转载：https://blog.csdn.net/qq_45473786/article/details/105736792
查看评论