JAVA程序员笔记（第二阶段：前端）第7篇——JavaScript实现贪吃蛇小游戏

阅读：评论：0

不同模块写入注释中，稍难理解，加油。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0}</style></head>
<body></body><script>function SnakeGame() {ls = ws = 30;this.snake = [];//蛇本体的每一部分  是一个数组//初始化游戏是否开始this.playing = false;}SnakeGame.prototype = {/*** 初始化游戏窗口*/initGame() {this.screen = ateElement("div");// 设置 舞台定位方式为相对定位this.screen.style.position = "relative";this.screen.style.width = "400px";this.screen.style.height = "600px";this.screen.style.border = "5px solid lightblue"this.screen.style.margin = "100px auto 0";this.screen.style.fontSize = "0";//画出单元格for (let i = 0; i < ws; i++) {for (let j = 0; j < ls; j++) {// 创建一个 span 标签let span = ateElement("span");// 将 span 设置为 行内块span.style.display = "inline-block";span.style.width = "19px";span.style.height = "19px";span.style.borderRight = "1px solid #ddd"span.style.borderBottom = "1px solid #ddd"//给初始化的蛇身(左上角三个)添加 class = skif (i == 0 && j < 3) {span.classList.add("sk")}this.screen.append(span);}}//初始化蛇身 3个p标签for (let i = 0; i < 3; i++) {let p = ateElement("p");p.style.position = "absolute";p.style.width = "20px";p.style.height = "20px";p.style.backgroundColor = "#5bf";p = "0";p.style.left = i * 20 + "px";//第一二三格//将蛇头重置到最后的Pthis.snake.unshift(p);this.screen.appendChild(p);}//随机生成食物this.randomFood();this.spans = this.screen.querySelectorAll("span");document.body.appendChild(this.screen);},/*** 随机生成食物***/randomFood() {// 获取 没有蛇的所有 spanlet spans = this.screen.querySelectorAll("span:not(.sk)");// console.log(spans)// 随机产生一个 0 ~ spans.length 的 索引let index = Math.floor(Math.random() * spans.length)// 获取随机产生的 spanlet span = spans[index];// 动态创建一个 b 标签let tag = ateElement("b");tag.style.display = "block";tag.style.width = "10px"tag.style.height = "10px";tag.style.margin = "5px";tag.style.backgroundColor = "#d27"tag.style.borderRadius = "50%"// 将生成的 b标签，添加到 span 中span.appendChild(tag);},/*** 开始游戏*/start() {//初始化游戏this.initGame();//按下空格键，开始游戏  (绑定键盘事件)document.addEventListener("keydown", (event) => {//event.keyCode获取按键按下的编码(空格编码是32)if (event.keyCode == 32 && !this.playing) {this.dir = "right";//默认运动方向//开始游戏this.playing = setInterval(() => {//获取蛇头let sk = this.snake[0];//获得距离父元素的位置，用于移动let left = sk.offsetLeft;let tops = sk.offsetTop;//位移if (this.dir === "right") {left += 20;} else if (this.dir === "left") {left -= 20;} else if (this.dir === "top") {tops -= 20;} else if (this.dir === "down") {tops += 20;}this.addSnake(left, tops);}, 200)//修改速度-----------------------//改变运动方向} else if (this.playing && event.keyCode == 37 && this.dir != "right") {this.dir = "left";} else if (this.playing && event.keyCode == 38 && this.dir != "down") {this.dir = "top";} else if (this.playing && event.keyCode == 39 && this.dir != "left") {this.dir = "right";} else if (this.playing && event.keyCode == 40 && this.dir != "top") {this.dir = "down";}})},//获取块元素 坐标的方法//       距离边界的长度 / 单位块长度 = 本行(列)的 第几块getIndex(left, tops) {let x = left / 20;//第几列let y = tops / 20;//第几行return y * 20 + x;//没看懂。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。},//游戏结束gameOver() {alert("o(╥﹏╥)o 游戏该束");//游戏结束  停止轮询clearInterval(this.playing);//游戏初始化//删除舞台ve();//蛇身清0this.snake = [];//游戏状态改为falsethis.playing = false;//方向改为默认向右this.dir = "right";// 然后初始化舞台this.initGame();},//蛇的运动 以及 给蛇吃食物时增长//蛇的运动不是原有块的移动，而是不断给新块染色，添加属性等，让块变成蛇的身体//从而实现移动addSnake(left, tops) {//判断蛇头是否出界 左上右下都要判断if (left >= this.screen.clientWidth || tops < 0 || left < 0 || tops >= this.screen.clientHeight) {this.gameOver();return;//在这里返回  否则该次方法会运行完}//生成一个P标签 作为蛇移动时 需要的块let p = ateElement("p");p.style.position = "absolute";p.style.width = "20px";p.style.height = "20px";p.style.backgroundColor = "#5bf";// p.style.backgroundImage = "/.海豹.png";p = tops + "px";p.style.left = left + "px";//找到新生成的蛇头的span  给他添加一个 class = sk 代表是蛇身体的一部分//获取psanlet index = Index(left, tops);//新生蛇头的 span的坐标let span = this.spans[index];//蛇头吃食物的判定//判断该span上有没有食物let b = span.querySelector("b");if (b == null) {//没食物  正常移动//移除蛇尾let p2 = this.snake.pop();//移除数据中的蛇尾left = p2.offsetLeft;tops = p2.offsetTop;//移除网页中的蛇尾// 并把 代表 蛇身的属性 class = sk 清除index = Index(left, tops);//拿坐标let span2 = this.spans[index];//得到块ve("sk");//清除属性//屏幕中移除蛇尾p2.remove();} else {//有食物，删除(吃掉)食物块b.remove();//产生新的食物this.randomFood();}//判断是否咬到自身if (ains("sk")) {this.gameOver();return ;}//没有要到自身，这时可以先消除蛇尾，添加蛇头（消除与添加就是蛇移动的过程）span.classList.add("sk")// unshift 添加元素，保证最后的p 是蛇头this.snake.unshift(p);this.screen.appendChild(p);}}new SnakeGame().start();</script></html>