canvas 小游戏吃豆人

野生切图仔

已于 2023-07-30 12:11:56 修改

阅读量1.4k

点赞数 33

文章标签： javascript 前端 canvas 游戏

于 2023-02-04 14:47:30 首次发布

本文链接：https://blog.csdn.net/weixin_42232622/article/details/128879983

版权

Ⅰ . 吃豆人小游戏

在这里插入图片描述

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

Ⅱ. 实现步骤

① 让吃豆人嘴巴，动起来

先画一个扇形 , 然后让扇形有一个的开口

<body>
    <canvas id="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()
    function draw(){
		ctx.clearRect(0,0,1000,500);
        ctx.beginPath(); 
        ctx.fillStyle = "orange";
        ctx.arc(x,y,50,start,end,0);
        ctx.lineTo(x,y);
        ctx.fill();
        ctx.stroke();
	}
</script>

然后我们需要，吧吃豆人的嘴动起来
这时我们就要用到定时器 setInterval，每改变嘴（扇形弧度）, 重新绘制一遍

请添加图片描述

<body>
    <canvas id="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);
  
    function setAngle() { // 修改圆的开口
      angle = isMax ? Math.PI*0.01:(-Math.PI*0.01) 
      start = start - angle 
      end   = end + angle 
      num++;
      if(num==10){
        isMax=!isMax;
        num = 0
      }
    }
    function draw(){ // 绘制圆
		ctx.clearRect(0,0,1000,500);
        ctx.beginPath(); 
        ctx.fillStyle = "orange";
        ctx.arc(x,y,50,start,end,0);
        ctx.lineTo(x,y);
        ctx.fill();
        ctx.stroke();
	}
</script>

② 监听上下左右让吃豆人动起来

我们先要找到上下左右按键对应的 keyCode 分别是 37~39；
针对每个反向改变下 “嘴” 的方向 [修改弧度]；
在走到区域的末端，在反方向重新出现 👇

 // ....... 省略之前代码
  document.onkeydown = function(e){
     switch(e.keyCode){
         case 37: start = Math.PI*0.8,  end = Math.PI*1.1;  move('←');   reset();  break;
         case 38: start = Math.PI*1.45, end = Math.PI*1.7;  move('↑');   reset();  break;
         case 39: start = Math.PI*1.95, end = Math.PI*0.1;  move('→');   reset();  break;
         case 40: start = Math.PI*0.4,  end = Math.PI*0.7;  move('↓');   reset();  break;
     }
  }
 function move(direction){
	switch(direction){
        case '←': x-=5; draw();   break;
        case '↑': y-=5; draw();   break;
        case '→': x+=5; draw();   break;
        case '↓': y+=5; draw();   break;
   }
 }
 function  reset(){
    if(x > 1050) { x = 0; }
    if(x < 0) { x = 1050; }
    if(y > 550) { y =0;  }
    if(y < 0) { y =550; }
}
 // ....... 省略之前代码

③ 绘制随机出现的糖豆

设置糖豆初始位置，通过 Math.random() 随机出现；
当糖豆在，移动的吃豆人的范围类的时候（40px），就初始化 糖豆；
在每次绘制吃豆人之后，确认之间的距离是否在范围里 👇

let t_x = Math.round(Math.random() * 900) ,t_y = Math.round(Math.random() * 450);

function draw() {
    // ...省略之前代码
    t_draw()
}
function t_draw(){
	ctx.beginPath();
    ctx.arc(t_x,t_y,10,0,Math.PI*2,0); 
    ctx.stroke();
    if(
        t_x > x - 40 
    	&& t_x < x + 40 
    	&& t_y > y - 40 
    	&& t_y < y + 40 
    ){
       t_x=Math.round(Math.random()*900);
       t_y=Math.round(Math.random()*450);
       t_draw()
    }
}

④ 添加积分器

在每次糖豆被吃掉时（糖豆位置初始化时）, 增加分数
绘制一个记录分数的盒子 👇

<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>
    <div class="box">分数为:<span id="score">0</span></div>
</body>
<script>
// ...省略其他代码
 addScore() { //重新改变糖豆位置时执行
   const score = document.getElementById('score')
   score.innerHTML  = Number(score.innerHTML) + 5  
 }	
</script>

Ⅱ. 整合最终代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="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>
    <canvas id="cvs" width="1000" height="500"></canvas>
    <div class="box">分数为:<span id="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);
    
    document.onkeydown = function (e) {
        switch (e.keyCode) {
            case 37: start = Math.PI * 0.8, end = Math.PI * 1.1; move('←'); reset(); break;
            case 38: start = Math.PI * 1.45, end = Math.PI * 1.7; move('↑'); reset(); break;
            case 39: start = Math.PI * 1.95, end = Math.PI * 0.1; move('→'); reset(); break;
            case 40: start = Math.PI * 0.4, end = Math.PI * 0.7; move('↓'); reset(); break;
        }
    }
    function move(direction) {
        switch (direction) {
            case '←': x -= 5; draw(); break;
            case '↑': y -= 5; draw(); break;
            case '→': x += 5; draw(); break;
            case '↓': y += 5; draw(); break;
        }
    }
    function setAngle() {
        angle = isMax ? Math.PI * 0.01 : (-Math.PI * 0.01)
        start = start - angle
        end = end + angle
        num++;
        if (num == 10) {
            isMax = !isMax;
            num = 0
        }
        draw();
    }
    function draw() {
        ctx.clearRect(0, 0, 1000, 500);
        ctx.beginPath();
        ctx.fillStyle = "orange";
        ctx.arc(x, y, 50, end, start, 0);
        ctx.lineTo(x, y);
        ctx.fill();
        ctx.stroke();
        t_draw();
    }
    function t_draw() {
        ctx.beginPath();
        ctx.arc(t_x, t_y, 10, 0, Math.PI * 2, 0);
        ctx.stroke();
        if (
            t_x > x - 40
            && t_x < x + 40
            && t_y > y - 40
            && t_y < y + 40
        ) {
            t_x = Math.round(Math.random() * 900);
            t_y = Math.round(Math.random() * 450);
            t_draw()
            addScore()
        }
    }
    function addScore() { //重新改变糖豆位置时执行
        const score = document.getElementById('score')
        score.innerHTML = Number(score.innerHTML) + 5
    }
    function reset() {
        if (x > 1050) {
            x = 0
        }
        if (x < 0) {
            x = 1050
        }
        if (y > 550) {
            y = 0;
        }
        if (y < 0) {
            y = 550;
        }
    }
</script>
</html>

在这里插入图片描述

野生切图仔

关注

33
点赞
踩
33

收藏

觉得还不错? 一键收藏
打赏
34
评论
canvas 小游戏吃豆人

然后我们需要，吧吃豆人的嘴动起来这时我们就要用到定时器，每改变嘴（）, 重新绘制一遍② 监听上下左右让吃豆人动起来我们先要找到上下左右按键对应的分别是 37~39；针对每个反向改变下 “嘴” 的方向 []；在走到区域的末端，在反方向重新出现 👇③ 绘制随机出现的糖豆设置糖豆初始位置，通过随机出现；当糖豆在，移动的吃豆人的范围类的时候（），就糖豆；在每次绘制吃豆人之后，确认之间的距离是否在范围里 👇④ 添加积分器在每次糖
复制链接

扫一扫