【P5JS教学】对战游戏教程之背景5：如何让线段循环移动-面向过程

最新推荐文章于 2024-05-30 08:50:03 发布

one行feng

最新推荐文章于 2024-05-30 08:50:03 发布

阅读量22

点赞数 1

分类专栏：对战游戏教程文章标签：游戏 javascript 前端开发语言 java

本文链接：https://blog.csdn.net/weixin_52345129/article/details/134175436

版权

对战游戏教程专栏收录该内容

14 篇文章 0 订阅

订阅专栏

// 当前方法是模拟新手所写的思路，下一篇教程，将以更简单的方式实现。
var line1yPosition = 0;
var line2yPosition = 0;
var line3yPosition = 0;
var line4yPosition = 0;
var line5yPosition = 0;
var line6yPosition = 0;
var line7yPosition = 0;
var line8yPosition = 0;
var line9yPosition = 0;
var line10yPosition = 0;
var Dir1yPosition = 1;
var Dir2yPosition = 1;
var Dir3yPosition = 1;
var Dir4yPosition = 1;
var Dir5yPosition = 1;
var Dir6yPosition = 1;
var Dir7yPosition = 1;
var Dir8yPosition = 1;
var Dir9yPosition = 1;
var Dir10yPosition = 1;
function setup() {
        // 创建居中画布
        var centerDiv = createDiv();
        centerDiv.id('centerDiv');
        centerDiv.style('text-align', 'center');
        centerDiv.parent('app');
        // 画布大小定义为 500x500 px
        var app = createCanvas(500, 500);
        app.parent('centerDiv');
        // 设置画布背景颜色
        background(200);
        // draw函数需要循环
        // noLoop();
}
function draw(){
    // 每次循环的时候，需要刷新页面，否则上一次绘制的线段会保留在画布上
    background(200);
    line1();
    line2();
    line3();
    line4();
    line5();
    line6();
    line7();
    line8();
    line9();
    line10();
}
function line1() {
    if(1*50+line1yPosition >= 500 || 1*50+line1yPosition <= 0) {
        Dir1yPosition = -Dir1yPosition;
    }
    line1yPosition = line1yPosition + Dir1yPosition*1;
    line(0, 1*50+line1yPosition, 500, 1*50+line1yPosition);
}
function line2() {
    if(2*50+line2yPosition >= 500 || 2*50+line2yPosition <= 0) {
        Dir2yPosition = -Dir2yPosition;
    }
    line2yPosition = line2yPosition + Dir2yPosition*1;
    line(0, 2*50+line2yPosition, 500, 2*50+line2yPosition);
}
function line3() {
    if(3*50+line3yPosition >= 500 || 3*50+line3yPosition <= 0) {
        Dir3yPosition = -Dir3yPosition;
    }
    line3yPosition = line3yPosition + Dir3yPosition*1;
    line(0, 3*50+line3yPosition, 500, 3*50+line3yPosition);
}
function line4() {
    if(4*50+line4yPosition >= 500 || 4*50+line4yPosition <= 0) {
        Dir4yPosition = -Dir4yPosition;
    }
    line4yPosition = line4yPosition + Dir4yPosition*1;
    line(0, 4*50+line4yPosition, 500, 4*50+line4yPosition);
}
function line5() {
    if(5*50+line5yPosition >= 500 || 5*50+line5yPosition <= 0) {
        Dir5yPosition = -Dir5yPosition;
    }
    line5yPosition = line5yPosition + Dir5yPosition*1;
    line(0, 5*50+line5yPosition, 500, 5*50+line5yPosition);
}
function line6() {
    if(6*50+line6yPosition >= 500 || 6*50+line6yPosition <= 0) {
        Dir6yPosition = -Dir6yPosition;
    }
    line6yPosition = line6yPosition + Dir6yPosition*1;
    line(0, 6*50+line6yPosition, 500, 6*50+line6yPosition);
}
function line7() {
    if(7*50+line7yPosition >= 500 || 7*50+line7yPosition <= 0) {
        Dir7yPosition = -Dir7yPosition;
    }
    line7yPosition = line7yPosition + Dir7yPosition*1;
    line(0, 7*50+line7yPosition, 500, 7*50+line7yPosition);
}
function line8() {
    if(8*50+line8yPosition >= 500 || 8*50+line8yPosition <= 0) {
        Dir8yPosition = -Dir8yPosition;
    }
    line8yPosition = line8yPosition + Dir8yPosition*1;
    line(0, 8*50+line8yPosition, 500, 8*50+line8yPosition);
}
function line9() {
    if(9*50+line9yPosition >= 500 || 9*50+line9yPosition <= 0) {
        Dir9yPosition = -Dir9yPosition;
    }
    line9yPosition = line9yPosition + Dir9yPosition*1;
    line(0, 9*50+line9yPosition, 500, 9*50+line9yPosition);
}
function line10() {
    if(10*50+line10yPosition >= 500 || 10*50+line10yPosition <= 0) {
        Dir10yPosition = -Dir10yPosition;
    }
    line10yPosition = line10yPosition + Dir10yPosition*1;
    line(0, 10*50+line10yPosition, 500, 10*50+line10yPosition);
}
new p5();

对战教程实例

p5.js | 对战小游戏