周末休息，用原生JS和CSS给女朋友做了个弹弹球小游戏，她沉迷其中、无法自拔_html给女朋友写的小游戏

上次帮一个粉丝写了这个纯HTML加CSS实现3D立体动态相册，女朋友看到了，说我就没有给她写过这些小玩意，哄她开心。

蛤，听了这话我就很难过。我对她说，等着，马上为你量身定做一个去，你爱玩游戏，整好今天周末给你做个小小的游戏，让你耍一耍~哈哈哈哈，我太机智了。

效果如下：

css部分代码：

<style>
    #main{
        width: 600px; 
        height:300px;
        background: gray;
        margin-left: 300px;
        position: absolute; 
    }
    #ball {
        width: 20px;
        height: 20px;
        background-color: yellow;
        border-radius: 50%;
        position: relative;
    }
    #board{
        width: 80px;
        height: 10px;
        background: red;
        position: absolute;
        bottom: 0;
        left: 450px;
    }
</style> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

html部分代码：

<div id="main">
	<div id="ball" style="left:0;top:0;"> </div>
	<div id="board"></div>
</div>
1
2
3
4

js部分代码：

<script>
var main = document.getElementById('main');
var ball = document.getElementById('ball');
var board = document.getElementById('board');
//设置小球运动速度
ball.speedX = 3;
ball.speedY = 4;
//控制小球运动轨迹
ball.run = function(){
    //parseInt：将字符串转换为整数
    var left = parseInt(this.style.left) + this.speedX; 
    var top = parseInt(this.style.top) + this.speedY;
    this.style.left = left + 'px';
    this.style.top = top + 'px';
    this.check( left,top);
}
//检测碰撞实践
ball.check = function(left,top){
    if(left <= 0 || left >= 580){   
        this.turnX();
    }
    //球撞到上边转向
    if(top <= 0){
        this.turnY();
    }
    //小球碰到下边时，未用挡板则输
    if(top >= 282){
        clearInterval();   //非setInterval
        alert("您输了！点击确定再来一局！");
        this.init();
    }
    //碰撞挡板后Y转向
    var board_left = parseInt(board.style.left); //挡板的左边距
    var board_top  = parseInt(board.style.top); //挡板的上边距
    if(left  >= board_left && left  <= board_left+80 && top+20 >=board_top){
        this.turnY();
    }
}
//控制小球转向
ball.turnX = function(){
    this.speedX = -this.speedX;
}
ball.turnY= function(){
    this.speedY= -this.speedY;
}
//设置小球移动时间间隔为20ms
var clock = setInterval(function(){
    ball.run();
},20)
//移动挡板
main.onmousemove=function(e){   
    //如果进入非main区，则直接返回，无变化。用于防止鼠标进入红色挡板内发生相对于挡板的移动。
    if(e.target!== main){  //严格不等于
        return;
    }
    //假设位置是长方形挡板的底边中点。
    board.style.left=e.offsetX-25+'px'; //数字与px（像素）之间不可有空格。
    board.style.top=e.offsetY-9+'px';
}
    ball.init = function(){ 
    ball.style.left = 0;
    ball.style.top = 0;
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

毕竟是闲着没事给女朋友写的小玩意，功能单一，随便消遣消遣时间罢了，路过的大佬不求点赞，只求莫喷。哈哈哈…