融入动画技术的交互应用

在学习了代码本色这本书以后，通过在网上寻找各种例子进行学习，应用了向量，粒子系统，力，碰撞检测，随机生成物体等，实现了一个简易的交互小程序

 

利用方向键和空格键实现移动等交互

function keyPressed() {
    if (key == ' ') {
        ship.lasers.push(new Laser(ship.pos, ship.heading));
    } else if (keyCode == RIGHT_ARROW) {
        ship.setRotation(0.1);
    } else if (keyCode == LEFT_ARROW) {
        ship.setRotation(-0.1);
    } else if (keyCode == UP_ARROW) {
        ship.boosting = true;
    } else if (keyCode == ENTER && message == "Game Over") {
        restart("let's play again!", initastnum);
    }
}

主要代码

function setup() {
    createCanvas(windowWidth, windowHeight);
    textFont("Courier");
    ship = new Ship();
    initialize("let's play!", initastnum);
}

function draw() {
    background(0);
    for (var i = debris.length - 1; i >= 0; i--) {
        debris[i].update();
        debris[i].render();
        if (debris[i].transparency <= 0) {
            debris.splice(i, 1);
        }
    }

    for (var i = energy.length - 1; i >= 0; i--) {
        energy[i].update();
        energy[i].render();
        energy[i].edges();
        if (ship.hit(energy[i]) && !ship.safe) {
            ship.safe = true;
            setTimeout(function() {
                ship.safe = !ship.safe;
            }, 2000);
            ship.getBonus();
            energy[i].alive = false;
        };
        if (energy[i].life <= 20) {
            energy[i].alive = false;
        };
        if (!energy[i].alive) {
            energy.splice(i, 1);
        };
    }

    if (ship.alive) {
        ship.update();
        ship.render();
        ship.edges();
    } else {
        console.log("Game Over");
        message = "Game Over";
        //restart();
    };

    if (asteroids.length == 0) { // player cleared the level
        astnum += 3;
        initialize("You Win! Level up!", astnum);
    }

    for (var i = asteroids.length - 1; i >= 0; i--) {
        asteroids[i].render();
        asteroids[i].update();
        asteroids[i].edges();
        if (ship.hit(asteroids[i]) && !ship.safe) {
            ship.danger = true;
            setTimeout(function() {
                ship.danger = !ship.danger;
            }, 100);
            ship.getDamage(asteroids[i]);
            console.log("Damaging the shield " + ship.shieldLevel);
            asteroids[i].explode();
            asteroids.splice(i, 1);
        }
    }

    ship.interface();
}
function restart(messageText, newastnum) {
    ship.init();
    gameLevel = 1;
    asteroids = [];
    energy = [];
    message = messageText;
    astnum = newastnum;
    basicinit();
}

function basicinit() {
    for (var i = 0; i < astnum; i++) {
        asteroids.push(new Asteroid());
    }
    ship.shieldLevel == 100;
    ship.safe = true;
    setTimeout(function() {
        ship.safe = false;
        message = "";
    }, 4000);
}


function keyReleased() {
    if (keyCode == RIGHT_ARROW || keyCode == LEFT_ARROW) {
        ship.setRotation(0);
    } else if (keyCode == UP_ARROW) {
        ship.boosting = false;
    }
}

代码本色一书介绍了用计算机模拟自然系统涉及的编程策略与技术，涵盖了基本的数学和物理概念，以及可视化地展示模拟结果所需的高级算法。读者将从构建基本的物理引擎开始，一步一步地学习如何创建智能移动的物体和复杂的系统，为进一步探索生成设计奠定基础。相关的知识点包括力、三角、分形、细胞自动机、自组织和遗传算法。读之受用无穷。