Tue Jun 20 06:26:01 UTC 2023 inscode

src/App.vue

 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
-<template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+import { onMounted } from 'vue';
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
-</template>
+const BALL_SIZE = 20;
+const BAT_SIZE = 50;
+let BAT_X = 0;
+let BAT_Y = 0;
+const SCORE_MAX = 100;
+let score = 0;
+let canvas = null;
+let ctx = null;
+onMounted(()=>{
+  canvas = document.getElementById('canvas');
+  ctx = canvas.getContext('2d');
+  BAT_X = canvas.width - BAT_SIZE;
+  BAT_Y = canvas.height / 2 - BAT_SIZE / 2;
+  draw()
+})
 
-<style scoped>
-header {
-  line-height: 1.5;
+// 定义一个函数用于绘制球和球拍。
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawBall();
+  drawBat();
+  drawScore();
 }
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
+// 定义一个函数用于绘制球。
+function drawBall() {
+  ctx.beginPath();
+  ctx.arc(canvas.width / 2, canvas.height / 2, BALL_SIZE, 0, Math.PI * 2);
+  ctx.fillStyle = 'red';
+  ctx.fill();
 }
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
+// 定义一个函数用于绘制球拍。
+function drawBat() {
+  ctx.beginPath();
+  ctx.rect(BAT_X, BAT_Y, BAT_SIZE, BAT_SIZE);
+  ctx.fillStyle = 'wood';
+  ctx.fill();
+}
+// 定义一个函数用于绘制分数。
+function drawScore() {
+  ctx.font = '30px Arial';
+  ctx.textAlign = 'center';
+  ctx.fillStyle = 'blue';
+  ctx.fillText('Score: ' + score, canvas.width / 2, 30);
+}
+// 定义一个函数用于更新球的位置和速度。
+function update() {
+  // 随机生成球的初始位置和速度
+  const ballX = Math.random() * (canvas.width - BALL_SIZE) + BALL_SIZE / 2;
+  const ballY = Math.random() * (canvas.height - BALL_SIZE) + BALL_SIZE / 2;
+  const ballSpeedX = (Math.random() - 0.5) * 3;
+  const ballSpeedY = (Math.random() - 0.5) * 3;
+  // 更新球的位置和速度
+  ballX += ballSpeedX;
+  ballY += ballSpeedY;
+  // 判断球是否碰到边界，如果碰到则反弹
+  if (ballX < 0 || ballX > canvas.width - BALL_SIZE) {
+    ballSpeedX *= -1;
   }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
+  if (ballY < 0 || ballY > canvas.height - BALL_SIZE) {
+    ballSpeedY *= -1;
   }
+  // 更新球的位置和速度，并在Canvas上重新绘制球的位置和速度的改变。
+  score += Math.abs(ballSpeedX) + Math.abs(ballSpeedY); // 更新分数}
 }
+</script>
+
+<template>
+<canvas id="canvas" width="400" height="400"></canvas>
+</template>
+
+<style scoped>
+
 </style>