p5. js Изменение изображения при нажатии и выдаче с мигающим символом - PullRequest
Новая
       10

p5. js Изменение изображения при нажатии и выдаче с мигающим символом

0 голосов
/ 16 февраля 2020

Цель состоит в том, чтобы создать игру по исправлению ошибок. Есть счетчик и таймер. Проблемы заключаются в том, что 1) ошибки мигают, когда их не должно быть, и 2) когда щелкают по каждой ошибке, предполагается, что изображение ошибки исправлено, и я сохранил его как имя изображения: sprite_bug7.png. Я не уверен, как решить обе проблемы, и работал весь день, чтобы понять это! 

var bug = [];
var count = 10;
let timer = 30;
var counter = 0;
var score = 0;`enter code here`
var squish;

function preload(){
    for(var i = 0; i < count; i++){
        bug[i] = new Crawler("bugs.png", random(610), random(400), 
        random(-1,1));
        squish = loadImage('sprite_bug7.png');
      }
}
  function setup() {
    createCanvas(640,480);
    imageMode(CENTER)
  }

function draw(){
  background(255);
  for(var i = 0; i < count; i++){   
    bug[i].draw();
  }
  text("Score: " + score, 20, 30);
  text("Time Left: " + timer, 20, 45);
  if ((frameCount % 60 == 0) && (timer > 0)){
    timer--;
  }
  if (timer == 0){
    text("GAME OVER", 300, 250);
    text("You scored: " + score, 300, 265)
  }
}

function mouseClicked() {
  for (var i = 0; i < count; i++){
    bug[i].kill(mouseX, mouseY);
  }
}

function Crawler(imageName, x, y, moving){
    this.spriteSheet = loadImage(imageName);
    this.frame = 0;
    this.x = x;
    this.y = y;
    this.moving = moving;
    this.facing = moving;

    this.kill = function(x,y){
      if((this.x-30<x && x < this.x+30 && this.y-30<y && y<this.y+30)|| 
        (timer==0)){
        this.moving = 0;
        score = score + 1;
        this.bug = squish;
        }
        if (this.alive == 1){
          this.alive = 0;
        }
    }


    this.draw = function(){
        push();
        translate(this.x,this.y);
        if (this.facing < 0){
            scale(-1.0, 1.0);
         }
        if (this.moving == 0){
          image(this.spriteSheet, 0, 0, 100, 100, 100, 0, 100, 100);//size,size,start,start,end,end
         } 
        else{
            if (this.frame == 0){ 
            image(this.spriteSheet, 0, 0, 100, 100, 200, 0, 100, 100);//size,size,start,start,end,end
            }
            if (this.frame == 1){ 
            image(this.spriteSheet, 0, 0, 100, 100, 300, 0, 100, 100);//size,size,start,start,end,end
            }
            if (this.frame == 2){ 
            image(this.spriteSheet, 0, 0, 100, 100, 400, 0, 100, 100);//size,size,start,start,end,end
            }
            if (this.frame == 3){ 
            image(this.spriteSheet, 0, 0, 100, 100, 500, 0, 100, 100100);//size,size,start,start,end,end
            }
            if (this.frame == 4){ 
            image(this.spriteSheet, 0, 0, 100, 100, 600, 0, 100, 100);//size,size,start,start,end,end
            }
            if (this.frame == 5){ 
            image(this.spriteSheet, 0, 0, 100, 100, 700, 0, 100, 100);//size,size,start,start,end,end
            }
            if (this.frame == 6){ 
            image(this.spriteSheet, 0, 0, 100, 100, 800, 0, 100, 100);//size,size,start,start,end,end
            }
            if (this.frame == 7){ 
            image(this.spriteSheet, this.x, this.y, 100, 100, 800, 0, 100, 100);//size,size,start,start,end,end
            }
            if (frameCount % 4 == 0){
            this.frame = (this.frame+1)%8;
            this.x = this.x + this.moving *6;
            }
            if(this.x < 30){
                this.moving = +1;
                this.facing = +1;
            }
            if(this.x> width-30){
                this.moving = -1;
                this.facing = -1;
            }
          } 
         pop();
       }
  }

1 Ответ

0 голосов
/ 16 февраля 2020

