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

最新推荐文章于 2022-04-01 08:48:40 发布

VIP文章我是真的不会前端

最新推荐文章于 2022-04-01 08:48:40 发布

阅读量806

点赞数 7

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

本文链接：https://blog.csdn.net/qq_23539691/article/details/117304567

版权

使用原生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>

</body

最低0.47元/天解锁文章

我是真的不会前端

关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
8
评论
原生JS实现简单打砖块弹球小游戏

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

扫一扫