HTML5/P5.js宇宙飞船和外星人动画

小宇航员家族遭遇飞碟和外星人：）

html5, space

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3996
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var sketch = function(p5) {
    p5.size(400, 400);
    p5.background(15, 16, 26);
    var time = 1;
    //coordinates are negative to have squid entry
    //offset from hero entry. 
    //TODO: find a more elegant solution.
    var xPos_star = -400;
    var yPos_star = -400;

var xPos_ship = -80;
    var yPos_ship = 300;
    var audio = new Audio('https://www.kasandbox.org/programming-sounds/rpg/battle-spell.mp3');

var heros = [p5.loadImage("https://www.kasandbox.org/third_party/javascript-khansrc/live-editor/build/images/space/rocketship.png"), p5.loadImage("https://www.kasandbox.org/third_party/javascript-khansrc/live-editor/build/images/space/octopus.png"), p5.loadImage("https://www.kasandbox.org/third_party/javascript-khansrc/live-editor/build/images/space/beetleship.png")];
    var hero_index = 0;

var star = p5.loadImage("https://www.kasandbox.org/third_party/javascript-khansrc/live-editor/build/images/cute/Star.png");
    var spaceSquid = p5.loadImage("https://www.kasandbox.org/third_party/javascript-khansrc/live-editor/build/images/avatars/orange-juice-squid.png");
    var starCreature = function(x, y) {
        p5.image(star, x, y);
        p5.image(spaceSquid, x, y + 5, 100, 100);
    };
    //grab a hero image from heros array
    var hero = function(pic_index, x) {
        p5.image(heros[pic_index], x, 100, 100, 100);

};
    //use random dots to create space sky
    var sky = function() {
        var randoX = p5.random(1);
        var randoY = p5.random(10);
        var rando_width1 = p5.map(randoX, 0, 1, 0, p5.width);
        var rando_height1 = p5.map(randoY, 0, 10, 0, p5.height);

var rando_width2 = p5.map(randoY, 0, 10, 0, p5.width);
        var rando_height2 = p5.map(randoX, 0, 1, 0, p5.height);

// //blue dots
        p5.strokeWeight(3);
        p5.stroke(255 * randoX, 255 * randoY, 255);
        p5.point(rando_width1, rando_height1);

//red dots
        p5.strokeWeight(2);
        p5.stroke(255, 30, 255 * randoX);
        p5.point(rando_width2, rando_height2);

};
    //event loop
    p5.draw = function() {
        sky();
        //Create lag for a flickering, retro affect.
        if (time % 2 === 0) {
            p5.background(3, 7, 36);
        }
        //reset star/hero positions
        if (xPos_ship === p5.width) {
            xPos_star = -400;
            yPos_star = -400;
            xPos_ship = -80;
            yPos_ship = 300;
            hero_index = (hero_index + 1) % heros.length;
        }
        //play sound when Space Squid appears. Use range to ensure sound plays only once per entry.
        if (xPos_star >= 0 && xPos_star <= 3) {
            audio.play();
        }
        starCreature(xPos_star, yPos_star);
        hero(hero_index, xPos_ship, yPos_ship);

xPos_star += 1.80;
        yPos_star += 2;
        xPos_ship += 1;
        time += 1;

};

var canvas = document.getElementById("processing");
var processing = new Processing(canvas, sketch);

编译

CSS

HTML

小宇航员家族遭遇飞碟和外星人：）

html5, space

编辑器支持Emmet

快捷键

小宇航员家族遭遇飞碟和外星人：）

html5, space

HTML5 P5.js 彩虹雨 | 下雨动画

HTML5 P5.js 自动行走的蜘蛛AI机器人

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：