1) Ошибки мигают из-за координат, которые вы используете для рисования изображения в «последнем» кадре. Вы уже используете translate, поэтому, когда вы используете this.x и this.y в последнем кадре, изображение «скачет» и производит мигающий эффект.

2) Ошибка не отображается сжатое изображение, потому что оно на самом деле не рисуется в любой точке. У вас есть строка this.bug = squish, но вы никогда не используете ее в методе image.

У меня нет доступа к вашим изображениям, поэтому я сделал некоторые предположения, чтобы создать фрагмент: 

let timer = 30;
var counter = 0;
var score = 0;`enter code here`
var squish;

const count = 3
let bug = new Array(3)

function preload(){

    for(var i = 0; i < count; i++){
        //bug[i] = new Crawler("bugs.png", random(610), random(400), 
        bug[i] = new Crawler("https://picsum.photos/800/100", random(610), random(400), 
        random(-1,1));
        // squish = loadImage('sprite_bug7.png');
        squish = createGraphics(100, 100)
        squish.background('green')
      }
}
  function setup() {
    createCanvas(640,480);
    imageMode(CENTER)
  }

function draw(){
  background(255);
  for(var i = 0; i < count; i++){   
    bug[i].draw();
  }
  text("Score: " + score, 20, 30);
  text("Time Left: " + timer, 20, 45);
  if ((frameCount % 60 == 0) && (timer > 0)){
    timer--;
  }
  if (timer == 0){
    text("GAME OVER", 300, 250);
    text("You scored: " + score, 300, 265)
  }
}

function mouseClicked() {
  for (var i = 0; i < count; i++){
    bug[i].kill(mouseX, mouseY);
  }
}

function Crawler(imageName, x, y, moving){
    this.spriteSheet = loadImage(imageName);
    this.frame = 0;
    this.x = x;
    this.y = y;
    this.moving = moving;
    this.facing = moving;

    this.kill = function(x,y){
      if((this.x-30<x && x < this.x+30 && this.y-30<y && y<this.y+30)|| 
        (timer==0)){
        this.moving = 0;
        score = score + 1;
        // this.bug = squish;
        this.spriteSheet = squish;
        }
        if (this.alive == 1){
          this.alive = 0;
        }
    }


    this.draw = function(){
        push();
        translate(this.x,this.y);
        if (this.facing < 0){
            scale(-1.0, 1.0);
         }
        if (this.moving == 0){
          /* Made some changes to the coordinates */
          image(this.spriteSheet, 0, 0, 100, 100, 0, 0, 100, 100);//size,size,start,start,end,end
         } 
        else{
            if (this.frame == 0){ 
            image(this.spriteSheet, 0, 0, 100, 100, 0, 0, 100, 100);//size,size,start,start,end,end
            }
            if (this.frame == 1){ 
            image(this.spriteSheet, 0, 0, 100, 100, 100, 0, 100, 100);//size,size,start,start,end,end
            }
            if (this.frame == 2){ 
            image(this.spriteSheet, 0, 0, 100, 100, 200, 0, 100, 100);//size,size,start,start,end,end
            }
            if (this.frame == 3){ 
            image(this.spriteSheet, 0, 0, 100, 100, 300, 0, 100, 100);//size,size,start,start,end,end
            }
            if (this.frame == 4){ 
            image(this.spriteSheet, 0, 0, 100, 100, 400, 0, 100, 100);//size,size,start,start,end,end
            }
            if (this.frame == 5){ 
            image(this.spriteSheet, 0, 0, 100, 100, 500, 0, 100, 100);//size,size,start,start,end,end
            }
            if (this.frame == 6){ 
            image(this.spriteSheet, 0, 0, 100, 100, 600, 0, 100, 100);//size,size,start,start,end,end
            }
            if (this.frame == 7){ 
            // image(this.spriteSheet, this.x, this.y, 100, 100, 800, 0, 100, 100);
            image(this.spriteSheet, 0, 0, 100, 100, 700, 0, 100, 100);//size,size,start,start,end,end
            }
            if (frameCount % 4 == 0){
            this.frame = (this.frame+1)%8;
            this.x = this.x + this.moving *6;
            }
            if(this.x < 30){
                this.moving = +1;
                this.facing = +1;
            }
            if(this.x> width-30){
                this.moving = -1;
                this.facing = -1;
            }
          } 
         pop();
       }
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>
...