使用表格制作
解释都在注释里
html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>she</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div style="display: flex;">
<table id="tabStart">
<tr id=${tr+i}>
<td></td>
</tr>
</table>
<div class="divright">
<div class="branch">
<h2>得分:</h2>
<input class="branch1" type="text" value="0" id="defen">
</div>
<div class="hr1"></div>
<div class="branch">
<h2>用时:（秒）</h2>
<input class="branch2" type="text" value="0" id="items">
</div>
<div class="hr1"></div>
<div class="branch3">
<h2>游戏规则：</h2>
<h2 class="explain">按任意方向键，开<br>始游戏，通过吃蛋获<br>取得分。</h2>
</div>
<div class="hr1"></div>
<div style="border: none;" class="branch">
<h2>榜单：</h2>
<ul id="before">
</ul>
<ul id="liname">
</ul>
</div>
<div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
css文件：
* {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin-top: 20px;
}
table {
background-color: #647866;
border: 3px solid black;
width: 970px;
}
#tabStart {
width: 1000px;
height: 1000px;
}
td {
width: 20px;
height: 20px;
border: 1px solid #546956;
text-align: center;
line-height: 20px;
}
.div1 {
width: 15px;
height: 15px;
background-color: #546956;
margin: auto;
}
.branch {
width: 100%;
height: 120px;
padding: 10px 0 0 10px;
}
.branch1 {
text-indent: 1.3em;
border: 0;
background: none;
width: 245px;
}
.branch2 {
text-indent:1.3em;
border: 0;
background: none;
width: 245px;
}
.branch3 {
width: 100%;
height: 200px;
padding: 10px 0 0 10px;
}
.explain {
text-indent: 1.5em;
margin-top: 30px;
letter-spacing: 4px;
}
.divright {
height: 995px;
width: 250px;
background-color: #647866;
border: black 3px solid;
border-left: none;
}
ul {
list-style: none;
display: block;
height: 280px;
overflow: hidden;
}
ul li {
display: block;
line-height: 25px;
margin: 15px 0 0 30px;
font-size: 20px border: 1px solid black;
color: black;
display: flex;
}
input {
font-size: 60px;
}
.hr1 {
width: 100%;
height: 1px;
border-bottom: solid 3px black;
}
js文件：
// 循环渲染Tr Td
let tabStart = document.getElementById("tabStart");
let trHtml = "";
for (let i = 1; i <= 30; i++) {
trHtml +=
`
<tr id="${"tr" + i}">
</tr>
`
}
tabStart.innerHTML = trHtml;
let tdHtml = "";
for (let i = 1; i <= 30; i++) {
let tabEnd = document.getElementById("tr" + i);
for (let j = 1; j <= 30; j++) {
tdHtml += "<td><div class='div1'></div></td>"
}
tabEnd.innerHTML = tdHtml;
tdHtml = "";
}
// 1.基本设置
var score = 0; //定义分数变量，保存游戏的成绩
// 弹框
let person
var direction = "right" //设置蛇身移动的方向，默认向右移动
var snake_data = [{
"row": 6,
"col": 8
}, {
"row": 6,
"col": 7
}, {
"row": 6,
"col": 6
}, ]; //定义蛇身的基本数据(键，值类型)
// row(行)，columns(列) 蛇身起始位置
// 声明绘制蛇身的函数(并封装函数)
function snake(row, col, color) {
var tr = document.getElementsByTagName("tr")[row];
var td = tr.getElementsByTagName("td")[col];
td.style.background = color;
}
//声明绘制整条蛇的函数
function draw_snake() {
for (var i = 0; i < snake_data.length; i++) {
if (i != 0) {
// 渲染蛇身体在表格位置
var result = snake_data[0].row == snake_data[i].row && snake_data[0].col == snake_data[i].col;
// 如果蛇头的行号和当前行号相等(重合) 并且 蛇头的列号和蛇身的列号相等(说明重合)
if (result) {
die();
return;
}
}
var row = snake_data[i].row;
var col = snake_data[i].col;
var color = "rgba(0,0,0,1)";
snake(row, col, color);
}
}
//调用函数
draw_snake();
//声明绘制 蛋 的函数
function draw_egg() {
do {
var row = parseInt(Math.random() * 25); //random(0-1)
var col = parseInt(Math.random() * 25);
var flag = false; //随机出来的egg不能和蛇身重合
for (var i = 0; i < snake_data.length; i++) {
var snake_row = snake_data[i].row;
var snake_col = snake_data[i].col;
if (row == snake_row && col == snake_col) {
flag = true;
}
}
} while (flag) {
var tr = document.getElementsByTagName("tr")[row];
var td = tr.getElementsByTagName("td")[col];
td.style.background = "red";
}
}
// 调用
draw_egg();
// 定义清屏函数
function clear() {
for (var i = 0; i < 29; i++) {
for (var j = 0; j < 29; j++) {
var td = document.getElementsByTagName("tr")[i].getElementsByTagName("td")[j];
if (td.style.background != "red") {
td.style.background = "";
}
}
}
}
// 死亡函数
function die() {
let aar
if (localStorage.getItem('aar') == null) {
aar=[]
} else{
aar = JSON.parse(localStorage.getItem('aar'))
}
// 死亡时在数组里面添加当前的名字和分数
aar.push({
uname:person,
dfen:score
})
// 存储数组，转换成字符串
localStorage.setItem('aar', JSON.stringify(aar))
clearInterval(timer); // 停止定时器
var result = confirm(`游戏结束,总计:${score}分`);
if (result) {
window.location.reload();
}
if(window.location.reload()){
document.getElementById(ul)+=`<h2>${userName}: <span>${userNubr}</span>分</h2>`
}
}
// 定义定时器，让蛇自动移动(主要业务逻辑)
var timer = setInterval(function() {
clear(); // 每移动一次都要清除上一次绘制的蛇
switch (direction) {
case "left":
if (snake_data[0].col - 1 < 0) {
die();
return;
}
// unshift 给第一个元素后面加入一个元素
snake_data.unshift({
"row": snake_data[0].row,
"col": snake_data[0].col - 1
})
break;
case "right":
if (snake_data[0].col + 1 > 30) {
die();
return;
}
snake_data.unshift({
"row": snake_data[0].row,
"col": snake_data[0].col + 1
})
break;
case "up":
if (snake_data[0].row - 1 < 0) {
die();
return;
}
snake_data.unshift({
"row": snake_data[0].row - 1,
"col": snake_data[0].col
})
break;
case "down":
if (snake_data[0].row + 1 > 30) {
die();
return;
}
snake_data.unshift({
"row": snake_data[0].row + 1,
"col": snake_data[0].col
})
break;
}
//判断新添加的蛇头是否是egg
var row = snake_data[0].row;
var col = snake_data[0].col;
var td = document.getElementsByTagName("tr")[row].getElementsByTagName("td")[col];
if (td.style.background != "red") {
snake_data.pop();
} else {
draw_egg();
score += 10; //得分+1分
}
draw_snake();
}, 800); // 匿名函数，刷新时间(毫秒)
// 监听键盘事件，完成贪吃蛇方向的改变
// onkeydown 按下操作
document.onkeydown = function(event) {
console.log(event.keyCode); //在控制台输出
switch (event.keyCode) {
case 37:
if (direction == "right") {
return;
}
direction = "left";
break;
case 38:
if (direction == "down") {
return;
}
direction = "up";
break;
case 39:
if (direction == "left") {
return;
}
direction = "right";
break;
case 40:
if (direction == "up") {
return;
}
direction = "down";
break;
default:
break;
}
}
// 得分
var int = setInterval(defen, 1000)
function defen() {
let fen = document.getElementById("defen").value = score;
let add= 0;
add=score
localStorage.setItem("分数", add);
// 得分
let userNubr = localStorage.getItem("分数");
// // 获取名字
let userName = localStorage.getItem("名字");
let ListHtml = ''
ListHtml += `<li><h2>${userName}: <span>${userNubr}</span>分</h2></li>`
let li = document.getElementById("liname");
li.innerHTML = ListHtml
// console.log(li, ListHtml)
}
// 时间
var int = setInterval(items, 1000)
var timesa = 1;
function items() {
document.getElementById("items").value = timesa;
timesa++;
}
function ucrname() {
/**
* 在 结束 的时候 往本地存当前的名和分
* 在弹窗确认后拿到存的名和分循环生成 html 文本 添加到页面上
* */
person = prompt("请输入您的名字", "小明");
// 存储名字
localStorage.setItem("名字", person);
let aar
// 判断 获取数组是否为空
if (localStorage.getItem('aar') == null) {
aar = []
} else{
// 把数组转为对象形式
aar = JSON.parse(localStorage.getItem('aar'))
}
let html=''
// 确认弹窗后，生成html
for (let i = 0; i < aar.length; i++) {
// html变量添加li标签
html+=`<li><h2>${aar[i].uname}</h2>:<h2>${aar[i].dfen}</h2>分</li>`
}
document.getElementById('before').innerHTML= html
console.log(aar);
}
ucrname()
标签：表格,案例,贪吃蛇,snake,aar,var,data,col,row From： https://www.cnblogs.com/0722tian/p/17121765.html