class Game { constructor(el) { // 获取表格元素 this.table = document.querySelector(el); // 利用数组遍历生成地图表格 this.generateTable(); } /* 利用二维数组生成一个10 x 10的表格地图界面，其中，每一行由一个标签组成，每个标签里边有10个标签结构如下： ... ... ... 行的坐标：第一行第一列代表0，第一行第二列代表1，第一行第三列代表2，以此类推... 列的坐标：第一行第一列代表0，第二行第一列代表1，第三行第一列代表2，以此类推... */ generateTable() { const trsText = Array.from({ length: 10 }, () => { const tdsText = Array.from({ length: 10 }, () => { return ` `; }).join(""); return `${tdsText}`; }).join(""); this.table.innerHTML = trsText; this.trs = Array.from(document.querySelectorAll("tr")); } // 界面清除方法 clear() { this.trs.forEach(tr => { const children = Array.from(tr.children); children.forEach(td => td.classList.remove("snake")); }); } } class Snake { constructor(game, food) { this.game = game; this.food = food; console.log(); /* 蛇的位置数组，由一个二维数组组成，一个元素代表蛇节点的位置数组。其中，位置数组的第一个元素代表行坐标（取值范围0~9），第二个元素代表列坐标（取值范围0~9）。如：[5, 5]代表蛇头。[[5, 6], [5, 7]]代表蛇的身体 */ this.queue = [[5, 5], [5, 6], [5, 7]]; // 通过监听键盘事件，利用this.queue 数组改变蛇的位置 this.snakeMove(); } // 获取蛇头 getHead() { return this.queue[0]; } /** * 用于保存上一次移动的蛇尾 * @param {Array} tail 这是一个一维数组，例如：若值为[5,6]，索引 0 的值 5 代表在第（5+1）行，索引 1 对应的值 6 代表在第（6+1）列 */ saveLastTail(tail) { this.tail = tail; } // 获取上一次移动的蛇尾 getLastTail() { return this.tail; } // 通过获取this.queue坐标，来更新蛇的位置 snakeUpdate() { this.game.clear(); this.queue.forEach(location => { const [row, col] = location; const ele = document.querySelectorAll("tr")[row].children[col]; if (ele) ele.classList.add("snake"); }); } // TODO：编写蛇的移动函数 snakeMove() { document.onkeydown=(e)=>{ const head = [...this.getHead()] console.log(head); this.saveLastTail(this.queue[this.queue.length-1]) switch (e.code) { case "KeyA": head[1]=head[1]-1 this.queue=[head,...this.queue.slice(0,this.queue.length-1)] break; case "KeyW": head[0]=head[0]-1 this.queue=[head,...this.queue.slice(0,this.queue.length-1)] break; case "KeyS": head[0]=head[0]+1 this.queue=[head,...this.queue.slice(0,this.queue.length-1)] break; case "KeyD": head[1]=head[1]+1 this.queue=[head,...this.queue.slice(0,this.queue.length-1)] break; default: break; } this.eatingFood(); // console.log(this.queue); } } // TODO：编写蛇头吃到食物显示恭喜过关函数 eatingFood() { const head = this.getHead() console.log("wei:",this.getLastTail()); // console.log(this.food[0],head[0]); // console.log(this.food[1],head[1]); if(this.food.location[0]==head[0]&&this.food.location[1]==head[1]){ document.querySelector(".game-pass").style.display= "block" this.queue=[this.food.location,...this.queue.slice(1,this.queue.length),this.getLastTail()] } } // TODO：实现当蛇头移动到墙时,显示游戏结束 wallCollisionCheck() { const head = this.getHead(); if(head[0]==0||head[1]==0||head[0]==9||head[1]==9){ document.querySelector(".game-over").style.display="block" } } } // 食物 class Food { constructor(location) { // 食物位置 this.location = location; // 初始化方法 this.foodUpdate(); } // 根据this.location坐标来更新食物位置 foodUpdate() { const [row, col] = this.location; const ele = document.querySelectorAll("tr")[row].children[col]; ele.classList.add("food"); } } const game = new Game("table"); const food = new Food([2, 2]); const snake = new Snake(game, food); // 渲染函数 let lastTime = Date.now(); let stopID; const render = () => { stopID = window.requestAnimationFrame(render); if (Date.now() - lastTime > 33) { snake.wallCollisionCheck(); snake.snakeUpdate(snake); // 更新为上一次执行时间 lastTime = Date.now(); // 游戏已结束，关闭渲染 if (document.querySelector(".game-pass").style.display == "block" || document.querySelector(".game-over").style.display == "block") { window.cancelAnimationFrame(stopID); } } } render();

“三月师资备赛专项练习题”实验报告