<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
*{margin: 0; padding: 0;}
.canvas{width: 400px; height: 400px; position: absolute;}
</style>
</head>
<body>
<div class="canvas"></div>
<script>
var zbxArr = [];
var frag = document.createDocumentFragment();
for(var i=0; i<20; i++){
var oneArr = [];
for(var j=0; j<20; j++){
var div = document.createElement('div');
//div.setAttribute('class','item');
div.style.position = 'absolute';
div.style.left = j*20+'px';
div.style.top = i*20+'px';
div.style.width = '20px';
div.style.height = '20px';
// div.style.background = 'black';
div.style.border = '1px solid black';
frag.appendChild(div);
oneArr.push(div);
}
zbxArr.push(oneArr);
}
document.querySelector('.canvas').appendChild(frag);
function drawOneSquare(location,color){
//1.通过location能够计算出，想要设置颜色的色块的margin值
//2.在二维数组中 查找哪一个色块的margin值和【通过location计算的值】相等
//3.把在二维数组中找到的这个色块 填充颜色
for(var i=0; i<zbxArr.length; i++){
//在画布中纵向查找20行
for(var j=0; j<zbxArr[i].length; j++){
//在一行中纵向查找20列
//比对每一个div的margin是否和计算的margin相同
var left = zbxArr[i][j].style.left;
var top = zbxArr[i][j].style.top;
//如果相同，证明当前这个div就是想要找到的div
if(
parseInt(left.substring(0,left.length-2))==(location%20*20)
&&
parseInt(top.substring(0,top.length-2))==(Math.floor(location/20)*20)
){
zbxArr[i][j].style.backgroundColor = color;
}
}
}
}
// 绘制蛇的长度
// for(var m=0; m<10; m++){
// drawOneSquare(265+m,'red');
// }
// // 设置一个向下取整 0~1*400 的随机数
// var randomNumber = Math.floor(Math.random()*400);
// console.log(randomNumber);
// // 定义函数
// drawOneSquare(randomNumber,'orange');
// // 通过调用函数来设置想找的某个div，并给它赋予颜色
// // 下面是指蛇向前移动时后面的那个变黑，前面的变红，可以显示出一种变相的向前移动
// drawOneSquare(265,'black');
// drawOneSquare(275,'red');
// ------------------------------------------------------
//1.调用一次函数，绘制一个方块
//2.一个数字就能够代表一个div
//--->如果我想要用【某个方式】表示【蛇的身体】，数组
// 这个数组定义为42,41是为了好计算，
//因为要通过编码左：37，右：39，上：38，下：40来控制蛇的移动
var snakeBodyArr = [44,43,42,41];
// 设置一个全局的变量，定时器用
var timer = null;
var nextLocation;
var fangxiang = 1;
// 定义一个定时器
timer = setInterval(function () {
//向【蛇】的数组中首位添加了一个元素，表示蛇前进一步
snakeBodyArr.unshift(nextLocation = snakeBodyArr[0]+fangxiang);
//调用函数，把前进的这个div，变成蛇的颜色
drawOneSquare(nextLocation,'red');
//蛇的最后一个div变成背景颜色，从【蛇】的数组中剔除
drawOneSquare(snakeBodyArr.pop(),'transparent');
},200);
</script>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
*{margin: 0; padding: 0;}
.canvas{width: 400px; height: 400px; position: absolute;}
</style>
</head>
<body>
<div class="canvas"></div>
<script>
var zbxArr = [];
var frag = document.createDocumentFragment();
for(var i=0; i<20; i++){
var oneArr = [];
for(var j=0; j<20; j++){
var div = document.createElement('div');
//div.setAttribute('class','item');
div.style.position = 'absolute';
div.style.left = j*20+'px';
div.style.top = i*20+'px';
div.style.width = '20px';
div.style.height = '20px';
// div.style.background = 'black';
div.style.border = '1px solid black';
frag.appendChild(div);
oneArr.push(div);
}
zbxArr.push(oneArr);
}
document.querySelector('.canvas').appendChild(frag);
function drawOneSquare(location,color){
//1.通过location能够计算出，想要设置颜色的色块的margin值
//2.在二维数组中 查找哪一个色块的margin值和【通过location计算的值】相等
//3.把在二维数组中找到的这个色块 填充颜色
for(var i=0; i<zbxArr.length; i++){
//在画布中纵向查找20行
for(var j=0; j<zbxArr[i].length; j++){
//在一行中纵向查找20列
//比对每一个div的margin是否和计算的margin相同
var left = zbxArr[i][j].style.left;
var top = zbxArr[i][j].style.top;
//如果相同，证明当前这个div就是想要找到的div
if(
parseInt(left.substring(0,left.length-2))==(location%20*20)
&&
parseInt(top.substring(0,top.length-2))==(Math.floor(location/20)*20)
){
zbxArr[i][j].style.backgroundColor = color;
}
}
}
}
// 绘制蛇的长度
// for(var m=0; m<10; m++){
// drawOneSquare(265+m,'red');
// }
// // 设置一个向下取整 0~1*400 的随机数
// var randomNumber = Math.floor(Math.random()*400);
// console.log(randomNumber);
// // 定义函数
// drawOneSquare(randomNumber,'orange');
// // 通过调用函数来设置想找的某个div，并给它赋予颜色
// // 下面是指蛇向前移动时后面的那个变黑，前面的变红，可以显示出一种变相的向前移动
// drawOneSquare(265,'black');
// drawOneSquare(275,'red');
// ------------------------------------------------------
//1.调用一次函数，绘制一个方块
//2.一个数字就能够代表一个div
//--->如果我想要用【某个方式】表示【蛇的身体】，数组
// 这个数组定义为42,41是为了好计算，
//因为要通过编码左：37，右：39，上：38，下：40来控制蛇的移动
var snakeBodyArr = [44,43,42,41];
// 设置一个全局的变量，定时器用
var timer = null;
var nextLocation;
var fangxiang = 1;
// 定义一个定时器
timer = setInterval(function () {
//向【蛇】的数组中首位添加了一个元素，表示蛇前进一步
snakeBodyArr.unshift(nextLocation = snakeBodyArr[0]+fangxiang);
//调用函数，把前进的这个div，变成蛇的颜色
drawOneSquare(nextLocation,'red');
//蛇的最后一个div变成背景颜色，从【蛇】的数组中剔除
drawOneSquare(snakeBodyArr.pop(),'transparent');
},200);
</script>
</body>
</html>
6129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
