CANVAS 贪吃蛇（键盘控制运动）

最新推荐文章于 2022-05-13 08:45:47 发布
最新推荐文章于 2022-05-13 08:45:47 发布
阅读量539 收藏
点赞数
文章标签： canvas html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abcdef_fedcba/article/details/80127259
版权

图片描述

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width-device-width,initial-scale=1.0,user-scalable=no" />
   <meta charset="UTF-8" />
   <title>贪吃蛇</title>
   <style>
   *{padding:0;margin:0;}
    html,body{width:100%;height:100%;overflow:hidden;}
    body{background:#ccc;}
    .title{padding:10px;text-align:center;font-size:24px;color:#26f;text-shadow:0 0 5px #4bab78;}
    .title>small{padding:0 15px;font-size:14px;font-weight:400;}
    .panel{width:500px;margin:10px auto;position:relative;}
    #canvas{display:block;border:1px solid #fff;background:#fff;box-shadow:0 0 10px #000;}
    .control{position:absolute;top:0;left:350px;}
    .btn{width:80px;height:30px;}
    .control>.container{padding:5px 10px;margin-bottom:15px;text-align:center;}
    .get_score,.max_score{display:block;width:80px;padding:5px 10px;text-align:center;border:1px solid #ccc;background:#26f;color:#fff;}
   </style>
</head>
<body>
<h2 class="title">贪吃蛇<small>键盘上下左右控制</small></h2>
<div class="panel">
    <canvas id="canvas">您的浏览器不支持canvas</canvas>
    <div class="control">
        <div class="container">
            <label for="">score: </label><span id="get_score" class="get_score">得分</span>
        </div>
        <div class="container">
            <label for="">maxscore: </label><span id="max_score" class="max_score">最高分</span>
        </div>
        <div class="container">
            <button id="reset" class="btn">重新开始</button>
        </div>
    </div>
</div>
<script type="text/javascript">
// 绘制圆
function circle(ctx,data,s_style,f_style) {
    ctx.save();
    ctx.beginPath();
    ctx.arc(data.rx,data.ry,data.r,data.start,data.end,data.dir);
    ctx.fillStyle=f_style || "#fff";
    ctx.strokeStyle=s_style || "#666";
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}
function init() {
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var btnReset=document.getElementById("reset");
    var labGet=document.getElementById("get_score");
    var labMax=document.getElementById("max_score");

    canvas.width=300;
    canvas.height=300;
    // 坐标
    function coord() {
        ctx.beginPath();
        for (var i=0;i<31;i++) {
        ctx.moveTo(0,i*10);
            ctx.lineTo(300,i*10);
            ctx.strokeStyle="#333";
        }
        ctx.stroke();
        ctx.beginPath();
        for (var j=0;j<31;j++) {
            ctx.moveTo(j*10,0);
            ctx.lineTo(j*10,300);
            ctx.strokeStyle="#333";
        }
        ctx.stroke();
    }
    // 占位坐标 (10,10,290,290)
    var flag=[];
    function coordLabel(cx,cy,arrX,arrY) {
        // 清空所有数据，初始化
        for (var i=0;i<300;i++) {
            flag[i]=[];
            for (var j=0;j<300;j++) {
                flag[i][j]=0;
            }
        }
        // 设置蛇头的占位标志为-1
        flag[cx][cy]=-1;
        // 设置蛇身的占位坐标标志为1
        for (var k=0,len=arrX.length;k<len;k++) {
            flag[(+arrX[k])][(+arrY[k])]=1;
        }
        // console.log(flag[60][230]);
    }
    // 碰撞检测
    function isStop(cx,cy) {
        var stop=false;
        if (cx>=297 || cy>=297 || cx<=3 || cy<=3) {
            stop=true;
        }
        return stop;
    }
    // 绘制蛇
    function drawSnake(cx,cy,len) {
        // 蛇头
        circle(ctx,{
        rx:cx,
        ry:cy,
        r:5,
        start:0,
        end:2*Math.PI,
        },"#333","#26f");
        // 蛇身
        for (var i=len-1;i>=0;i--) {
            circle(ctx,{
            rx:arrX[i],
            ry:arrY[i],
            r:5,
            start:0,
            end:2*Math.PI,
            },"#333",'#0c3');
        }
    }
    // 绘制苹果 (10,10 290,290)
    function drawApple(ax,ay) {
        circle(ctx,{
            rx:ax,
            ry:ay,
            r:5,
            start:0,
            end:2*Math.PI,
        },"#333","#f20");
    }

    var cx=60;
    var cy=240;
    var arrX=[];
    var arrY=[];
    var snake_len=(3-1);
    var timer;
    var fps=6;
    var score=0;
    var count=0;
    var arrScore=[];
    var maxScore=0;
    labGet.innerHTML=score+'分';
    labMax.innerHTML=maxScore+'分';
    // 队列数据初始化
    for (var i=0,len=snake_len;i<len;i++) {
        arrX.push(60);
        arrY.push(260-10*i); // [260,250]
    }
    // 页面初始化
    coord();
    drawSnake(cx,cy,2);
    coordLabel(cx,cy,arrX,arrY);
    // 生成苹果
    var ax=Math.floor(Math.random()*270+10);
    var ay=Math.floor(Math.random()*270+10);
    while (flag[ax][ay]===1) {
        ax=Math.floor(Math.random()*270+10);
        ay=Math.floor(Math.random()*270+10);
    }
    drawApple(ax,ay);
    // 页面初始化
    function initFunc() {
    cx=60;
        cy=240;
        fps=6;
        snake_len=(3-1);
        arrX=[];
        arrY=[];
        for (var i=0,len=snake_len;i<len;i++) {
        arrX.push(60);
        arrY.push(260-10*i);  // [260,250]
    }
    score=0;
    count=0;
    labGet.innerHTML=score+'分';
    ctx.clearRect(0,0,300,300);
        coord();
    drawSnake(cx,cy,snake_len);
        drawApple(ax,ay);
    }
    // 主函数
    function mainFunc(strExc) {
        // 页面初始化
        ctx.clearRect(0,0,300,300);
        coord();
        drawApple(ax,ay);
        // 撞墙检测
        if (isStop(cx,cy)) {
            clearInterval(timer);
            alert("Game Over!!!");
            initFunc();
        } 
        // 绘制蛇
        drawSnake(cx,cy,snake_len);
        // 存储数据 队列 先进先出
        arrX.push(cx); 
        arrX.shift(); 
        arrY.push(cy); // 入队   [260,250,240*]   [250,240,230*]
        arrY.shift(); // 出队  [250,240]       [240,230]   
        // 执行运动语句
        eval(strExc);    // 230   220
        // 吃苹果
        if (Math.abs(cx-ax)<=7 && Math.abs(cy-ay)<=7) {
            // 计算得分及最高分
            count++;
            console.log('吃了'+count+'个苹果');
            score=count*100;
            arrScore.push(score);
            maxScore=Math.max.apply(null,arrScore);
            labGet.innerHTML=score+'分';
            labMax.innerHTML=maxScore+'分';
            // 增加游戏难度
            if (count%5===0) {
                fps=fps+1;
                console.log('fps: '+fps,'count: '+count);
                // 重新生成苹果坐标
                ax=Math.floor(Math.random()*20)+260;
                ay=Math.floor(Math.random()*20)+260;
                while (flag[ax][ay]===1) {
                    ax=Math.floor(Math.random()*20)+260;
                    ay=Math.floor(Math.random()*20)+260;
                }
            } else {
                // 重新生成苹果坐标
                ax=Math.floor(Math.random()*270+10);
                ay=Math.floor(Math.random()*270+10);
                while (flag[ax][ay]===1) {
                    ax=Math.floor(Math.random()*270+10);
                    ay=Math.floor(Math.random()*270+10);
                }
            }

            drawApple(ax,ay);
            // 蛇身增长一节
            snake_len+=1;
            arrX.push(cx); // 入队
            arrY.push(cy);
        }
        // 记录蛇的占位坐标
        coordLabel(cx,cy,arrX,arrY);
        // 幢到自己身体检测
        for (var m=0,len=arrX.length-1;m<len;m++) {
            if (cx===arrX[m] && cy===arrY[m]) {
                clearInterval(timer);
                alert('蛇撞到自己了');
                console.log(cx,cy,arrX,arrY);
                initFunc();
            }
        }
    }

    //  用户操作UI
    document.onkeydown=function (ev) {
        var ev=ev?ev:window.event;
        // 左
        if (ev.keyCode===37) {
            clearInterval(timer);
            timer=setInterval(function () {
                mainFunc('cx=cx-10;cy=cy;');
            },1000/fps);
        }
        // 上
        if (ev.keyCode===38) {
            clearInterval(timer);
            timer=setInterval(function () {
                mainFunc('cx=cx;cy=cy-10;');
            },1000/fps);
        }
        // 右
        if (ev.keyCode===39) {
            clearInterval(timer);
            timer=setInterval(function () {
                mainFunc('cx=cx+10;cy=cy;');
            },1000/fps);
        }
        // 下
        if (ev.keyCode===40) {
            clearInterval(timer);
            timer=setInterval(function () {
                mainFunc('cx=cx;cy=cy+10;');
            },1000/fps);
        }
    };

    // 重新开始
    btnReset.onclick=function () {
        clearInterval(timer);
        alert("Ready Go!!!");
        // 页面初始化
        initFunc();
        maxScore=0;
        arrScore=[];
        labMax.innerHTML=maxScore+'分';
    };

}
window.addEventListener("load",init,false);
</script>
</body>
</html>
abcdef_fedcba
关注
基于html5贪吃蛇小游戏,使用HTML5 Canvas制作贪吃蛇小游戏
weixin_31282459的博客
05-31 392
近重要在研究OAuth2，等demo完成了，会给大家来一个专题分享。看到我身边的一个同事在玩 蛇蛇争霸 感觉蛮有意思的，这里找了一个 贪吃蛇的游戏 分享给大家。按理说canvas与其应用是老生常谈了，可我在准备阶段却搜索不到有用的资料(不是代码！)，所以说呢，只能自力更生.首先是大致要考虑的东西：1.要有蛇(没蛇怎么叫贪吃蛇)。2.然后要有地图(蛇是不能上天的)。3.不能水平\垂直掉头(如果想掉头...
贪吃蛇-开发版
05-17
本项目以"贪吃蛇-开发版"为主题，利用HTML5的Canvas API、CSS3以及JavaScript技术，实现了贪吃蛇游戏的核心功能，包括蛇体移动、食物随机生成、边界与障碍物碰撞检测以及键盘控制等。下面我们将详细解析这些关键知识...
canvas实现贪吃蛇
01-12
使用canvas写的一个简易版的贪吃蛇。整体比较简单，注释很详细。 凑够50字！！！凑够50字！！！凑够50字！！！凑够50字！！！凑够50字！！！
Canvas 实现一个特别简单的贪吃蛇
weixin_34220834的博客
11-13 151
Intro 点击预览 在之前的代码风格，和样式上做了大调整，如下图，主要是美化了移动端 Before After Start 移动端：中间的圆点按钮是重新开始，周围的方向按钮和游戏手柄操作一样 web端：键盘方向键控制 Technology stack Typescript rollup yarn canvas API Done 本次得分 历史最高分 移动端、web端适配 Todo ...
canvas贪吃蛇
Edasi的博客
02-21 223
html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D...
canvas贪吃蛇游戏
dgush2000的博客
09-06 225
用canvas做了一个贪吃蛇小游戏 开始界面 游戏界面 结束界面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...
Canvas实现的键盘控制的类似贪吃蛇的小鬼吃人游戏.zip
最新发布
09-25
这是一个基于HTML5 Canvas技术开发的键盘控制游戏，游戏主题类似于“小鬼吃人”，与经典的“贪吃蛇”游戏有异曲同工之妙。在这个游戏中，玩家通过键盘操作一个角色，目标是让这个角色在游戏环境中移动并吞噬特定的...
HTML5 canvas简单贪吃蛇小游戏.zip
05-25
在这个项目中，我们可以看到如何使用Canvas来创建这些元素，并通过JavaScript来控制它们的运动和交互。 3. **蛇的实现** 蛇由多个身体部分组成，每个部分都有自己的坐标。在Canvas上，可以通过移动和绘制矩形或...
贪吃蛇简单源码
11-27
还有Rigidbody2D组件，用于处理物理运动。 接下来，我们需要关注脚本部分。在Unity中，C#语言用于编写游戏逻辑。源码中可能会有以下几个关键脚本： 1. `SnakeBody.cs`：这是控制蛇移动和增长的脚本。它会维护一个...
一款简单的使用键盘按键的Html5贪吃蛇特效
09-25
Html5 贪吃蛇特效是一款简单的使用键盘按键的游戏效果，游戏规则：按上下左右键控制方向。
Javascript + canvas 实现贪吃蛇小游戏
10-17
html5+javascript 实现贪吃蛇小游戏 实现功能升级 闯关升级
Snake:使用 p5js 库的贪吃蛇游戏
06-18
蛇 使用 p5js 库的贪吃蛇游戏 待办事项列表 - 不要撞到自己 - 阻止蛇撞到自己 - 如果朝一个方向走就不能走相反的方向
利用js实现贪吃蛇小游戏
08-05
使用HTML、CSS、JavaScript技术实现简单的贪吃蛇小游戏
p5snake:使用P5JS创建的Snake游戏
04-28
p5蛇 使用P5JS创建的Snake游戏 安装依赖项： npm install 运行代码： npm start 或者 在这里玩
贪吃蛇（canvas+javaScript）
CHENJINGBIN的博客
03-21 387
贪吃蛇是一个比较老的游戏，但是很有趣。那我们要怎么去实现呢？ 用h5+javaScript去实现，实现思路： 1画线条也就是画格子。 2定义蛇，然后初始化，画出一条蛇。 3随机生成食物，并画出。 4定义一个移动函数，使蛇运动起来。 5吃到食物蛇身边长。 6判断蛇是否死掉。<!doctype html> <html> <head> <meta http-equiv="content-ty
canvas简单实现贪吃蛇
m0_52387040的博客
05-13 443
<!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>Doc
利用canvas完成贪吃蛇游戏
F_eve的博客
04-18 305
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { .
HTML5 Canvas实现贪吃蛇（一）
书山路遥
02-14 2190
html5 game
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值