You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
808 B
Vue
36 lines
808 B
Vue
<script setup lang="ts">
|
|
import { ref, computed, onMounted, watch } from 'vue'
|
|
import useBackground from './util/useBackground'
|
|
import { BLOCK_SIZE, STAGE_WIDTH, STAGE_HEIGHT } from './level/def'
|
|
|
|
export interface Props {
|
|
time: number
|
|
x: number
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const canvas = ref<HTMLCanvasElement | null>(null)
|
|
|
|
const p = Math.PI / -10
|
|
const sunY = computed(() => Math.sin(props.time * p))
|
|
|
|
|
|
onMounted(() => {
|
|
const canvasEl = canvas.value
|
|
if (canvasEl === null) return
|
|
|
|
const drawBackground = useBackground(
|
|
canvasEl,
|
|
~~(STAGE_WIDTH * BLOCK_SIZE / 2.0),
|
|
~~(STAGE_HEIGHT * BLOCK_SIZE / 2.0),
|
|
)
|
|
|
|
watch(props, () => drawBackground(props.x, sunY.value), { immediate: true })
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<canvas ref="canvas" id="background"></canvas>
|
|
</template>
|