jquery节奏大师项目

鹏重名了
465 阅读4分钟 
初始化游戏(){
    初始化曲库()
    获取开始游戏按钮，挂载 开始游戏()，使用one来挂
    获取重置游戏按钮，挂载 刷新页面 事件
    获取设置游戏按钮，挂载 “未开放” 弹窗
}

初始化曲库(){
    通过ajax读取曲库json数据，每条按键个数为8个
}

开始游戏(){
    屏幕展示 "Let's Go" 字样
    节奏球移动()
    按键监听()
    背景音乐启动
    获取一行方向键()
}

节奏球移动(){
    清除旧定时器
    开启新定时器{
        小球移动
        触碰边界调头 
    }
}

按键监听(){
    if(按下了空格键){
        本轮结算()
        获取一行方向键()
        横坐标++
        if(本轮是否是最后一轮){
            结束游戏()
        }
    }else{
        if(按下了正确的方向键){
            方向键变色，不匹配则略过
            纵坐标++
        } 
    }
}

获取一行方向键(){
    根据横坐标，从曲库中取出一行方向键数组
    遍历这行方向键数组{
        将数组中的值替换为对应的方向字符
        将对应位置的div样式清空
        将方向字符展示在对应的div中        
    }
}

本轮结算(){
    if(当前轮次按键全部按完){
        根据小球左距离，设置响应文字和分数
    }else{
        判定miss
    }
    屏幕展示响应文字
    分数区展示分数
    纵坐标归零
}

游戏结束(){
    关闭背景音乐
    屏幕展示最终分数
    清空按键区内容
    关闭定时器
    关闭键盘监听
}

布局： rhythm.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rhythm Game</title>
    <script src="../../script/jquery-3.2.1.js" type="text/javascript"></script>
    <script src="rhythm.js" type="text/javascript"></script>
    <link href="rhythm.css" type="text/css" rel="stylesheet">
</head>
<body>
<section class="board">
    <header>
        <article class="header_left">
            分数：<span class="score">0</span>
        </article>
        <article class="header_right">
            <a href="javascript:" onclick="alert('劲舞团没玩过啊？');">游戏说明</a>
            <a href="javascript:" onclick="alert('你就是最牛逼的！');">排行榜</a>
        </article>
    </header>
    <section class="danceMan">
        <img src="dance.gif" alt="">
        <img src="dance.gif" alt="">
        <img src="dance.gif" alt="">
    </section>
    <section class="screen">
        点击
        <a href="javascript:" onclick="alert('start按钮在下面呢，点我干屁？');">
            Start
        </a>
        开始
    </section>
    <section class="bar">
        <article class="progress">
            <article class="ball"></article>
        </article>
    </section>
    <section class="keyboard">
        <div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div>
    </section>
    <footer>
        <button id="resetBtn">RESET</button>
        <button id="startBtn">START</button>
        <button id="optionBtn">OPTION</button>
    </footer>
</section>
</body>
</html>

样式： rhythm.css

/*整体字体，颜色*/
body {
    font-family: 黑体;
    color: white;
}

/*超链接的颜色，取消下划线*/
a {
    color: white;
    text-decoration: none;
}

/*鼠标经过超级链接改变颜色*/
a:hover {
    color: yellow;
}

/*忽略内边距和边框*/
article {
    box-sizing: border-box;
}

/*居中，相对定位，阴影*/
.board {
    width: 800px; background-color: black;
    margin: 0 auto;
    position: relative;
    box-shadow: 3px 3px 8px red;
}

/*行高，底边框*/
header {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid white;
}

/*左浮动，左外边距*/
.header_left {
    float: left;
    padding-left: 10px;
}

/*右浮动，文字居右，右内边距*/
.header_right {
    float: right;
    text-align: right;
    padding-right: 10px;
}

/*上外边距，居中*/
.danceMan {
    margin-top: 9px;
    text-align: center
}

/*字号，文字居中，行高*/
.screen {
    font-size: 50px;
    text-align: center;
    line-height: 90px;
}

/*忽略内边距和边框，左内边距，上内边距*/
.bar {
    height: 50px;
    box-sizing: border-box;
    padding-left: 500px;
    padding-top: 15px;
}

/*轮廓，相对定位，忽略内边距和边框*/
.progress {
    width: 200px; height: 20px;
    background-image: linear-gradient(to right, black 100px, yellow 125px, black 150px);
    outline: 1px solid white;
    box-sizing: border-box;
    position: relative;
}

/*圆角，绝对定位*/
.ball {
    width: 20px; height: 20px;
    background-image: radial-gradient(circle at center, red 10%, black);
    border-radius: 50%;
    position: absolute;
}

/*居中，文字居中，上内边距，下内边距，圆角，边框*/
.keyboard {
    height: 30px; width: 600px;
    margin: 0 auto;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 20px;
    border: 1px solid white;
}

/*上外边距，下外边距，文字居中，行高*/
footer {
    height: 70px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 50px;
}

/*左右外边距，文字颜色，边框，圆角，字号，字间距，*/
footer button {
    background-color: white;
    margin: 0 30px;
    color: red;
    border: 1px solid black;
    border-radius: 10px;
    font-size: 18px;
    letter-spacing: 2px;
}

/*文字颜色，指针样式*/
footer button:hover {
    background-color: red;
    color: white;
    cursor: pointer;
}

/*八个按键：内联块，左右外边距，字号*/
div {
    display: inline-block;
    margin: 0 10px;
    font-size: 30px;
}

