MENU

做个音游

2017 年 09 月 20 日 • 碎碎念,Project

好吧看来这篇文已经是拖了一周了吧…
不拖沓,直接开更。


使用的语言:Javascript,对象Canvas
其他工具:脑子


想做的不是像Lanota那样的洗衣机桶,也不是osu!的osu!模式,就是普普通通的N key模式,具体可以参考 节奏大师。所以大概的结构就是
structure.png

酱紫


由于本人热衷于和Javascript玩耍,那就要选择用Canvas画布来完成
构图上很简单,使用

    can.beginPath();
    can.moveTo();
    can.lineTo();
    can.stroke();

就可以得到如下的样子,为了表明对应的按键,还加入了按键的标示。
9B43DBBF-D5DF-439B-A697-5F4DC09B4345.png

然后需要设计“乐块”了。
因为本人不是“前端爱好者”,所以就使用了随机颜色来增加识别度。


由于需要控制到每一个小乐块的属性信息,我们设定一个class叫做square。

function sqaure() {
    this.line = this.rand(keys); //所属乐块线
    this.time = this.rand(30000); //出现时间
    this.height = 0; //自身宽度
    this.length = 40; //自身高度
    this.visible = true; //是否可见
    this.canvas = {}; //自身画布
    this.color = 'rgb(' + this.rand(255) + ',' + this.rand(255) + ',' + this.rand(255) + ')'; //随机颜色
    this.init(); //自身画布初始化
}

这里为了适合测试部分用了随机生成,在后期的时候我们可以通过读取json来配置乐块。
同时,使用Javascript的Prototype属性来为对象添加一些function。

sqaure.prototype = {
    init: function () {
        this.canvas = document.getElementById('main').getContext('2d');
    },
    rand: function (num) {
        return Math.floor(Math.random() * num + 1);
    },
    drop: function (num) {
        t = 1;
        if(combo >= 5){
            can.font = "20px Arial";
            can.fillText("COMBO x" + combo, w / 2 - 100, h / 2 + 10);
        }
        num = 3;
        if (this.visible == true) {
            this.canvas.fillStyle = this.color;
            this.canvas.fillRect(stp[this.line] - this.length / 2, this.height, this.length, this.length);
            this.height += num;
        }
    },
    judge: function () {
        if (this.height > h * 0.8 + 10) {
            can.font = "20px Arial";
            can.fillText("MISSED", stp[this.line] + 20, this.height);
            combo = 0;
        }
        if (this.height > h * 0.8 + 100)
            this.visible = false;
        }

展示了部分代码,多余省略。
总结,一个“乐块”都需要有如下属性:
Square.png


功能和结构都设计好了,就需要让它运行起来了。
由于Canvas画布的特殊性,每次刷新只能全局刷新。所以每次刷新都需要先清空画布,再重绘界面。
为了保持画面的流畅度和帧率,我们设定30ms刷新一次画布,其中要执行所有点的下落和判断操作。
你可以这样写:

setInterval(function () {
    dots[0].canvas.clearRect(0, 0, w, h);
    for (i = 0; i < dots.length; i++) {
        if (time >= dots[i].time && dots[i].visible == true) {
            dots[i].drop();
            dots[i].judge();
        }
    }
    time += 30;
}, 30)

到此,所有的核心都做完了,当然,这个东西不可能这么点就完成了的,还有很多不是核心的内容因为篇幅重点问题不放出来了。等完成的时候会传到Github上作为demo展示的。
不过呢,你可以先看看这个测试界面。
测试界面

最后编辑于: 2017 年 09 月 27 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码
添加新评论

已有 4 条评论
  1. 这个应该有点难度啦。。

  2. 这个明天写,真的#(愤怒)

  3. @(滑稽)大佬!大佬!

  4. 少年,你没写判定啊:)