[17天] JS实现Chrome的彩蛋小游戏(一)
Chrome浏览器断网后，会出现一个小恐龙跑跳过障碍的小彩蛋游戏。也想做一个试试。
一、先实现一个PNG帧动画小人
代码结构：
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
grils.png
领导催干活了，有空继续写...
2022-06-02 11:27:48
647
0
参与讨论