0
0

摸鱼时间，画个吃豆人玩一下

Ⅰ . 吃豆人小游戏

在这里插入图片描述

  1. Canvas API（画布）是在 HTML5 中新增的标签用于在网页实时生成图像；
  2. 是一个非常适合，做一些有趣的小游戏 和 动画；
  3. 下面我们来简单的写一下 这个小例子 👇### 文章目录在这里插入图片描述

Ⅱ. 实现步骤

① 让吃豆人嘴巴，动起来
  1. 先画一个扇形 , 然后让扇形有一个的开口
  1. <body><canvasid="cvs"width="1000"height="500"></canvas></body><script>const canvas = document.getElementById("cvs");const ctx = canvas.getContext('2d');let x =500, y =200;// 扇形的初始位置let start = Math.PI*1.95, end = Math.PI*0.1;//扇形的开口弧度draw()functiondraw(){
  2.         ctx.clearRect(0,0,1000,500);
  3.         ctx.beginPath(); 
  4.         ctx.fillStyle ="orange";
  5.         ctx.arc(x,y,50,start,end,0);
  6.         ctx.lineTo(x,y);
  7.         ctx.fill();
  8.         ctx.stroke();}</script>
  1. 然后我们需要，吧吃豆人的嘴动起来
  2. 这时我们就要用到定时器 setInterval，每改变 嘴（扇形弧度）, 重新绘制一遍

请添加图片描述

  1. <body><canvasid="cvs"width="1000"height="500"></canvas></body><script>const canvas = document.getElementById("cvs");const ctx = canvas.getContext('2d');let x =500, y =200;// 扇形的初始位置let start = Math.PI*1.95, end = Math.PI*0.1;//扇形的开口弧度let isMax =true;// 弧度是否张开最大let num =0;// 弧度改变的次数 setInterval(()=>{setAngle();draw();},30);functionsetAngle(){// 修改圆的开口
  2.       angle = isMax ? Math.PI*0.01:(-Math.PI*0.01) 
  3.       start = start - angle 
  4.       end   = end + angle 
  5.       num++;if(num==10){
  6.         isMax=!isMax;
  7.         num =0}}functiondraw(){// 绘制圆
  8.         ctx.clearRect(0,0,1000,500);
  9.         ctx.beginPath(); 
  10.         ctx.fillStyle ="orange";
  11.         ctx.arc(x,y,50,start,end,0);
  12.         ctx.lineTo(x,y);
  13.         ctx.fill();
  14.         ctx.stroke();}</script>
② 监听 上下左右 让吃豆人动起来
  1. 我们先要找到 上下左右按键 对应的 keyCode 分别是 37~39；
  2. 针对每个反向 改变下 “嘴” 的方向 [修改弧度]；
  3. 在走到区域的末端，在反方向重新出现 👇
  1. // ....... 省略之前代码
  2.   document.onkeydown=function(e){switch(e.keyCode){case37: start = Math.PI*0.8,  end = Math.PI*1.1;move('←');reset();break;case38: start = Math.PI*1.45, end = Math.PI*1.7;move('↑');reset();break;case39: start = Math.PI*1.95, end = Math.PI*0.1;move('→');reset();break;case40: start = Math.PI*0.4,  end = Math.PI*0.7;move('↓');reset();break;}}functionmove(direction){switch(direction){case'←': x-=5;draw();break;case'↑': y-=5;draw();break;case'→': x+=5;draw();break;case'↓': y+=5;draw();break;}}functionreset(){if(x >1050){ x =0;}if(x <0){ x =1050;}if(y >550){ y =0;}if(y <0){ y =550;}}// ....... 省略之前代码
③ 绘制随机出现的糖豆
  1. 设置 糖豆初始位置 ，通过 Math.random() 随机出现；
  2. 当糖豆在，移动的吃豆人的范围类的时候（40px） ，就初始化 糖豆；
  3. 在每次绘制 吃豆人之后 ，确认之间的距离是否在范围里 👇请添加图片描述
  1. let t_x = Math.round(Math.random()*900),t_y = Math.round(Math.random()*450);functiondraw(){// ...省略之前代码t_draw()}functiont_draw(){
  2.     ctx.beginPath();
  3.     ctx.arc(t_x,t_y,10,0,Math.PI*2,0); 
  4.     ctx.stroke();if(
  5.         t_x > x -40&& t_x < x +40&& t_y > y -40&& t_y < y +40){
  6.        t_x=Math.round(Math.random()*900);
  7.        t_y=Math.round(Math.random()*450);t_draw()}}
