0

我正在和一群朋友制作视频游戏。我试图让它与分屏一起工作，但我不知道如何阻止两个不同的屏幕重叠。我不知道我是否应该使用 createGraphics() 或以某种方式获取另一个画布。这将如何工作？

我的代码：

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <script src="snow.js"></script>
    <script src="ice_cream.js"></script>
    <script src="candy_cane_step.js"></script>
    <script src="startingplatform.js"></script>
    <script src="character1.js"></script>
    <script src="candy_cane.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
    
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

sketch.js（这是真正重要的）

//noprotect
var translation;
var pos;
var test = [];
var t = 0;
var char2pos;
var translation2;


function moveCharacter() {
  if (keyIsDown(UP_ARROW)) {
    translation.add(0, 3);
    pos.add(0, -3);
  } 
  
  if (keyIsDown(DOWN_ARROW)) {
    translation.add(0, -3);
    pos.add(0, 3);
  } 
  
  if (keyIsDown(LEFT_ARROW)) {
    translation.add(2, 0);
    pos.add(-2, 0);
  }
  
  if (keyIsDown(RIGHT_ARROW)) {
    translation.add(-2, 0);
    pos.add(2, 0);
  }
  if (keyIsDown(87)) {
    translation2.add(0, 3);
    char2pos.add(0, -3);
  } 
  
  if (keyIsDown(65)) {
    translation2.add(2, 0);
    char2pos.add(-2, 0);
  }
  
  if (keyIsDown(83)) {
    translation2.add(0, -3);
    char2pos.add(0, 3);
  }
  if (keyIsDown(68)) {
    translation2.add(-2, 0);
    char2pos.add(2, 0);
  }
}

function setup() {
  createCanvas(800, 450);
  angleMode(DEGREES);
  rectMode(CENTER);
  translation = createVector(200, 225);
  translation2 = createVector(400);
  pos = createVector(0, 0);
  char2pos = createVector(0, 0);
  for(var i = 0; i < 100; i ++) {
    test[i] = new Snow();
  }
}

function draw() {
  background(220);
  translate(translation);
  rectMode(CENTER);
  fill(255);
  rect(0, 0, 8000, 4500);
  starting_platform();
  character();
  translate(translation2);
  starting_platform();
  character2();
  for(var i = 0; i < test.length; i ++) {
    test[i].show();
    test[i].move();
    test[i].check();
  }
  test[0].wind_speed_return();
  moveCharacter();
  t+= 0.0005;
}

这是代码的其余部分，我只是在其中绘制东西 - 我删除了很多，所以没有太多，但想法是一样的

起始平台.js

function starting_platform() {
  rectMode(CENTER);
  fill(255, 198, 41);
  //stroke(0);
  for(var i = 0; i < 9; i ++) {
    rect(i*30-120, 0, 29, 300, 15);
  }
  fill(224, 174, 36);
  rectMode(CORNER);
  for(var ij = 0; ij < 4; ij ++) {
    rect(-165, -120 + (ij*60), 61, 29, 15, 0, 0, 15);
    rect(-76, -120 + (ij*60), 32, 29);
    rect(-16, -120 + (ij*60), 32, 29);
    rect(44, -120 + (ij*60), 32, 29);
    rect(104, -120 + (ij*60), 61, 29, 0, 15, 15, 0);
  rect(-165, -90 + (ij*60), 31, 29, 15, 0, 0, 15);
  rect(-106, -90 + (ij*60), 32, 29);
  rect(-46, -90 + (ij*60), 32, 29);
  rect(14, -90 + (ij*60), 32, 29);
  rect(74, -90 + (ij*60), 32, 29);
  rect(134, -90 + (ij*60), 31, 29, 0, 15, 15, 0);
  }
  
}

character1.js

function character() {
  stroke(200, 0, 0);
  strokeWeight(3);
  fill(255, 0, 0);
  ellipse(pos.x, pos.y, 20, 20);
  noStroke();
}

function character2() {
  stroke(200, 0, 0);
  strokeWeight(3);
  fill(255, 0, 0);
  ellipse(pos.x, pos.y, 20, 20);
  noStroke();
}

如果有什么我忘记了（我确定有），一定要告诉我。感谢您的帮助！

4

0 回答 0