原生JS实现简单打砖块弹球小游戏

我是真的不会前端

于 2021-05-26 20:28:08 发布

阅读量897

点赞数 7

分类专栏： js小游戏文章标签：游戏 js dom css html5

本文链接：https://blog.youkuaiyun.com/qq_23539691/article/details/117304567

版权

本文介绍了一款使用原生JS编写的打砖块弹球小游戏，游戏中小球的速度是随机的，其显示速度是横纵速度之和的平方根。通过回车或点击滑块启动游戏，使用鼠标或键盘A/D控制挡板接球。虽然没有使用插件，样式较为朴素，并存在一些小问题，如方向键未设定终止值，可能导致小球位置精度丢失。此项目旨在提升逻辑思维能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用原生JS写的，还有一点瑕疵。代码直接复制到html就能使用
速度随机的因为设涉及横向和纵向速度，所以显示的小球速度值是他们的和速度（立方和开根号）。
按回车或者在滑块上单机左键开始游戏。鼠标滑动或者键盘A（左）或者D（右）控制滑块方向接小球。
这个小demo的意义主要为了锻炼逻辑能力


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
.container{
   
    width: 500px;
    height: 500px;
    border:1px solid #000;
    margin:auto;
    position:relative;
}
.brickBox{
   
    width: 500px;
    height: 300px;
    /* background-color: yellowgreen; */
    position:absolute;
    left: 0;
    top: 0;
}
.ball{
   
    width: 15px;
    height: 15px;
    background-color:purple;
    border-radius:50%;
    position:absolute;
    bottom:30px;
    left:235px;
    /* margin-left:-15px; */
}
.slider{
   
    width: 150px;
    height: 30px;
    background-color: #00f;
    position:absolute;
    /* left:50%; */
    left:175px;
    /* margin-left:-75px; */
    bottom:0;
}
</style>
</head>
<body>
<div class="container">
    <div class="brickBox"></div>
    <div class="ball"></div>
    <div class="slider"></div>
</div>
<div style="margin-left: 40%;font-size: 25px;">当前速度: <span id="speed"></span> </div>
<div style="margin-left: 40% ;font-size: 25px;">当前打掉的方块数: <span id="count"></span> </div>

</

最低0.47元/天解锁文章