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

最新推荐文章于 2022-05-13 08:45:47 发布
最新推荐文章于 2022-05-13 08:45:47 发布
阅读量546 收藏
点赞数
文章标签： 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
关注
Canvas实现的键盘控制的类似贪吃蛇的小鬼吃人游戏.zip
09-25
这是一个基于HTML5 Canvas技术开发的键盘控制游戏，游戏主题类似于“小鬼吃人”，与经典的“贪吃蛇”游戏有异曲同工之妙。在这个游戏中，玩家通过键盘操作一个角色，目标是让这个角色在游戏环境中移动并吞噬特定的...
互动应用开发p5.js——网页小游戏——贪吃蛇
加载中.......
01-20 1342
贪吃蛇 一、实验内容： 基于课件改进贪吃蛇或者太空大战的小游戏，可以加入新的视觉效果，比如区分蛇头和蛇身；为食物增加特效；分数排行榜；行进改成可以循环等等； 尽可能丰富游戏的玩法。 评分标准： 游戏界面及功能 （70分） 用户体验 （10分） 代码规范（20分）
利用canvas完成贪吃蛇游戏
F_eve的博客
04-18 315
<!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 { .
canvas系列教程05 ——交互、动画
朝阳39的博客
04-25 2327
交互 实时获取鼠标在Canvas中的坐标 //将tools定义为window对象的属性，该属性的值是一个对象 window.tools = {}; //获取鼠标位置 window.tools.getMouse = function (element) { //定义一个mouse的对象 var mouse = { x: 0, y: 0 }; //为传入的元素添加mousemove事件 addEvent(element, "mousemove", function (e) { .
HTML5 Canvas鼠标与键盘事件
jishublog
07-04 1111
演示HTML5 Canvas鼠标事件，获取Canvas对象上的鼠标坐标，演示键盘事件 通过键盘控制Canvas上对象移动。 Canvas对象支持所有的JavaScript的鼠标事件，包括鼠标点击(MouseClick), 鼠标按下 (Mouse Down), 鼠标抬起(Mouse Up),鼠标移动( Mouse Move) 对Canvas添加鼠标事件方式有两种，一种方式是通过API来完成：...
让Canvas支持键盘事件
shjy.nicholas
08-23 1091
Canvas自身是不响应键盘事件的，可以添加如下代码是Canvas具备这个功能。 AS 代码 var v:Canvas = new Canvas();    v.addEventListener(KeyboardEvent.KEY_DOWN,OnkeyDown);    v.addEventListener(MouseEvent.MOUSE_UP.OnMouseUP)...
HTML5 canvas简单贪吃蛇小游戏.zip
05-25
在这个项目中，我们可以看到如何使用Canvas来创建这些元素，并通过JavaScript来控制它们的运动和交互。 3. **蛇的实现** 蛇由多个身体部分组成，每个部分都有自己的坐标。在Canvas上，可以通过移动和绘制矩形或...
贪吃蛇-开发版
05-17
本项目以"贪吃蛇-开发版"为主题，利用HTML5的Canvas API、CSS3以及JavaScript技术，实现了贪吃蛇游戏的核心功能，包括蛇体移动、食物随机生成、边界与障碍物碰撞检测以及键盘控制等。下面我们将详细解析这些关键知识...
贪吃蛇简单源码
11-27
还有Rigidbody2D组件，用于处理物理运动。 接下来，我们需要关注脚本部分。在Unity中，C#语言用于编写游戏逻辑。源码中可能会有以下几个关键脚本： 1. `SnakeBody.cs`：这是控制蛇移动和增长的脚本。它会维护一个...
Java 贪吃蛇小游戏
01-16
- **蛇的移动**：贪吃蛇的基本运动机制是每一定时间间隔更新其位置，通常通过定时器实现。蛇的头部坐标会根据设定的方向进行更新，而尾部坐标则需要根据蛇的身体长度动态调整。 - **碰撞检测**：要检测蛇是否撞到...
WriteLittleGames:利用p5js编写的小游戏
05-04
P5Games 与zyc的交流学习过程中，使用p5js部件进行2d游戏编程。 学习主页 初级游戏 snake 贪吃蛇 进阶游戏
Snake:使用 p5js 库的贪吃蛇游戏
06-18
蛇 使用 p5js 库的贪吃蛇游戏 待办事项列表 - 不要撞到自己 - 阻止蛇撞到自己 - 如果朝一个方向走就不能走相反的方向
利用js实现贪吃蛇小游戏
08-05
使用HTML、CSS、JavaScript技术实现简单的贪吃蛇小游戏
p5canvas:在Visual Studio Code中编写p5js代码的交互式预览
05-02
p5帆布 p5canvas扩展允许您在画布中与代码并排预览p5js代码。 画布在编辑时实时刷新。 图片由Quynh Han Tran提供 包含一个标准的安装脚本，该脚本可设置将自动调整大小的全幅/高幅画布。 在下一个版本中，它将变为可选。 特征 边预览边编辑JavaScript文件 JSHint集成发现错误 使用相对路径加载图像 将当前画布另存为PNG（作为命令） 完全兼容ES 6 支持Beta中的import声明 设置 可以通过搜索p5canvas从VS Code的“扩展”菜单中安装此p5canvas 。 您也可以从终端运行ext install garrit.p5canvas ，或转到ext install garrit.p5canvas下载vsix文件并手动安装。 最后一种方法在VS Codium中也适用。 用法 如果打开了JavaScript文件，则会在状态栏左下方显示一个p
贪吃蛇代码html和JavaScript实现
01-19
贪吃蛇游戏是一款经典的益智游戏，有PC和手机等多平台版本。既简单又耐玩。该游戏通过控制蛇头方向吃蛋，从而使得蛇变得越来越长。 此代码用html和JavaScript实现贪吃蛇，非常适合编程练习。
canvas简单实现贪吃蛇
m0_52387040的博客
05-13 460
<!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
Javascript + canvas 实现贪吃蛇小游戏
10-17
html5+javascript 实现贪吃蛇小游戏 实现功能升级 闯关升级
canvas实现贪吃蛇
01-12
使用canvas写的一个简易版的贪吃蛇。整体比较简单，注释很详细。 凑够50字！！！凑够50字！！！凑够50字！！！凑够50字！！！凑够50字！！！
HTML5 Canvas 鼠标点击与键盘控制实例
例如，可以通过监听键盘按键事件（如`keydown`和`keyup`），根据用户按下或释放的键来控制Canvas上的对象移动。这些事件处理函数可以根据用户输入实时调整Canvas图形的属性或位置。 本文的示例和代码演示了如何利用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值