js锅打灰太狼小游戏

能跑就行，。
已于 2022-06-17 08:50:05 修改
阅读量170
点赞数 1
分类专栏：写杂文章标签： javascript 前端 css3
于 2022-06-17 08:48:53 首次发布
本文链接：https://blog.csdn.net/whtis666/article/details/125326776
版权
写杂专栏收录该内容
10 篇文章 0 订阅
订阅专栏
js锅打灰太狼小游戏

相关图片资源以及源码：
https://download.csdn.net/download/whtis666/85669157
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>锅打灰太狼</title>
  <style>
    .game {
      width: 320px;
      height: 480px;
      position: relative;
      background-image: url(./img/game_bg.jpg);
      /* background-size: cover; */
      margin: 0 auto;
      border: 1px solid black;
    }

    .score {
      position: absolute;
      left: 60px;
      top: 8px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #7da9e6;
      font-size: 25px;
    }

    .progress {
      width: 180px;
      height: 16px;
      position: absolute;
      left: 63px;
      top: 66px;
      border-radius: 10px;
      background-image: url(./img/progress.png);
    }
    /* .progress::after {
      content: '58';
      position: absolute;
      left: 180px;
      top: -2px;
      width: 20px;
      height: 20px;
      background-color: pink;
    } */
  </style>
</head>

<body>

</body>
<script>
  // 游戏时间
  let time = 60
  // 获取 body节点
  let body = document.querySelector('body')
  // 构造函数 game  创建元素 设置背景
  function Game() {
    this.ele = document.createElement('div')
    this.ele.className = 'game'
    // 分数
    this.scoreEle = document.createElement('div')
    this.scoreEle.className = 'score'
    this.scoreEle.innerHTML = score
    this.ele.append(this.scoreEle)
    // 进度条
    this.progress = document.createElement('div')
    this.progress.className = 'progress'
    
    this.ele.append(this.progress)
    this.timer = setInterval(function () {
      time--
      this.progress.style.width = 180 * (time / 60) + 'px'
      if (time < 0) {
        alert('时间到！游戏结束！')
        time = 61
      }
    }.bind(this), 1000);
  }
  // 灰太狼 小灰灰可以出现的位置坐标  就是背景图中坑洞的坐标
  let pos_arr = [
    { x: 96, y: 191 },
    { x: 90, y: 114 },
    { x: 109, y: 273 },
    { x: 21, y: 293 },
    { x: 198, y: 295 },
    { x: 191, y: 211 },
    { x: 8, y: 220 },
    { x: 10, y: 159 },
    { x: 180, y: 140 }
  ]
  // 分数
  let score = 0
  // 构造函数 Wolf 
  function Wolf(pos, type) {
    this.ele = document.createElement('div')
    // 狼的位置
    this.x = pos.x
    this.y = pos.y
    // 宽高
    this.w = 108
    this.h = 101
    // 样式
    this.ele.style.position = 'absolute'
    this.ele.style.width = this.w + 'px'
    this.ele.style.height = this.h + 'px'
    // this.ele.style.border = "1px solid red"
    this.ele.style.left = this.x + 'px'
    this.ele.style.top = this.y + 'px'

    // 给狼添加 状态：生长 拍打 下落 死亡   类型: 小灰灰 灰太狼   还有背景图的索引
    this.type = type
    this.state = 0 // 0生长  1下落  2拍打  3死亡
    this.imgIndex = 0
    this.ele.style.backgroundImage = "url(./img/" + this.type + this.imgIndex + ".png)"

    // 给狼对象的元素增添点击事件
    this.ele.onclick = function () {
      this.state = 2 // 拍打状态
      this.imgIndex = 6
      // 计算分数
      if (this.type == 'h') {
        score += 10
      } else {
        score -= 10
      }
      // 计算好的分数展示到页面
      game.scoreEle.innerHTML = score
    }.bind(this)

    // 狼移动的方法
    this.move = function () {
      if (this.state == 0) {
        // 生长
        this.ele.style.backgroundImage = "url(./img/" + this.type + this.imgIndex + ".png)"
        this.imgIndex++
        if (this.imgIndex > 5) {
          this.state = 1
        }
        // console.log(this.imgIndex);
      } else if (this.state == 1) {
        // 下落
        this.imgIndex--
        this.ele.style.backgroundImage = "url(./img/" + this.type + this.imgIndex + ".png)"
        if (this.imgIndex <= 0) {
          // 让状态转化为死亡
          this.state = 3
        }

      } else if (this.state == 2) {
        // 拍打状态
        this.ele.style.backgroundImage = "url(./img/" + this.type + this.imgIndex + ".png)"
        this.imgIndex++
        if (this.imgIndex >= 10) {
          this.state = 3
        }
      }
    }
  }

  // 控制造狼的速度 以及狼移动速度
  let gameNum = 1
  let moveSpeed = 4
  let generSpeed = 60

  let langWo = [] // 狼窝，生成的狼对象都 push进去langWo

  // 控制造狼速度 控制狼的移动速度
  function gameFn() {
    gameNum++
    // 造狼的速度
    if (gameNum % generSpeed == 0) {
      let zuoBiao = pos_arr[my_random(0, pos_arr.length)]
      let type = my_random(1, 100) > 20 ? 'h' : 'x'
      let w = new Wolf(zuoBiao, type)
      // 展示到页面
      game.ele.append(w.ele)
      // 生成的加入到狼窝中
      langWo.push(w)
    }

    // 狼移动的速度
    if (gameNum % moveSpeed == 0) {
      // 遍历狼窝中的狼
      for (let i = 0; i < langWo.length; i++) {
        langWo[i].move()
        if (langWo[i].state == 3) {
          // 狼成为死亡的状态
          langWo[i].ele.remove() // 从页面上删除
          langWo.splice(i, 1) // 从langWo数组中删除
        }
      }
    }

    if (gameNum >= 100000) {
      gameNum = 1
    }

    // 动画帧 相当于重复执行 gameFn
    requestAnimationFrame(gameFn)
  }

  // 加载所有的图片资源
  // 所有图片资源的地址
  let imgStrArr = [
    "./img/h0.png",
    "./img/h1.png",
    "./img/h2.png",
    "./img/h3.png",
    "./img/h4.png",
    "./img/h5.png",
    "./img/h6.png",
    "./img/h7.png",
    "./img/h8.png",
    "./img/h8.png",
    "./img/x0.png",
    "./img/x1.png",
    "./img/x2.png",
    "./img/x3.png",
    "./img/x4.png",
    "./img/x5.png",
    "./img/x6.png",
    "./img/x7.png",
    "./img/x8.png",
    "./img/x9.png",
    "./img/game_bg.jpg"
  ]
  let imgObjArr = []
  function loadAll() {
    for (let i = 0; i < imgStrArr.length; i++) {
      let image = new Image()
      image.src = imgStrArr[i]
      image.onload = function () {
        imgObjArr.push(this)
        let persent = parseInt(imgObjArr.length / imgStrArr.length * 100)
        console.log("加载中。。。。" + persent + "%");
        if (persent == 100) {
          console.log('加载成功！');
          // 启动游戏
          startGame()
        }
      }
    }
  }

  // 启动游戏
  let game = null
  function startGame() {
    // 创建game对象 将背景图设置好放在页面上
    game = new Game()
    body.append(game.ele)

    gameFn()
  }

  // 调用加载所有资源的函数
  loadAll()
  // 先加载图片资源 不至于图片在变换时出现频闪现象

  // 随机值函数
  function my_random(min, max) {
    return parseInt(Math.random() * (max - min) + min)
  }
</script>

</html>