我的第一个使用canvas+vue实现一个小游戏(持续更新)
canvas 小游戏 vue
·
<template>
<view class="compute">
<canvas
style="width: 100%; height: 110px; background: #e0e0e0"
canvas-id="CanvasCompute"
id="CanvasCompute"
></canvas>
<canvas
style="width: 100%; height: 10px; background: #e0e0e0"
canvas-id="CanvasBan"
id="CanvasBan"
></canvas>
<view class="compute_btn">
<view class="compute_btn_jump" @touchstart="handleJump">跳跃</view>
<view
class="compute_btn_jump"
@touchstart="handleForward"
@touchend="handleStop"
>前进</view
>
</view>
</view>
</template>
<script>
export default {
name: 'compute',
data() {
return {
ctx: '',
jump: '',
// 跳跃点的坐标
jumpEvent: {
x: 10,
y: 100,
},
movetimer: '',
jieliu: true,
moveforwardtimer: '',
stoptimer: '',
}
},
onReady() {
this.handleCreateGam()
},
methods: {
handleCreateGam() {
const ctx = uni.createCanvasContext('CanvasBan')
const banArray = [100, 120, 80, 230, 150, 160, 100, 170, 90]
let sum = 0
banArray.forEach((item) => {
ctx.fillRect(sum, 0, 100, 10)
ctx.setFillStyle('black')
ctx.draw(true)
sum += item + 10
})
ctx.fillRect()
},
// 解释一下: name: canvas的canvas_id,(x1,y1):出发点坐标,(x2,y2):结束点坐标,color:方框的颜色,(p1,p2):控制点,width,height方框的高度
handleCompute( name, x1, y1, x2, y2, color, p1, p2, width, height, ctx, fun ) {
ctx = uni.createCanvasContext(name)
ctx.beginPath()
ctx.fillRect(x1, y1, width, height)
let horn = 0
const timer = setInterval(() => {
horn += 0.01
const x = this.twoBezizer(x1, p1, x2, horn)
const y = this.twoBezizer(y1, p2, y2, horn)
ctx.setFillStyle(color)
ctx.fillRect(x, y, width, height)
ctx.draw()
if (horn > 1) {
clearInterval(timer)
fun()
}
}, 10)
},
twoBezizer(p0, p1, p2, t) {
const k = 1 - t
return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2
},
handleJump() {
if (this.jieliu) {
this.jieliu = false
clearInterval(this.movetimer)
clearInterval(this.stoptimer)
this.handleCompute(
'CanvasCompute',
this.jumpEvent.x,
this.jumpEvent.y,
this.jumpEvent.x + 50,
this.jumpEvent.y,
'yellow',
this.jumpEvent.x + 25,
0,
10,
10,
this.jump,
() => {
this.jumpEvent.x += 50
const ctx = uni.createCanvasContext('CanvasCompute')
ctx.fillRect(this.jumpEvent.x, this.jumpEvent.y, 10, 10)
ctx.setFillStyle('yellow')
this.movetimer = setInterval(() => {
ctx.setFillStyle('yellow')
ctx.fillRect(--this.jumpEvent.x, this.jumpEvent.y, 10, 10)
ctx.draw()
if (this.jumpEvent.x <= 0) {
clearInterval(this.movetimer)
}
}, 10)
this.jieliu = true
}
)
}
},
handleForward() {
if (this.jieliu) {
clearInterval(this.movetimer)
clearInterval(this.stoptimer)
const ctx = uni.createCanvasContext('CanvasCompute')
ctx.fillRect(this.jumpEvent.x, this.jumpEvent.y, 10, 10)
ctx.setFillStyle('yellow')
this.moveforwardtimer = setInterval(() => {
ctx.setFillStyle('yellow')
ctx.fillRect(this.jumpEvent.x++, this.jumpEvent.y, 10, 10)
ctx.draw()
if (this.jumpEvent.x >= 375) {
clearInterval(this.moveforwardtimer)
}
}, 10)
}
},
handleStop() {
if (this.jieliu) {
clearInterval(this.moveforwardtimer)
const ctx = uni.createCanvasContext('CanvasCompute')
ctx.fillRect(this.jumpEvent.x, this.jumpEvent.y, 10, 10)
ctx.setFillStyle('yellow')
this.stoptimer = setInterval(() => {
ctx.setFillStyle('yellow')
ctx.fillRect(--this.jumpEvent.x, this.jumpEvent.y, 10, 10)
ctx.draw()
if (this.jumpEvent.x <= 0) {
clearInterval(this.stoptimer)
}
}, 10)
}
},
},
}
</script>
<style lang="scss" scoped>
.compute {
.compute_btn {
display: flex;
justify-content: center;
.compute_btn_jump {
width: 20%;
margin-top: 20rpx;
height: 50rpx;
background-color: #3e7cff;
border-radius: 50rpx;
text-align: center;
line-height: 50rpx;
color: #fff;
}
}
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)