JS俄罗斯方块代码_HTML5微信经典俄罗斯方块代码
2017-03-06 13:19:49  By: shinyuu

相信跟我差不多大的80、90童鞋们都玩过一款很经典的游戏、他叫俄罗斯方块、今天呢跟大家分享一款JS俄罗斯方块的网页游戏、使用原生JS制作的俄罗斯方块小游戏特效、并且在文章的最下方也提供了源代码下载、话不多说、先来看一下生成的GIF图

js俄罗斯方块代码


js已经封装成game.js的文件、大家直接引入、html也非常的简单、然后还有一部分CSS代码、如下

HTML代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js俄罗斯方块网页游戏特效 - DD博客</title>

<link rel="stylesheet" type="text/css" href="css/index.css" />

<script src="libs/jquery.js"></script>

</head>
<body>

<div class="bg">
    <div id="gameBoxBg">
        <div id="gameBox">
            <div class="mask">
                <button id="start">开始游戏</button>
            </div>
        </div>
    </div>
    <div id="rigth">
        <div class="next"></div>
        <div id="level"><span>Level:</span><span class="level">1</span></div>
        <div id="score"><span>Score:</span><span class="score">0</span></div>
        <button id="pause">暂停</button>
        <p>控制：</p>
        <p>← 向左移动</p>
        <p>→ 向右移动</p>
        <p>↑ 旋转</p>
        <p>↓ 加速下落</p>
    </div>
</div>

<script src="js/game.js"></script>

</body>
</html>


CSS代码 

.bg {
    width: 530px;
    border: 1px solid #aaa;
    border-radius: 5px;
    padding: 20px;
    margin: 0px auto;
    box-shadow: 0 0 5px #999;
    background: #f5f5f5;
    font-size: 0;
    display: flex;
}
#gameBoxBg {
    width: 330px;
    padding: 8px;
    background: url(../img/bg.jpg);
    background-size: auto 100%;
    background-position-x: 580px;
}
#gameBox {
    width: 330px;
    height: 450px;
    overflow: hidden;
    position: relative;
}

.mask {
    width: 100%;
    height: 100%;
    background: url(../img/bg.jpg);
    background-size: auto 100%;
    background-position-x: 580px;
    position: absolute;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mask button {
    width: 100px;
    height: 40px;
    opacity: 0.7;
}

.wangge {
    width: 30px;
    height: 30px;
    display: inline-block;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    box-sizing: border-box;
    position: absolute;
    background: #f9f9f9;
    opacity: 0.9;
}

.block {
    display: inline-block;
    width: 30px;
    height: 30px;
    font-size: 14px;
    color: #fff;
    border: 2px solid #fff;
    background: #ff9000;
    box-sizing: border-box;
    border-radius: 5px;
    position: absolute;
}

#rigth {
    width: 180px;
    height: 450px;
    padding: 11px 10px;
    box-sizing: border-box;
}
#rigth .next {
    width: 100%;
    height: 160px;
    position: relative;
}
#rigth #score,
#rigth #level {
    width: 100%;
    height: 40px;
    margin: 10px 0;
    font-size: 16px;
    color: #888;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
#rigth #level .level,
#rigth #score .score {
    font-size: 16px;
    color: #555;
    margin-left: 5px;
    margin-top: 0px;
    transition: 0.3;
}
#rigth #pause {
    width: 100%;
    height: 40px;
    margin: 10px 0;
    color: #333;
    font-size: 16px;
}
#rigth p {
    margin: 0;
    font-size: 13px;
    color: #555;
}


js俄罗斯方块网页游戏特效源代码下载链接: js俄罗斯方块代码 密码: 9dws

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛

点赞 (5) 吐槽

猜你喜欢的

快速评论

Email必须输入

表情

评论

技术评论
DD记账
top
+