④ 添加积分器
  1. 在每次糖豆被吃掉时 （糖豆位置初始化时）, 增加分数
  2. 绘制一个记录分数的盒子 👇请添加图片描述
  1. <style>.box{width: 150px;height: 60px;background-color: yellow;font-size: 20px;text-align: center;line-height: 60px;border: 2px solid coral;border-radius: 20px;position: relative;top: -500px;left: 840px;}</style><body><divclass="box">分数为:<spanid="score">0</span></div></body><script>// ...省略其他代码addScore(){//重新改变糖豆位置时执行const score = document.getElementById('score')
  2.    score.innerHTML  =Number(score.innerHTML)+5}</script>

Ⅱ. 整合最终代码

  1. <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>#cvs{background-color: paleturquoise;}.box{width: 150px;height: 60px;color: chocolate;background-color: yellow;font-size: 20px;text-align: center;line-height: 60px;border: 2px solid coral;border-radius: 20px;position: relative;top: -500px;left: 840px;}</style><body><canvasid="cvs"width="1000"height="500"></canvas><divclass="box">分数为:<spanid="score">0</span></div></body><script>const canvas = document.getElementById("cvs");const ctx = canvas.getContext('2d');let start = Math.PI*1.95, end = Math.PI*0.1;let x =100, y =200;let t_x = Math.round(Math.random()*900);let t_y = Math.round(Math.random()*450);let isMax =true;let num =0;setInterval(setAngle,30);
  2.     
  3.     document.onkeydown=function(e){switch(e.keyCode){case37: start = Math.PI*0.8, end = Math.PI*1.1;move('←');reset();break;case38: start = Math.PI*1.45, end = Math.PI*1.7;move('↑');reset();break;case39: start = Math.PI*1.95, end = Math.PI*0.1;move('→');reset();break;case40: start = Math.PI*0.4, end = Math.PI*0.7;move('↓');reset();break;}}functionmove(direction){switch(direction){case'←': x -=5;draw();break;case'↑': y -=5;draw();break;case'→': x +=5;draw();break;case'↓': y +=5;draw();break;}}functionsetAngle(){
  4.         angle = isMax ? Math.PI*0.01:(-Math.PI*0.01)
  5.         start = start - angle
  6.         end = end + angle
  7.         num++;if(num ==10){
  8.             isMax =!isMax;
  9.             num =0}draw();}functiondraw(){
  10.         ctx.clearRect(0,0,1000,500);
  11.         ctx.beginPath();
  12.         ctx.fillStyle ="orange";
  13.         ctx.arc(x, y,50, end, start,0);
  14.         ctx.lineTo(x, y);
  15.         ctx.fill();
  16.         ctx.stroke();t_draw();}functiont_draw(){
  17.         ctx.beginPath();
  18.         ctx.arc(t_x, t_y,10,0, Math.PI*2,0);
  19.         ctx.stroke();if(
  20.             t_x > x -40&& t_x < x +40&& t_y > y -40&& t_y < y +40){
  21.             t_x = Math.round(Math.random()*900);
  22.             t_y = Math.round(Math.random()*450);t_draw()addScore()}}functionaddScore(){//重新改变糖豆位置时执行const score = document.getElementById('score')
  23.         score.innerHTML =Number(score.innerHTML)+5}functionreset(){if(x >1050){
  24.             x =0}if(x <0){
  25.             x =1050}if(y >550){
  26.             y =0;}if(y <0){
  27.             y =550;}}</script></html>

在这里插入图片描述
在这里插入图片描述

标签： javascript 前端 canvas
本文转载自: https://blog.csdn.net/weixin_42232622/article/details/128879983
版权归原作者 野生切图仔 所有， 如有侵权，请联系我们删除。
登录后发布评论

“摸鱼时间，画个吃豆人玩一下”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。