Javascript[17天] JS实现Chrome的彩蛋小游戏(一)

0

[17天] JS实现Chrome的彩蛋小游戏(一)

阅读:208 时间:2022年06月02日

Chrome浏览器断网后,会出现一个小恐龙跑跳过障碍的小彩蛋游戏。也想做一个试试。一、先实现一个PNG帧动画小人代码结构:index.html<!DOCTYPE html> <html lang="en">...

Chrome浏览器断网后,会出现一个小恐龙跑跳过障碍的小彩蛋游戏。也想做一个试试。

一、先实现一个PNG帧动画小人

chrome-capture (8).gif

代码结构:

微信截图_20220602113042.jpg

index.html

<!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>Document</title>
  <link rel="stylesheet" href="./style.css"/>
</head>
<body>
  <div class="window">
    <canvas id="canvas"></canvas>
  </div>
  <button onclick="handleRun()">run</button>
  <button onclick="handleJump()">jump</button>
  <button onclick="handleStop()">stop</button>
 
  <script src="./Gril.js"></script>
  <script src="./script.js"></script>
</body>
</html>

style.css

html, body {
  margin: 0;
  padding: 0;
  background-color: #2c3442;
  height: 100%;
  overflow: hidden;
}

@keyframes run {
  from {
    background-position: 0 bottom;
  }
  to {
    background-position: -10000px bottom;
  }
}
.window {
  height: 70vh;
  position: relative;
  background: url(./images/d.png) left bottom repeat-x;
  transition: all 0.2s;
}

#canvas {
  position: absolute;
  bottom: 90px;
  left: 40%;
  transition: all 0.2s;
}

Gril.js

class Gril{
  constructor() {
    this.status = 'stop'
    this.start = 1
    this.end = 1
    this.current = this.end
  }

  run() {
    this.current = this.end
    this.start = 1
    this.end = 14
    this.status = 'run'
  }

  jump() {
    this.current = this.end
    this.start = 15
    this.end = 17
    this.status = 'jump'
  }
  next() {
    this.current--
    if (this.current < this.start) {
      if (this.status === 'run') {
        this.current = this.end
      } else if (this.status === 'jump') {
        this.current = this.end
      }
    }
    return this.current
  }
}
class Animate{
  constructor(dom) {
    this.width = 950
    this.height = 700
    this.col = 5
    this.row = 4
    this.frames = 17
    this.currentFrame = 0
    this.dom = dom
    this.speed = 1
    this.caheCanvas = null
    this.isStop = false
    this.total = 0
    this.gril = new Gril()
    this.init()
  }

  init() {
    this.dom.width = this.width / this.col
    this.dom.height = this.height / this.row
    this.caheCanvas = document.createElement('canvas')
    this.caheCanvas.width = this.width
    this.caheCanvas.height = this.height
    const caheContext = this.caheCanvas.getContext('2d')
    // document.body.appendChild(this.caheCanvas)
    const img = new Image()
    img.onload = () => {
      caheContext.drawImage(img, 0, 0)
      this.ready()
    }
    img.src = './images/grils.png'
  }

  getFrame(index = 1) {
    const width = this.width / this.col
    const height = this.height / this.row
    const row = Math.ceil(index / this.col)
    const col = index % this.col || this.col
    const rect = [width * (col - 1), height * (row - 1), width, height]
    const caheContext = this.caheCanvas.getContext('2d')
    const data = caheContext.getImageData(...rect)
    return data
  }

  setFrame(data) {
    const ctx = this.dom.getContext('2d')
    ctx.putImageData(data, 0, 0)
  }

  render() {
    const frame = this.gril.next()
    this.setFrame(this.getFrame(frame))
    document.querySelector('.window').style.backgroundPosition = `${-this.total / this.speed * 10}px bottom`
  }

  animate() {
    if (this.isStop) {
      return
    }
    setTimeout(() => {
      this.total ++
      this.render()
      this.animate()
    }, 64 / this.speed)
  }

  setSpeed(speed) {
    this.speed = speed
  }

  stop() {
    this.isStop = true
  }

  jump() {
    this.gril.jump()
    this.dom.style.transform = 'translateY(-50px)'
    setTimeout(() => {
      this.run()
    }, 300)
  }

  run() {
    this.gril.run()
    this.dom.style.transform = 'translateY(0px)'
  }

  ready() {

  }

}

script.js

let animate = new Animate(document.querySelector('#canvas'))
animate.ready = () => {
  animate.animate()
}
function handleRun() {
  animate.setSpeed(1)
  animate.run()
}
function handleJump() {
  animate.jump()
}
function handleStop() {
  animate.stop()
}

人物与场景图片素材

d.png

d.png

grils.png

grils.png

领导催干活了,有空继续写...

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^