--_063
代码
<!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内部的所有绘图方法。移动，根据保存的私有变量方向用来对数组中保存的方块对象进行更改
还有一个苹果类。用于进行随机生成
吃苹果，在移动方法中，如果蛇的头方块和苹果方块重合那么吃到苹果，重新调用生成苹果方法。
碰撞检测，如果行和列超过范围，即碰撞发生
最重要的，坐标行和列化，使用的时候乘以一个数就行
