效果如下

代码

<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><title>贪吃蛇</title><script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="./js/main.js"></script>
</body>
</html>

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
// 分数记录
let fraction = 0;
// 定义贪吃蛇的组成，方块对象
class Block{// 按照size的大小划分行列// 列col;// 行row;// 大小size;constructor(col, row, size){this.col = col;this.row = row;this.size = size;}// 画方法draw(){context.fillRect(this.col * this.size, this.row * this.size, this.size, this.size);}
}
// 蛇类
class Snake{body = [new Block(20, 20, 10), new Block(20, 21, 10)];direction = "right";apple;constructor(apple) {this.apple = apple;}draw(){for(let i = 0; i < this.body.length; i++){this.body[i].draw();}};move(){let head = this.body[0];// 用于生成新蛇的方块let newhead;if(this.direction == "right"){newhead = new Block(head.col + 1, head.row, head.size);}if(this.direction == "left"){newhead = new Block(head.col - 1, head.row, head.size);}if(this.direction == "up"){newhead = new Block(head.col, head.row - 1, head.size);}if(this.direction == "down"){newhead = new Block(head.col, head.row + 1, head.size);}// 增加头部this.body.unshift(newhead);// 进行判断蛇头是否碰到了苹果，若碰到了则不删除最后一个方块，反之删除最后一个方块if(newhead.col == this.apple.col&& newhead.row == this.apple.row){// 进行检测，如果生成在蛇身上，继续生成，反之结束循环while(true){this.apple.initialization();for(let i = 0; i < this.body.length; i++){if(this.apple.row == this.body[i].row&& this.apple.col == this.body[i].col){this.apple.initialization();}}break;}// 分数加入fraction++;}else{// 弹出this.body.pop();}};// 碰撞检测impactChecking(){// 获取头节点let newBody = this.body[0];console.log(newBody.col);// 查看行，列是否超过边界if(newBody.col > 40|| newBody.row > 40|| newBody.row < 0|| newBody.col < 0){alert("游戏结束");fraction = 0;this.body = [new Block(20, 20, 10), new Block(20, 21, 10)];}// 查看是否碰到自己身体for(let i = 1; i < this.body.length; i++){if(newBody.col == this.body[i].col&& newBody.row == this.body[i].row){alert("游戏结束");fraction = 0;this.body = [new Block(20, 20, 10), new Block(20, 21, 10)];}}}
}
// 实物，苹果类
class Apple{// 列col;// 行row;sizeR;constructor(){this.initialization();};// 初始化苹果initialization(){// 生成列坐标this.col = Math.floor(Math.random() * (40 - 1) + 1);// 生成行坐标this.row = Math.floor(Math.random() * (40 - 1) + 1);// 设置苹果半径this.sizeR = 5;}// 画苹果的方法draw(){// 颜色context.fillStyle = "Red";// 画苹果context.beginPath();// 圆心坐标context.arc(this.col * this.sizeR * 2 + this.sizeR, this.row * this.sizeR * 2 + this.sizeR, this.sizeR, 0, Math.PI * 2, false);// 填充context.fill();// 恢复原来颜色context.fillStyle = "Black";}
}
// 生成一个苹果
let apple = new Apple();
// 生成一个蛇
let snake = new Snake(apple);
setInterval(() => {context.clearRect(0, 0, 400, 400);// 绘制分数context.fillText("分数为 " + fraction, 10, 10);// 绘制蛇snake.draw();// 对蛇进行移动snake.move();// 绘制苹果apple.draw();// 进行检测snake.impactChecking();context.strokeRect(0, 0, 400, 400);
}, 200);
// 对贪吃蛇控制
// 上下左右运动
$("body").keydown((event) => {// 左if(event.keyCode == 37 && snake.direction != "right"){snake.direction = "left";}// 上if(event.keyCode == 38 && snake.direction != "down"){snake.direction = "up";}// 右if(event.keyCode == 39 && snake.direction != "left"){snake.direction = "right";}// 下if(event.keyCode == 40 && snake.direction != "up"){snake.direction = "down";}
});

思路

思路，蛇由两个类组成，方块类和蛇类，蛇类的存在依赖于方块类。蛇类当中的body保存当前蛇类的所有的方块。绘图，直接遍历body内部的所有绘图方法。移动，根据保存的私有变量方向用来对数组中保存的方块对象进行更改
还有一个苹果类。用于进行随机生成
吃苹果，在移动方法中，如果蛇的头方块和苹果方块重合那么吃到苹果，重新调用生成苹果方法。
碰撞检测，如果行和列超过范围，即碰撞发生
最重要的，坐标行和列化，使用的时候乘以一个数就行

canvas 绘制贪吃蛇游戏 1相关推荐

canvas 绘制贪吃蛇游戏
效果如下代码 <!DOCTYPE html> <html lang="zh_CN"> <head><meta charset=" ...
使用 HTML5 Canvas 标签的贪吃蛇游戏
https://thoughtbot.com/blog/html5-canvas-snake-game 保罗·詹森 2009 年 12 月 31 日更新于 2019年3 月 9 日这篇文章最初发 ...
Canvas实现贪吃蛇小游戏（面向对象）
Canvas实现贪吃蛇小游戏我们常常在网页上制作的小游戏都是通过Canvas实现的,虽然我们也可以使用DOM来实现,但是这样会更加的节约资源. 我们书写这个小游戏的目的主要是为了适应js中关于面向对 ...
记事本贪吃蛇游戏代码_如何用Python10分钟绘制贪吃蛇小游戏？
贪吃蛇是一款经典的益智游戏,有PC和手机等多种版本,既简单又耐玩.玩家通过上下左右键控制蛇的方向,寻找食物,每吃到一次食物,就能得到一定的积分,而且蛇的身体会越来越长.随着蛇的身体变长,游戏的难度就会 ...
php开发h5游戏,H5的canvas实现贪吃蛇小游戏
这次给大家带来H5的canvas实现贪吃蛇小游戏,H5的canvas实现贪吃蛇小游戏注意事项有哪些,下面就是实战案例,一起来看一下. 本文介绍了H5 canvas实现贪吃蛇小游戏,分享给大家,具体如下 ...
html5实现贪吃蛇小游戏,H5 canvas实现贪吃蛇小游戏
本文介绍了h5 canvas实现贪吃蛇小游戏,分享给大家,具体如下: 实现效果如下实现思路: ps:这个只是思路,详细可看代码注释一.先把蛇画出来定义一下蛇的结构,用一个数组保存一堆矩形,包含蛇 ...
基于HTML5的贪吃蛇游戏的设计与实现
基于HTML5的贪吃蛇游戏的设计与实现功能要求: 贪吃蛇游戏是一款经典的单机休闲游戏,玩家通过上下左右按键控制蛇头的移动方向使其向指定方向前进,并吃掉随机位置上产生食物来获得分数.每吃掉一次食物,贪 ...
贪吃蛇的使命之零基础入门贪吃蛇游戏（附演示地址）
作者: C you again,从事软件开发努力在IT搬砖路上的技术小白公众号: [C you again],分享计算机类毕业设计源码.IT技术文章.游戏源码.网页模板.程序人生等等.公众号回复 ...
java毕业设计——基于java+J2ME的贪吃蛇游戏设计与实现（毕业论文+程序源码）——贪吃蛇游戏
基于java+J2ME的贪吃蛇游戏设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+J2ME的贪吃蛇游戏设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦.需要下载开题报告P ...
自做贪吃蛇游戏的android实现
一直想自己动手做一个手机游戏,安装在自己的手机上,尽管应用或许会看起来很简单效果也不是很拉风,可是自己做的,那心情那感觉终究是不一样.今天,让我们一起探秘贪吃蛇游戏,用自己的双手玩转java代码打造属 ...

canvas 绘制贪吃蛇游戏 1

效果如下

代码

思路

canvas 绘制贪吃蛇游戏 1相关推荐

最新文章

热门文章