/*当方向键敲击正确时的文字颜色*/
.ok {
    color: red;
}

脚本：rhythm.js

let song = []; /*曲库二维数组*/
let keyLine; /*一行方向键数组*/
let ball; /*节奏球*/
let speed = 5; /*设置节奏球每次移动5px*/
let period = 30; /*设置节奏球每隔30ms移动一次*/
let timer = null; /*节奏球定时器*/
let rowIndex = 0; /*横坐标：一个曲库中的索引（代表每一条方向键）*/
let colIndex = 0; /*纵坐标：一条方向键中的索引（代表每一个方向键）*/
let score = 0; /*分数*/

// 初始化游戏(){
$(() => {
//     初始化曲库()
    initializeMusic();
//     获取开始游戏按钮，挂载 开始游戏()，使用one来挂
    $("#startBtn").one("click", startGame);
//     获取重置游戏按钮，挂载 刷新页面 事件
    $("#resetBtn").click(() => location.reload());
//     获取设置游戏按钮，挂载 “未开放” 弹窗
    $("#optionBtn").click(() => alert("未开放！"));


});

// 初始化曲库(){
function initializeMusic() {
//     通过ajax读取曲库json数据，每条按键个数为8个
    $.ajax({
        url: "song001.json",
        success: response => song = response
    });
}


// 开始游戏(){
function startGame() {
//     屏幕展示 "Let's Go" 字样
    $(".screen").html("Let's Go").css("color", "yellow");
//     节奏球移动()
    ballMove();
//     按键监听()
    keyListener();
//     背景音乐启动
    $("<embed src='bgm.mp3'/>").css({"visibility": "hidden"}).appendTo($("body"));
//     获取一行方向键()
    getLine();
}

// 节奏球移动(){
function ballMove() {
    ball = $(".ball");
//     清除旧定时器
    clearInterval(timer);
//     开启新定时器{
    timer = setInterval(() => {
//         小球移动
//     元素.position().left：获取元素相对于最近的父元素（需定位）原点的左距离
        ball.css("left", ball.position().left + speed);
//         触碰边界调头
        if (ball.position().left >= 180 || ball.position().left <= 0) {
            speed = -speed;
        }
    }, period);
}

// 按键监听(){
function keyListener() {
    $(document).keydown(ev => {
        ev = ev || event;
        //     if(按下了空格键){
        if (ev.which === 32) {
//         本轮结算()
            settlement();
//         获取一行方向键()
            getLine();
//         横坐标++
            rowIndex++;
//         if(本轮是否是最后一轮){
            if (rowIndex > song.length - 1) {
//              结束游戏()
                gameOver();
            }
//     }else{
        } else {
//         if(按下了正确的方向键){
            if (keyLine[colIndex] === ev.which) {
//             方向键变色，不匹配则略过
                $("div").eq(colIndex).addClass("ok");
//             纵坐标++
                colIndex++;
            }
        }
    });
}

// 获取一行方向键(){
function getLine() {
//     根据横坐标，从曲库中取出一行方向键数组
    keyLine = song[rowIndex];
//     遍历这行方向键数组{
    for (let i = 0; i < keyLine.length; i++) {
//         将数组中的值替换为对应的方向字符
        let key = keyLine[i];
//         将对应位置的div样式清空
        let direction = key === 37 ? "←" : key === 38 ? "↑" : key === 39 ? "→" : "↓";
//         将方向字符展示在对应的div中
        $("div").eq(i).removeClass().html(direction);
    }
}


// 本轮结算(){
function settlement() {
    let screen = $(".screen");
    let msg = "MISS!垃圾！";
    let color = "red";
    //     if(当前轮次按键全部按完){
    if (colIndex > keyLine.length - 1) {
        //         根据小球左距离，设置响应文字和分数
        if (ball.position().left >= 120 && ball.position().left < 130) {
            msg = "PERFECT!牛逼！";
            color = "yellow";
            score += 500;
        } else if (ball.position().left >= 110 && ball.position().left < 140) {
            msg = "GREAT!贼稳！";
            color = "blue";
            score += 300;
        } else if (ball.position().left >= 100 && ball.position().left < 150) {
            msg = "GOOD!还行！";
            color = "green";
            score += 100;
            //         判定miss
        } else {
            msg = "MISS!垃圾！";
            color = "red";
        }
    }
//     屏幕展示响应文字
    screen.html(msg).css("color", color);
//     分数区展示分数
    $(".score").html(score);
//     纵坐标归零
    colIndex = 0;
}

// 游戏结束(){
function gameOver() {
    //     关闭背景音乐
    $("embed").remove();
    //     屏幕展示最终分数
    $(".screen").html(`结束：${score}分`).css("color", "yellow");
    //     清空按键区内容
    $(".keyboard").html("");
    //     关闭定时器
    clearInterval(timer);
    //     关闭键盘监听
    $(document).off();
}

数据：song001.json

[
  [37, 40, 37, 40, 38, 39, 39, 40],
  [37, 37, 40, 37, 40, 40, 38, 39],
  [37, 40, 40, 38, 40, 40, 38, 39],
  [40, 37, 37, 40, 37, 40, 38, 39],
  [37, 40, 40, 38, 40, 40, 38, 39],
  [40, 37, 37, 40, 37, 40, 38, 39],
  [37, 37, 40, 40, 38, 39, 39, 40]
]

图片： dance.gif

avatar
文章
阅读
粉丝