#Dayu200体验官#OpenHarmony应用开发之弹球小游戏（2/2）原创精华

学_无_止_境

发布于 2022-6-29 19:01

8262浏览

2收藏

0 回顾

打砖块小游戏主要有两个界面，第一个是进入游戏界面，第一个是玩游戏界面。如图1、2所示。


图1 进入界面	图2 玩游戏

进入界面的功能实现在项目的index目录中，包括index.hml、index.css和index.js三个文件。玩游戏的功能及控制功能实现在项目的second目录中，包括second.hml、second.css和second.js三个文件。

1 进入页面实现

1.1 index.hml

<div class="container">
    <text class="title">
        弹砖块
    </text>
    <input class="btn" type="button" value="进入游戏" onclick="onclick">
    </input>
</div>
1.
2.
3.
4.
5.
6.
7.

1.1 index.css

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
.title {
    font-size: 60px;
    text-align: center;
    width: 100%;
    height: 40%;
    margin: 10px;
}
.btn {
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    width: 40%;
    height: 8%;
    margin-top: 20px;
}
@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}
@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}
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.

1.1 index.js

import router from '@system.router';

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    onclick: function(){
        router.push({
            uri: "pages/second/second"
        })
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

2 玩游戏实现

2.1 second.hml

<div class="container">
    <div class="brickBox" id="brickBox">
        <div class="brick"   id="brick1"  style="visibility: visible;">
        </div>
        <div class="brick"   id="brick2"  style="visibility: visible;">
        </div>
        <div class="brick"   id="brick3"  style="visibility: visible;">
        </div>
        <div class="brick"   id="brick4"  style="visibility: visible;">
        </div>
        <div class="brick"   id="brick5"  style="visibility: visible;">
        </div>

        <dialog id="hintDialog" style="margin-bottom: 50%;">
            <div class="dialog-div">
                <div class="inner-txt">
                    <text class="txt">弹砖块</text>
                </div>
                <text class="text">游戏结束</text>
                <div class="inner-btn">
                    <button type="text" value="确定" onclick="sethintDialog" class="btn-txt"></button>
                </div>
            </div>
        </dialog>
    </div>

    <div class="ball" id="ball"></div>

    <div class="slider" id="slider" ondragstart="dragstart" ondrag="drag"  ondragend="dragend" style="position: absolute;left:{{left}};" ></div>

    <div class="Top">
        <button class="buttons"  onclick="Rebound">
            开始游戏
        </button>
        <button class="buttons"  onclick="restart" >
            再来一局
        </button>
    </div>
</div>
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.

2.2 second.css

.container {
    background-color: bisque;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.buttons {
    margin-top: 15px;
    width: 45%;
    height: 80px;
    text-align: center;
    font-size: 60px;
    border-radius: 10px;
    background-color: chocolate;
}

.title {
    font-size: 13px;
    margin-top: 60px;
    margin-left: 20px;
    color: grey;
}

.Top {
    width: 100%;
    height: 100px;
    position: relative;
    background-color: chocolate;

}

.brickBox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: burlywood;/**自动换行**/
    flex-wrap: wrap;
}

.brick {
    width: 20%;
    height: 60px;
    background-color: brown;
    border: 3px solid black;
}

.ball {
    width: 50px;
    height: 50px;
    background-color: darkgreen;
    border-radius: 250px;
    position: absolute;
    bottom: 200px;
    left: 50%;
}

.slider {
    width: 30%;
    height: 50px;
    background-color: cadetblue;
    position: absolute;
    left: 50%;
    bottom: 150px;
}

.dialog-div {
    flex-direction: column;
    align-items: center;
}

.inner-txt {
    width: 80%;
    height: 100px;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
}

.inner-btn {
    width: 80%;
    height: 100px;
    align-items: center;
    justify-content: space-around;
}

.txt {
    font-size: 18px;
    color: #000000;
    font-weight: bold;
}

.text {
    font-size: 16px;
}
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.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.

2.3 second.js

import prompt from '@system.prompt';

export default {
    data: {
        left: 250,
    },
    onInit() {

    },
    drag(e) {
        this.left = e.globalX;
    },
    // 实现小球上下左右不断移动
    // 小球反弹（速度*-1）
    Rebound() {
        var brickBox = this.$element('brickBox');
        var ball = this.$element('ball');
        var slider = this.$element('slider');
        var brick1 = this.$element('brick1');
        var brick2 = this.$element('brick2');
        var brick3 = this.$element('brick3');
        var brick4 = this.$element('brick4');
        var brick5 = this.$element('brick5');
        var hintDialog = this.$element('hintDialog');
        // 小球运动
        var interId = null;
        var speedX = this.getRandom(5, 10);
        var speedY = -this.getRandom(5, 10);
        interId = setInterval(function () {
            // 设定x轴方向的移动速度
            var lf = ball.getBoundingClientRect().left + speedX;
            // 设定y轴方向的移动速度
            var tp = ball.getBoundingClientRect().top + speedY;
            // 碰撞销毁砖块
            // if进行判断，判断小球与砖块接触
            if ((lf + ball.getBoundingClientRect().width / 2) >= brick1.getBoundingClientRect().left && (lf + ball.getBoundingClientRect().width / 2) <= (brick1.getBoundingClientRect().left + brick1.getBoundingClientRect().width) && (brick1.getBoundingClientRect().top + brick1.getBoundingClientRect().height) >= ball.getBoundingClientRect().top) {
                brick1.setStyle(
                    "visibility", "hidden"
                )
                // Y轴的移动速度
                speedY = 5;
            }
            if ((lf + ball.getBoundingClientRect().width / 2) >= brick2.getBoundingClientRect().left && (lf + ball.getBoundingClientRect().width / 2) <= (brick2.getBoundingClientRect().left + brick2.getBoundingClientRect().width) && (brick2.getBoundingClientRect().top + brick2.getBoundingClientRect().height) >= ball.getBoundingClientRect().top) {
                brick2.setStyle(
                    "visibility", "hidden"
                )
                // Y轴的移动速度
                speedY = 5;
            }
            if ((lf + ball.getBoundingClientRect().width / 2) >= brick3.getBoundingClientRect().left && (lf + ball.getBoundingClientRect().width / 2) <= (brick3.getBoundingClientRect().left + brick3.getBoundingClientRect().width) && (brick3.getBoundingClientRect().top + brick3.getBoundingClientRect().height) >= ball.getBoundingClientRect().top) {
                brick3.setStyle(
                    "visibility", "hidden"
                )
                // Y轴的移动速度
                speedY = 5;
            }
            if ((lf + ball.getBoundingClientRect().width / 2) >= brick4.getBoundingClientRect().left && (lf + ball.getBoundingClientRect().width / 2) <= (brick4.getBoundingClientRect().left + brick4.getBoundingClientRect().width) && (brick4.getBoundingClientRect().top + brick4.getBoundingClientRect().height) >= ball.getBoundingClientRect().top) {
                brick4.setStyle(
                    "visibility", "hidden"
                )
                // Y轴的移动速度
                speedY = 5;
            }
            if ((lf + ball.getBoundingClientRect().width / 2) >= brick5.getBoundingClientRect().left && (lf + ball.getBoundingClientRect().width / 2) <= (brick5.getBoundingClientRect().left + brick5.getBoundingClientRect().width) && (brick5.getBoundingClientRect().top + brick5.getBoundingClientRect().height) >= ball.getBoundingClientRect().top) {
                brick5.setStyle(
                    "visibility", "hidden"
                )
                // Y轴的移动速度
                speedY = 5;
            }
            //lf:x  tp:y
            if (lf < 0) {
                speedX = -speedX;
            }
            if (lf >= (brickBox.getBoundingClientRect().width - ball.getBoundingClientRect().width)) {
                speedX = -speedX;
            }
            if (tp <= 0) {
                speedY = 5;
            } else if ((ball.getBoundingClientRect().top + ball.getBoundingClientRect().height) >= slider.getBoundingClientRect().top && (ball.getBoundingClientRect().left + ball.getBoundingClientRect().width / 2) >= slider.getBoundingClientRect().left && (ball.getBoundingClientRect().left + ball.getBoundingClientRect().width / 2) <= (slider.getBoundingClientRect().left + slider.getBoundingClientRect().width)) {
                speedY = -5;
            } else if (ball.getBoundingClientRect().top >= slider.getBoundingClientRect().top) {
                // 游戏结束
                // 弹框提示游戏该结束
                hintDialog.show();
                // 清除间隔
                clearInterval(interId);
            }
            //实时改变小球位置
            ball.setStyle("left", lf + "px")
            ball.setStyle("top", tp + "px")

        }, 20)
    },

    // 封装获取随机数的函数
    getRandom(a, b) {
        var max = Math.max(a, b);
        var min = Math.min(a, b)
        return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    //关闭弹窗
    sethintDialog(e) {
        this.$element('hintDialog').close()
    },
    //拖拽结束
    dragend(e) {
        prompt.showToast({
            message: '拖动结束'
        })
    },
    //拖拽开始
    dragstart(e) {
        prompt.showToast({
            message: '开始拖动'
        })
    },
    //再来一局
    restart() {
        var slider = this.$element('slider');
        var ball = this.$element('ball');
        var brick1 = this.$element('brick1');
        var brick2 = this.$element('brick2');
        var brick3 = this.$element('brick3');
        var brick4 = this.$element('brick4');
        var brick5 = this.$element('brick5');
        slider.setStyle("left", 50 + "%");
        slider.setStyle("bottom", 150 + "px")
        ball.setStyle("left", 50 + "%")
        ball.setStyle("bottom", 200 + "px")
        brick1.setStyle(
            "visibility", "visible"
        )
        brick2.setStyle(
            "visibility", "visible"
        )
        brick3.setStyle(
            "visibility", "visible"
        )
        brick4.setStyle(
            "visibility", "visible"
        )
        brick5.setStyle(
            "visibility", "visible"
        )
        this.Rebound();
    }
}
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.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.

3 玩游戏

下面通过动画看一下玩的效果，请看：

4 问题

尽管本文给大家展示了一个可以玩的弹球游戏，但是还有好多问题直到思考和进一步体验。
1）如何实现多关？当完成一关后进入下一关，这样游戏就更好玩了。。。
2）如何实现实现砖块的动态产生？针对砖块动态产生，本次体验也尝试了一些方法但是没有成功。。。
3）如何使得游戏更加流畅？这个是一个值得进一步实验的问题，涉及到硬件和算法。。。

最后，需要说明的是目前该游戏还有很多不足，还可以继续改进完善。。。

分类

卡片开发

IDE

标签

Dayu200体验官

已于2022-6-29 19:03:34修改

51CTO

51CTO博客

51CTO学堂

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏（2/2）原创精华

0 回顾

1 进入页面实现

1.1 index.hml

1.1 index.css

1.1 index.js

2 玩游戏实现

2.1 second.hml

2.2 second.css

2.3 second.js

3 玩游戏

4 问题

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏（2/2） 原创 精华

0 回顾

1 进入页面实现

1.1 index.hml

1.1 index.css

1.1 index.js

2 玩游戏实现

2.1 second.hml

2.2 second.css

2.3 second.js

3 玩游戏

4 问题

目录

订阅鸿蒙技术特刊，精选内容抢先看

#Dayu200体验官#OpenHarmony应用开发之弹球小游戏（2/2）原创精华