融入动画技术的交互应用

融入动画技术的交互应用

前言

之前使用过p5.js做一些简单的编程，实现了一些简单的交互，比如画动态的风车、制做画图工具等；这次老师又提出了新的要求，让我们结合《代码本色》至少三个章节的技术来实现融入动画技术的交互应用。课上学过一些力、向量什么的知识，再结合《代码本色》上的粒子系统，我初步决定开发一款游戏，灵感来自以前老手机上玩的直升机小游戏，直升机会受到重力的作用，玩家需要操控直升机上下移动躲避前方的障碍物，获得金币，最后看最终的路程和积分。

初步尝试

就像所有游戏开发一样，首先需要准备游戏的基本资源，比如图像、背景音乐等，不幸的是我记不起来那个直升机小游戏的名字了，就在我打算放弃的时候，我找到了一款比较相近的游戏——彩虹猫。彩虹猫不仅BGM十分洗脑，游戏模式也和我的预期十分相像，我也幸运的从伟大网友的分享资源里找到了游戏开发的图片和音乐等资源，于是第一个难题算是解决了。

ps:Nyan Cat真的很洗脑，我之前听过好几遍都不知道它居然出自“彩虹猫”。

接下来总算可以正式开始编程了。首先我们需要创建一个main.js来设置p5.js中必要的三个函数：preload()、setup（）和draw();代码如下：

// main.js

let cat, stars;
let resources = {
   
    catImg: [],
    starImg: [],
    rbImg: []
}

function preload() {
   
    resources.rbImg[0] = loadImage("asset/rb.png");
    for (let i = 0; i < 12; i++)
        resources.catImg[i] = loadImage("asset/cat/cat" + i + ".png");
    for (let i = 0; i < 6; i++)
        resources.starImg[i] = loadImage("asset/star/star" + i + ".png");
}

function setup() {
   
    createCanvas(window.innerWidth, window.innerHeight);
    frameRate(30);
}

function draw() {
   
    background(9, 37, 77)；
    //image(resources.rbImg[0]);
}

文件里彩虹猫的猫图片一共有12张，彩虹是一张，星星是6张，大致思路就是命名一下游戏过程中的两个主要对象彩虹猫（因为猫和彩虹基本都是一起用到，所以就用一个对象了）和背景的星星，然后preload()预加载资源文件,setup()创建画布并设置帧率，draw()暂时只设置背景颜色，如果顺利的话对应的html文件打开来应该是蓝色的背景。之后resources结构体里的内容还会不断扩充，这里我打算先实现基本功能所以暂时不添加其它内容。

之后就要写粒子系统了，我们创建一个Particle.js文件，代码如下：

// Particle.js

class Particle {
   
    constructor(image) {
   
        this.image = image;
        this.totalFrames = image.length;
        this.index = Math.round(random(0, this.totalFrames));
        this.position = null;
        this.speed = null;
    }

    birth(pos) {
   
        this.position = pos;
    }

    update() {
   
        this.position[0] -= this.speed;
    }

    isDead() {
   
        return