HTML5 canvas 模拟吃豆子

最新推荐文章于 2021-07-03 14:49:45 发布
最新推荐文章于 2021-07-03 14:49:45 发布
阅读量510 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML5 文章标签： html5 function browser div button border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/actionstar/article/details/8064200
这篇博客介绍了一个使用HTML5 Canvas实现的简单吃豆子游戏。通过JavaScript绘制了鱼形角色，并实现了上、下、左、右移动以及闭嘴动画效果。玩家可以控制鱼儿吃掉屏幕上的豆子。游戏界面包括绿色渐变的墙和红色鱼眼。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!--
Authors:
       Liu,Xin

Revision history:
Date                         Author                        Description
08-21-2012           Liu,Xin           Eat Beans

-->
<!DOCTYPE HTML>
<html>
  <head>
    <title>Eat Beans</title>
  </head>
  <body>
    <div>
      Welcome ! <input type="button" value="again" onclick ="drawBeans();"/>
    <div>
    <div id="log"></div>
    <canvas id="myCanvas" width="800" height="600" style="border:1px solid #c3c3c3;">
      Your browser does not support the canvas element.
    </canvas>

    <script type="text/javascript">
      try{
        var bodyX =60;//鱼身坐标X值
        var bodyY = 40;//鱼身坐标Y值
        var bodyRadius = 30;//鱼身半径
        var bodyStartAngleRight =1.8;//鱼身向右起始弧度
        var bodyEndAngleRigth = 0.2 //鱼身向右终止弧度。
        var bodyStartAngleLeft = 0.8;//鱼身向左起始弧度
        var bodyEndAngleLeft = 1.2;//鱼身向左终止弧度。
        var bodyStartAngleDown = 0.3;//鱼身向下起始弧度
        var bodyEndAngleDown = 0.7;//鱼身向下终止弧度
        var bodyStartAngleUp = 1.3;
        var bodyEndAngleUp = 1.7
        var shutUpRigth = true; //正在闭嘴向右
        var shutUpLeft = true; //正在闭嘴向左
        var shutUpDown = true;//闭嘴向下
        var shutUpUp = true;
        var isEat = false;

        var moveToLeft = true; //正在向左移动，向左或移动时，转身鱼眼的位置是不一样的
        var eyeX = 60;//鱼眼坐标X
        var eyeY =20;//鱼眼坐标Y
        var canvas=document.getElementById("myCanvas");
          var context = canvas.getContext('2d');
          context.beginPath();  

        context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleRight,Math.PI*bodyEndAngleRigth,true);
        context.lineTo(bodyX,bodyY);
        context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleRight,Math.PI*bodyEndAngleRigth,true);

        context.fillStyle='#FFCC33';
        context.fill();
        context.stroke();
        context.closePath();
        
        context.beginPath();
        context.moveTo(eyeX,eyeY);
        context.arc(eyeX,eyeY,5,0,Math.PI*2,true);
        context.fillStyle='#FF0000';
        context.fill();
        context.stroke();

        context.closePath();
 
        function moveRight(){
          moveToLeft =false;

          context.beginPath();
          context.clearRect(bodyX-bodyRadius-1,bodyY-bodyRadius-1,bodyRadius*2+2, bodyRadius*2+2);
         
       
          context.save();
          if(bodyX <800-bodyRadius-10){
            bodyX += 10;
            eyeX += 10;
      }
          if(shutUpRigth){
            bodyStartAngleRight += 0.1;
            bodyEndAngleRigth -=0.1;
            if(bodyStartAngleRight == 2){
              shutUpRigth =false;
        }
      }else{
        bodyStartAngleRight -= 0.1;
            bodyEndAngleRigth +=0.1;
            if(bodyEndAngleRigth == 0.2){
              shutUpRigth =true;
            }
      }
          context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleRight,Math.PI*bodyEndAngleRigth,true);
          context.lineTo(bodyX,bodyY);
          context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleRight,Math.PI*bodyEndAngleRigth,true);
          context.fillStyle='#FFCC33';
          context.fill();
          context.stroke();
          context.closePath();
        
          context.beginPath();
          context.moveTo(eyeX,eyeY);
          context.arc(eyeX,eyeY,5,0,Math.PI*2,true);
          context.fillStyle='#FF0000';
          context.fill();
          context.stroke();
          context.closePath();
          
          
        }

        function moveLeft(){
          moveToLeft = true;

          context.beginPath();
          context.clearRect(bodyX-bodyRadius-1,bodyY-bodyRadius-1,bodyRadius*2+2, bodyRadius*2+2);
          context.save();
          if(bodyX >bodyRadius+10){
            bodyX -= 10;
            eyeX -= 10;
          }
          if(shutUpLeft){
            bodyStartAngleLeft += 0.1;
            bodyEndAngleLeft -=0.1;
            if(bodyStartAngleLeft == 1){
              shutUpLeft =false;
        }
      }else{
        bodyStartAngleLeft -= 0.1;
            bodyEndAngleLeft +=0.1;
            if(bodyStartAngleLeft == 0.8){
              shutUpLeft =true;
            }
      }
          if(bodyStartAngleLeft==1){
            context.arc(bodyX,bodyY,bodyRadius,Math.PI*0,Math.PI*2,true);
            context.moveTo(bodyX,bodyY);
            context.lineTo(bodyX-bodyRadius,bodyY);
          }else{
            context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleLeft,Math.PI*bodyEndAngleLeft,true);
            context.lineTo(bodyX,bodyY);
            context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleLeft,Math.PI*bodyEndAngleLeft,true);
          }

          context.fillStyle='#FFCC33';
          context.fill();
          context.stroke();
          context.closePath();
        
          context.beginPath();
          context.moveTo(eyeX,eyeY);
          context.arc(eyeX,eyeY,5,0,Math.PI*2,true);
          context.fillStyle='#FF0000';
          context.fill();
          context.stroke();
          context.closePath();

         
        }
        
        function moveDown(){
          context.beginPath();
          context.clearRect(bodyX-bodyRadius-1,bodyY-bodyRadius-1,bodyRadius*2+2, bodyRadius*2+2);
          context.save();
          if(bodyY<600-bodyRadius-10){
            bodyY += 10;
            eyeY += 10;
          }
          if(shutUpDown){
            bodyStartAngleDown += 0.1;
            bodyEndAngleDown -=0.1;
            if(bodyStartAngleDown == 0.5){
              shutUpDown =false;
        }
      }else{
        bodyStartAngleDown -= 0.1;
            bodyEndAngleDown +=0.1;
            if(bodyEndAngleDown == 0.7){
              shutUpDown =true;
            }
      }
          if(bodyStartAngleDown==0.5){
            context.arc(bodyX,bodyY,bodyRadius,Math.PI*0,Math.PI*2,true);
            context.moveTo(bodyX,bodyY);
            context.lineTo(bodyX,bodyY+bodyRadius);
          }else{
            context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleDown,Math.PI*bodyEndAngleDown,true);
            context.lineTo(bodyX,bodyY);
            context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleDown,Math.PI*bodyEndAngleDown,true);
          }

          context.fillStyle='#FFCC33';
          context.fill();
          context.stroke();
          context.closePath();
        
          context.beginPath();
          if(moveToLeft){
            context.moveTo(eyeX-20,eyeY+20);
            context.arc(eyeX-20,eyeY+20,5,0,Math.PI*2,true);
          }else{
            context.moveTo(eyeX+20,eyeY+20);
            context.arc(eyeX+20,eyeY+20,5,0,Math.PI*2,true);
          }
          context.fillStyle='#FF0000';
          context.fill();
          context.stroke();
          context.closePath();

          
        }

        function moveUp(){
          context.beginPath();
          context.clearRect(bodyX-bodyRadius-1,bodyY-bodyRadius-1,bodyRadius*2+2, bodyRadius*2+2);
          context.save();
          if(bodyY>bodyRadius+10){
            bodyY -= 10;
            eyeY -= 10;
          }
          if(shutUpUp){
            bodyStartAngleUp += 0.1;
            bodyEndAngleUp -=0.1;
            if(bodyStartAngleUp.toFixed(1) == 1.5){
              shutUpUp =false;
        }
      }else{
        bodyStartAngleUp -= 0.1;
            bodyEndAngleUp +=0.1;
            if(bodyStartAngleUp.toFixed(1) == 1.3){
              shutUpUp =true;
            }
      }

          if(bodyStartAngleUp.toFixed(1)==1.5){
            context.arc(bodyX,bodyY,bodyRadius,Math.PI*0,Math.PI*2,true);
            context.moveTo(bodyX,bodyY);
            context.lineTo(bodyX,bodyY-bodyRadius);
          }else{
            context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleUp,Math.PI*bodyEndAngleUp,true);
            context.lineTo(bodyX,bodyY);
            context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleUp,Math.PI*bodyEndAngleUp,true);
          }

          context.fillStyle='#FFCC33';
          context.fill();
          context.stroke();
          context.closePath();
        
          context.beginPath();
          if(moveToLeft){
            context.moveTo(eyeX-20,eyeY+20);
            context.arc(eyeX-20,eyeY+20,5,0,Math.PI*2,true);
      }else{
        context.moveTo(eyeX+20,eyeY+20);
            context.arc(eyeX+20,eyeY+20,5,0,Math.PI*2,true);
          }
          context.fillStyle='#FF0000';
          context.fill();
          context.stroke();
          context.closePath();

          
        }

        function setMove(){
      document.onkeydown = keyDown;
    }
        function keyDown(e){
         
      key =  e.which;
      if (key == 38 || key == 87){
            //up
            moveUp();
      }
      if (key == 40 || key == 83){
           //down
           moveDown();
          }
      if (key == 37 || key == 65){
           //left
            moveLeft();
          }
          if (key == 39 || key == 68){
            //right
            moveRight();
          }
    }
        setMove();

        function drawWall(){
          context.beginPath();  
          var grd=context.createLinearGradient(0,0,800,9);
          grd.addColorStop(0,"#663300");
          grd.addColorStop(1,"#99FF00");
          context.fillStyle=grd;
          context.fillRect(0,0,800,9);
         
          var grd2=context.createLinearGradient(0,0,9,600);
          grd2.addColorStop(0,"#99FF00");
          grd2.addColorStop(1,"#663300");
          context.fillStyle=grd2;
          context.fillRect(0,0,9,600);
          
          var grd3=context.createLinearGradient(0,591,800,600);
          grd3.addColorStop(0,"#99FF00");
          grd3.addColorStop(1,"#663300");
          context.fillStyle=grd3;
          context.fillRect(0,591,800,600);

          var grd4=context.createLinearGradient(791,0,800,600);
          grd4.addColorStop(0,"#663300");
          grd4.addColorStop(1,"#99FF00");
          context.fillStyle=grd4;
          context.fillRect(791,0,800,600);
          
         

          context.stroke();
          context.closePath();
        }
        function drawBeans(){
          context.beginPath();           
          context.arc(400,300,10,Math.PI*0,Math.PI*2,true);
          context.fillStyle='#009933';
          context.fill();
          context.stroke();
          context.closePath();
          
          context.beginPath();
          context.arc(200,150,10,Math.PI*0,Math.PI*2,true);
          context.fillStyle='#009933';
          context.fill();
          context.stroke();
          context.closePath();
       
          context.beginPath();
          context.arc(460,380,10,Math.PI*0,Math.PI*2,true);
          context.fillStyle='#009933';
          context.fill();
          context.stroke();
          context.closePath();
        }
        drawBeans();
        drawWall();
      } catch(e){
           console.log(e.message);
      }

    </script>
  </body>
