js实现妖怪

JavaScript 实现“妖怪”概念

在编程中，"妖怪"可以指代一种虚构的角色或实体。以下是通过JavaScript实现一个简单的妖怪对象的方法：

class Monster {
  constructor(name, power, health) {
    this.name = name;
    this.power = power;
    this.health = health;
  }

  attack() {
    return `${this.name} attacks with ${this.power} power!`;
  }

  takeDamage(damage) {
    this.health -= damage;
    if (this.health <= 0) {
      return `${this.name} has been defeated!`;
    }
    return `${this.name} has ${this.health} health remaining.`;
  }
}

// 创建一个妖怪实例
const goblin = new Monster('Goblin', 10, 50);
console.log(goblin.attack());
console.log(goblin.takeDamage(15));

妖怪动画效果

使用HTML和CSS配合JavaScript创建妖怪动画：

<div id="monster" class="monster"></div>

<style>
.monster {
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%;
  position: absolute;
  animation: float 3s infinite alternate;
}

@keyframes float {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}
</style>

<script>
const monster = document.getElementById('monster');
monster.addEventListener('click', () => {
  monster.style.backgroundColor = 'red';
  setTimeout(() => {
    monster.style.backgroundColor = 'green';
  }, 500);
});
</script>

妖怪游戏角色

实现一个简单的妖怪游戏角色，包含移动和攻击功能：

const gameMonster = {
  x: 0,
  y: 0,
  speed: 5,
  direction: 'right',

  move() {
    if (this.direction === 'right') {
      this.x += this.speed;
    } else {
      this.x -= this.speed;
    }
  },

  changeDirection() {
    this.direction = this.direction === 'right' ? 'left' : 'right';
  },

  render() {
    console.log(`Monster is at (${this.x}, ${this.y}) facing ${this.direction}`);
  }
};

// 游戏循环示例
setInterval(() => {
  gameMonster.move();
  gameMonster.render();
  if (Math.random() > 0.8) {
    gameMonster.changeDirection();
  }
}, 100);

妖怪AI行为

实现简单的妖怪AI决策逻辑：

class MonsterAI {
  constructor() {
    this.states = ['idle', 'patrol', 'chase', 'attack'];
    this.currentState = 'idle';
    this.detectionRange = 100;
  }

  update(playerDistance) {
    if (playerDistance < this.detectionRange) {
      this.currentState = 'chase';
      if (playerDistance < 10) {
        this.currentState = 'attack';
      }
    } else {
      this.currentState = Math.random() > 0.5 ? 'idle' : 'patrol';
    }

    console.log(`Monster is ${this.currentState}`);
  }
}

const monsterAI = new MonsterAI();
// 模拟玩家距离变化
setInterval(() => {
  const distance = Math.floor(Math.random() * 150);
  monsterAI.update(distance);
}, 2000);

这些示例展示了如何使用JavaScript实现不同类型的妖怪概念，从简单的对象到游戏角色和AI行为。可以根据需要扩展这些基础实现，添加更多功能如特殊能力、动画效果或复杂的决策逻辑。