canvas学习案例之贪吃蛇

最新推荐文章于 2021-08-09 21:17:10 发布
最新推荐文章于 2021-08-09 21:17:10 发布
阅读量299 收藏 2
点赞数 1
分类专栏： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangshang1320/article/details/87716034
版权 
最近在看canvas画板，就自己尝试写一个简单的小例子 贪吃蛇  
涉及到的点有：碰撞检测，数组操作，canvas图形绘制，定时器，es6的类的使用
废话不多说直接上代码吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .score span {
            margin-left: 10px;
            vertical-align: middle;
            font-size: 28px;
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>

<canvas width="800" height="500" id="snake"></canvas>
<div class="score">分数:
    <span id="score"></span>
</div>
</body>
<script>
    const WIDTH = 20;
    let cxt;//canvas上下文对象
    let snakes = [];//蛇数组
    let interval = null;//定时器
    let speedX = 0;//x轴速度
    let speedY = 0;//y轴速度
    let directionType = 0;//当前移动的方向 1.上 2.右 3.下 4.左
    let food;//食物对象
    let score = 0;//分数

    function init() {
        initCanvas();
        updateScore();
    }

    function initCanvas() {
        cxt = document.getElementById('snake').getContext('2d');
        cxt.fillStyle = '#eee';
        cxt.fillRect(0, 0, 800, 500);

        let subBox = new SubBox(cxt);
        subBox.drawBox();//画小格子
        snakes.push(new Snake(cxt, 100, 20));
        snakes.push(new Snake(cxt, 80, 20));
        snakes.push(new Snake(cxt, 60, 20));
        snakes.push(new Snake(cxt, 40, 20));
        let snake = new Snake(cxt, 20, 20);
        snakes.push(snake);
        food = new Food();
        food.getRandPlace();
        // 区分一下requestAnimationFrame（会自动计算动画间隔）和setInterval（自己设定） 两个动画的区别
        // window.requestAnimationFrame(function () {
        //     startAnimate(snake);
        // });
        console.log('food', food);
        startAnimate(3);

    }

    function stopAnimate() {
        if (interval) {
            clearInterval(interval);
        }
    }

    function restore() {
        cxt.fillStyle = '#eee';
        cxt.fillRect(0, 0, 800, 500);
        let subBox = new SubBox(cxt);
        subBox.drawBox();//画小格子
        food.draw();
    }
    function startAnimate(type) {
        // window.requestAnimationFrame(function () {
        //     startAnimate(snake);
        // });
        if ((directionType - type) % 2 != 0) {
            directionType = type;
            getSpeed(type);
        }
        stopAnimate();
        interval = setInterval(function () {
            //循环调用多次canvas Api 会比较耗性能  换个方式
            // for (let i = 0; i < snakes.length; i++) {
            //     let snake = snakes[i];
            //     snake.remove();
            // }
            restore();

            // debugger
            let len = snakes.length;//缓存数组的长度
            snakes[len - 1].x = snakes[0].x + speedX;
            snakes[len - 1].y = snakes[0].y + speedY;
            let a = snakes.pop();
            snakes.unshift(a);

            console.log('snakes hou', snakes);
            for (let i = 0; i < snakes.length; i++) {
                let snake = snakes[i];
                snake.draw();
            }
            if (hitSelf() || hitWall()) {
                gameOver(interval);
            }
            if (hitCheck(snakes[0], food)) {
                //    增加一个
                stopAnimate();
                addSnake();
                startAnimate(type);
                food.getRandPlace();
                food.draw();
                score++;
                updateScore();
            }
        }, 200);

    }

    function addSnake() {
        let len = snakes.length;
        let nX = snakes[len - 1].x;
        let nY = snakes[len - 1].y;
        let snake = new Snake(cxt, nX, nY);
        snakes.push(snake);
    }

    function updateScore() {
        let scoreDom = document.getElementById('score');
        scoreDom.innerText = score;
    }

    function gameOver(interval) {
        if (interval) {
            clearInterval(interval);
        }
        console.log('game over');
        alert('Game Over!');

    }

    //碰撞检测 食物与snake
    function hitCheck(snake, food) {
        let isHit = false;
        if (!(snake.x < food.x || snake.x > food.x + 18 || snake.y < food.y || snake.y > food.y + 18)) {
            isHit = true;
        }
        return isHit;
    }

    //碰撞检测  snake 和墙壁
    function hitWall() {
        let isHit = false;
        let headSnake = snakes[0];//第一个head
        if (headSnake.x >= 800 || headSnake.x < 0 || headSnake.y >= 500 || headSnake.y < 0) {
            isHit = true;
        }
        return isHit;
    }

    //碰撞检测 snake 和自己
    function hitSelf() {
        let isHit = false;
        let headSnake = snakes[0];
        for (let i = 1; i < snakes.length; i++) {
            let snake = snakes[i];
            if (!((headSnake.x > snake.x + 18) || (headSnake.y < snake.y) || (headSnake.y > snake.y + 18) || (headSnake.x < snake.x))) {
                isHit = true;
                break;
            }
        }
        return isHit;
    }

    class SubBox {
        constructor(context) {
            this.width = WIDTH;
            this.context = context;
            this.context.beginPath();

        }

        drawBox() {
            let allWidth = document.getElementById('snake').width;
            let allHeight = document.getElementById('snake').height;
            this.context.beginPath();
            this.context.strokeStyle = '#ddd';
            this.context.lineWidth = 1;
            //横向
            for (let i = 0; i < allHeight / this.width; i++) {
                this.context.moveTo(0, (i + 1) * this.width);
                this.context.lineTo(allWidth, (i + 1) * this.width)
            }
            //纵向
            for (let i = 0; i < allWidth / this.width; i++) {
                this.context.moveTo((i + 1) * this.width, 0);
                this.context.lineTo((i + 1) * this.width, allHeight);
            }
            this.context.stroke();
            
        }

    }

    class Snake {
        constructor(context, x, y) {
            this.x = x;
            this.y = y;
            this.width = 20;
            this.height = 20;
            this.color = '#ff0000';
            this.context = context;
            this.draw(this.x, this.y, this.width, this.height);
        }

        draw() {
            let width = this.width;
            let x = this.x;
            let y = this.y;
            this.context.fillStyle = this.color;
            this.context.fillRect(x, y, width, width);
            this.context.save();
        }

        //涉及到转弯  有个转弯点  所有的小方块过了转弯点type 才会改变
        move(type) {

            if (type) {
                this.type = type;
            }

            // console.log('t',this.type);
            //清楚之前的
            this.remove();

            switch (this.type) {
                case 4:
                    speedX = -20;
                    speedY = 0;
                    this.x = this.x - 20;
                    break;
                case 1:
                    speedX = 0;
                    speedY = -20;
                    this.y = this.y - 20;
                    break;
                case 2:
                    speedX = 20;
                    speedY = 0;
                    this.x = this.x + 20;
                    break;
                case 3:
                    speedX = 0;
                    speedY = 20;
                    this.y = this.y + 20;
                    break;
            }

            this.draw();
        }

        remove() {
            this.context.clearRect(this.x, this.y, this.width, this.height);
            cxt.fillStyle = '#eee';
            cxt.fillRect(this.x, this.y, this.width, this.height);
            cxt.strokeRect(this.x, this.y, this.width, this.height);
        }
    }

    function getSpeed(type) {
        switch (type) {
            case 4:
                speedX = -20;
                speedY = 0;
                break;
            case 1:
                speedX = 0;
                speedY = -20;
                break;
            case 2:
                speedX = 20;
                speedY = 0;
                break;
            case 3:
                speedX = 0;
                speedY = 20;
                break;
        }
    }

    class Food {
        constructor() {
            //食物随机生成
            this.x = 0;
            this.y = 100;
            this.color = '#000f43';
        }

        getInteger(number) {
            if (number % 20 == 0) {

                return number;
            } else {
                return this.getInteger(++number);
            }
        }

        isOverlap() {
            let isSnakeLoc = false;
            for (let i = 0; i < snakes.length; i++) {
                let snake = snakes[i];
                if ((snake.x == this.x) && (this.y == snake.y)) {
                    isSnakeLoc = true;
                    break;
                }
            }
            return isSnakeLoc;
        }
        getRandPlace(){
            this.x = this.getInteger(parseInt(Math.random() * 780));
            this.y = this.getInteger(parseInt(Math.random() * 480));
        }

        draw() {
            if (this.isOverlap()) {
                this.getRandPlace();
                this.draw();
            } else {
                cxt.fillStyle = this.color;
                cxt.fillRect(this.x, this.y, WIDTH, WIDTH);
                cxt.save();
            }


        }
    }

    //键盘事件
    document.onkeydown = function (e) {
        let event = e || window.event;
        let keyCode = event.keyCode;
        switch (keyCode) {
            case 37:
                //左
                startAnimate(4);
                break;
            case 38:
                //上
                startAnimate(1);
                break;
            case 39:
                //右
                startAnimate(2);
                break;
            case 40:
                //下
                startAnimate(3);
                break;
        }
    };

    init();
</script>
</html>
wangshang1320
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas 贪吃蛇大作战
锋利的二丫
10-09 5205
阅读需知 这个游戏是给小白练手的，大神请饶命 只有一条蛇，别说我骗你 目的是为了练习 JS + Canvas 的逻辑 代码虽然不难，但由于本人能力有限，所以计算过程还是有一丢烧脑，所以 … 谁抄咬谁，转载啥的，注明出处 效果 蛇的小眼睛看到了吗，很 Q 有没有 代码如下 html: <!DOCTYPE html> <html lang="en"> <head&gt...
用canvas 做一个简易的贪吃蛇
qq_44812000的博客
03-31 419
HTML的样式 <head> <meta charset="utf-8"> <title>贪吃蛇</title> <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script> <style type="text/css"&gt...
Javascript + canvas 实现贪吃蛇小游戏
10-17
html5+javascript 实现贪吃蛇小游戏 实现功能升级 闯关升级
使用canvas实现贪吃蛇
cheer
08-09 1046
使用canvas实现贪吃蛇 文章目录使用canvas实现贪吃蛇前言一、组件版本&项目结构二、代码讲解1. 移动snake1.1 代码1.2 知识点总结 前言 本文章讲述如何使用vue+canvas实现经典游戏贪吃蛇。体验游戏贪吃蛇 - AO，源码仅供学习参考。你需要知道vue框架，element ui帮助你快速快速开发。 一、组件版本&项目结构 查看详细 二、代码讲解 以下讲解自己写的代码，不会讲解canvas具体怎么实现的。也许可以参考以前的文章使用canvas 的资料 1. 移动
document.getElementById
热门推荐
xx_yan的博客
03-28 2万+
var element = document.getElementById(id); 因为Id具有唯一性，所以这个方法用来查找页面中的某一个元素。 无Id元素的查找可以使用CSS选择器 querySelector() 参数 id 大小写敏感的字符串，指代被查找元素 返回值 elemnt 一个DOM中匹配id的Element对象。未查找到此id的Element时，返回null。 注意 get...
canvas贪吃蛇案例
07-15
html模拟贪吃蛇游戏,使用了初级canvas,游戏仍在改进中
非常简单的canvas贪吃蛇
09-20
【标题】"非常简单的canvas贪吃蛇"是一个利用HTML5的Canvas API实现的贪吃蛇游戏。这个项目展示了如何在网页上用纯...这对于想要提升前端开发技能，尤其是对canvas感兴趣的开发者来说，是一个很好的实践案例。
原生js+canvas实现贪吃蛇效果
10-15
在这个案例中，Canvas用于渲染贪吃蛇游戏的图形界面。`<canvas>`元素首先被定义在HTML中，然后通过JavaScript获取其2D渲染上下文（`ctx`），用于进行画布上的绘制操作。 2. **Node类**（Node.js）： `Node`类表示...
JavaScript贪吃蛇案例
11-26
首先，`案例贪吃蛇.html` 是主HTML文件，它包含了游戏的界面结构。在HTML中，通常会有一个canvas元素，它是游戏的画布，用于绘制贪吃蛇和食物的位置。同时，HTML还可能包含一些样式（CSS）和JavaScript引用，用于...
C#应用案例之贪吃蛇
你的小甜甜的博客
05-26 816
本次的应用案例用到为WPF 应用 需要解决的问题(过程) 1.创建蛇 这里我们可以封装一个方法(私有的)用来装蛇的头部和身体 为蛇设置初始出现的位置已及初始的移动方向 2.创建食物 也封装一个方法(私有的)用来装食物 食物应该随机的出现在游戏界面的任何地方 3.创建键盘事件用键盘的方向键来控制蛇的(上下左右)移动,并用计时器来控制蛇的移动 4.创建游戏开始和暂停的按钮 用来控制蛇移动的计时器的开和关 5.当蛇的头部碰撞到食物时,将食物随机到其他位置并为蛇创建一节新的身体(相当于蛇吃掉食物增加
canvas效果案例：五角星
07-10 499
参悟参悟，绘制一个属于你的五角星吧，结合之前知识点，完全可以绘制出一个标准的五角星 效果： 首先屡屡想法 1 五角星有几个角？ 五个角！ 错啦~ 十个角： 分为五个外角，五个内角 2.找准角的坐标，将每个角都连接起来，那么五角星就出来了 我们可以先找外角(图上所示) 红色的线所呈现的夹角就是两个外角形成的夹角 360 / 5 = 72° 三点钟方向0 °~ 到外角起始角的度数 18...
canvas+js实现简单的贪吃蛇小游戏
zem
08-15 2012
贪吃蛇作为一个经典的游戏，直到现在还有不少人在玩，但是比起玩别人的游戏，还是玩自己的游戏比较有成就感，本篇博文就将告诉大家如何用<canvas>+js实现简单的贪吃蛇小游戏，如果对canvas的API不了解的同学请先学习canvas的基础知识再看本文。 本人还只是入坑前端不久，如有哪些做的不好，还请各位大神指出。 首先，在写游戏开始，我们要先写一个简单的html文件，这里不考虑美观...
原生JS+Canvas实现五子棋游戏实例
老于
08-08 371
简单五子棋的实现
HTML5 canvas游戏开发实战 6 : 俄罗斯方块
Just for fun的专栏
02-07 2450
6.1 游戏分析    图片描画    文字绘制    循环播放事件    键盘事件    触屏事件    游戏层次划分：背景层、进度条显示层、方块绘制层，方块预览层4层。 6.2 必要的JavaScript知识    这款游戏的重点在于二维数组的应用，通过建立二维坐标数组，可实现方块的移动、变形以及判定。    JS中定义二维数组的定义如下： var a = new Arra
一个简单的canvas案例
Jinmy的博客
09-11 2778
canvas的流程： 1.检测widow是否加载完成 2.检测是否支持canvas，有3种方法，案例用第3种：使用引入modernizr.js，到官网www.modernizr.com下载 3.创建画布实例，获取2D上下文 4.drawScreen() 5.标签元素&lt;canvas id="canvas" width="500" height="400"&gt; ...&lt;/ca...
canvas实例
lomenw的博客
03-27 2289
function draw(id){               var canvas = document.getElementById(id);               if(canvas == null)               return false;               var context = canvas.getContext('2d');//getCon
HTML5小游戏贪吃蛇分析与实现
liusaint1992的专栏
01-13 1万+
HTML5小游戏贪吃蛇分析与实现。
Html5 小球键盘移动
weixin_34332905的博客
07-24 305
&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body onkeydown="test()"&gt; &
HTML5 之 Canvas （案例）
快乐小芍籽
02-20 2187
**星星闪动动画** 1、如何轮播一张图片上的序列帧 2、canvas的几个主要绘图API：drawImage()、save()、restore()。 3、如何处理鼠标事件 笔记： Window API： 循环调用三种方法： requestAnimFrame(fcuntion(){}); //根据电脑性能确定每次回调的时间（循环时间），更科学，提高效率 setTimeout(fu
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值