</html>
运用canvas制作吃豆人
Xyp9x的博客
12-15 699
运用canvas制作吃豆人 吃豆人链接 吃豆人代码： html <canvas width="1800px" height="600px" id="canvas"></canvas> javascript var canvas = document.getElementById("canvas"); var context = canvas....
js+canvas实现动态吃豆人效果
12-29
效果图： 代码如下： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title>吃豆人V01</title> </head> <body> <canvas id=canvas width=500px height=500px xss=removed></canvas> [removed] var canvas = document.getElementById(canvas); var context = canvas.getContext(2d
HTML5吃豆豆游戏开发实战（一）使用Canvas绘制游戏主角
weixin_33874713的博客
06-06 343
       近期在学习HTML5。爱因斯坦曾说过，“最好的学习就是自己去经历”。于是。我想在学习HTML5的同一时候。做一款简单的小游戏，这样学习起来也会非常有趣的。我想做的是曾经小时候玩儿的小霸王上面的非常经典的一款游戏，叫“吃豆豆”，后面有怪物跟着跑，蛮好玩的，还非常虐心，相信大家都玩儿过。       吃豆豆就是这款啦：                我就用前面学的一些HTM...
canvas实现绘制吃豆鱼效果
08-31
本篇文章主要分享了canvas实现绘制吃豆鱼效果的示例代码，具有一定的参考价值，下面跟着小编一起来看下吧
HTML5 Canvas模拟翻滚动画 3D视觉效果
08-23
HTML5作为最先进的浏览器技术，可以创造出很多不同凡响的特效应用，尤其是3D动画更是轻而易举，大家可以在之前我们分享...今天要分享的这款HTML5 Canvas模拟翻滚动画特效给你呈现了不一样的3D视觉特效，一起来欣赏吧。
html5 canvas 模拟Windows 画图程序.rar
07-10
html5 canvas 模拟Windows 画图程序，初看上去，你会不会觉得这就是windows 的画图程序呢？界面和功能布局几乎是一样的，而且用起来也和Windows画图没啥区别，真心模拟的很像。运用Canvas技术来实现的画图程序。
HTML5 Canvas五彩烟雾模拟动画
08-23
之前我们利用HTML5技术在Canvas上模拟了很多东西，比如最近刚分享的HTML5 Canvas 多种炫酷3D粒子图形动画。这次给大家带来的也是一款基于HTML5 Canvas的动画特效，它模拟了五彩烟雾的流动效果，这在Canvas上实现还是...
HTML5 canvas模拟万花筒动画特效.rar
07-10
HTML5 canvas模拟万花筒动画特效，是一连串的动画效果，很漂亮，你甚至会有点不相信这不是Flash，这就是网页生成的动画效果，很流畅，利用折纸的创意生成的Canvas万花筒特效动画，分享给喜欢HTML5特效的朋友参考。
html5 canvas流动的瀑布动画特效
11-06
html5 canvas流动的瀑布动画特效 html5 canvas流动的瀑布动画特效
jspacman-canvas:一个不错的吃豆人克隆，使用Impact js在2013年用JavaScript编写
05-03
jspacman-ImpactJS 这是我第二次尝试编写javascript pacman克隆。 这次，我决定使用Impact.js，这是一个非常不错的javascript游戏引擎（我强烈建议您购买它。这真的很值得！ ） 有几件事要做： 清理代码并添加注释 添加声音 修复一些错误（有时鬼会卡住） 对60 fps进行一些优化 添加多人游戏功能 该游戏是Namco Bandai的财产。 我只是在尝试帮助想要编写/学习如何编写游戏代码的人。 我从以下网站上获得了有关游戏和幽灵AI的许多想法： ://www.gamasutra.com/view/feature/3938/the_pacman_dossier.php 请阅读该书，您将了解pacman游戏的惊人之处。 我尽了最大努力（几乎……）使它变得完美，并且与街机版本非常相似。 如果您有建议，请告诉我。 您可以在这里玩游戏：
HTML5_canvas（设置画笔样式、左右跑动的小块、绘制路径的方法、写字板、绘制圆形的方法、吃豆豆、绘制文本、环形进度条）设置一个模板-附件资源
03-02
HTML5_canvas（设置画笔样式、左右跑动的小块、绘制路径的方法、写字板、绘制圆形的方法、吃豆豆、绘制文本、环形进度条）设置一个模板-附件资源
pacman：吃豆人游戏，使用HTML5 + CSS3 + jQuery和Canvas编写。 该WebApp是响应式Web设计（RWD）网站
02-03
吃豆人 用Canvas用HTML5 + CSS3 + jQuery编写的吃豆人游戏。 该WebApp是响应式Web设计（RWD）网站。
C++ 吃豆子游戏 教程及源代码
06-02
C++ 吃豆子游戏 教程 源代码
吃豆豆游戏源码
01-07
基于JavaScript的h5游戏吃豆豆经典吃豆子游戏是一款益智类游戏，目标就是避开小怪物的追赶吃完所有豆子，吃了咖啡会暂时无敌，拿着大锤子追得怪物满处跑。
canvas绘制吃豆鱼
web前端学习部落22群
01-10 826
canvas绘制吃豆鱼 canvas吃豆鱼 body{ text-align:center; } canvas{ background: #efefef; } 角度转为弧度： 弧度=2*PI*角度/360=角度*PI/180 画布的宽和高只能使用属性，不能使用样式--> var ctx=a1.getContext('2
HTML5 用canvas画吃豆人
qq_29691213的博客
07-03 611
<!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>D.
吃豆人动态模型创建---canvas
每一次跌倒都是为了华丽的站起来。
05-22 508
吃豆人模型 吃豆人是我们小时候常玩的街机游戏，常常能勾起我们童年的回忆，写这些文章也是为了记录学习，保留回忆的，如果可以帮助到你们也会很开心，可能内容有些太基础，希望不要介意。 因为不是一个完整的小游戏，所以简单记录下该游戏模型。 放上成果图片： 下面的格式主要是将背景面包方式屏幕中央，并设置背景颜色为灰色 <style> body{ text-align: center; } #canvas{ background: #F0F0F0; } &
教你用canvas写吃豆人动画
weixin_45743513的博客
05-18 722
canvas画布 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 吃豆人 我们用canvas绘制一个吃豆人。用canvas画圆的方法画一个黄色的圆。在填充一个半圆，就出 现一个吃豆人 在这里插入代码片 <canvas id="canvas" width="500" height="500" style="background-color
HTML5 Canvas模拟Windows画图界面
5. Canvas技术的应用：除了模拟其他程序，Canvas技术在网页游戏开发、数据可视化、在线广告、图像编辑器、动画制作等方面有着广泛的应用。通过使用Canvas，开发者可以创建高性能的图形应用，这些应用通常交互性强，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值