<!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.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';
frag.appendChild(div);
oneArr.push(div);
}
zbxArr.push(oneArr);
}
document.querySelector('.canvas').appendChild(frag);
//绘制指定位置色块方法
function drawOneSquare(location,color)
{
for(var i=0; i<zbxArr.length; i++) {
for(var j=0; j<zbxArr[i].length; j++) {
var left = zbxArr[i][j].style.left;
var top = zbxArr[i][j].style.top;
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.background = color;
}
}
}
}
var snakeBodyArr = [42,41];
var nextLocation;
var foodNum = 43;
var fangxiang = 1;
//游戏执行
var timer = setInterval(function(){
//添加蛇头下一个出现的位置
snakeBodyArr.unshift(nextLocation=snakeBodyArr[0]+fangxiang);
/*
第四节课内容1 构建边界：
现在蛇已经在我们的页面当中开始奔跑，然而我们发现当蛇碰壁之后并没有结束，
而是会从页面的另外一边出现。
因此我们不得不思考一个问题：
游戏如何结束？
答案再简单不过，玩过贪吃蛇的人都知道规则：
(1)触碰自己立即结束
(2)触壁立即结束
那么我们又如何把这两条规则具现化为我们的代码呢？
分析问题：
a)触碰自己：nextLocation在蛇身数组中除了第一个元素之外，还存在另外一个
b)触壁有四种情况：上下左右四个边界
上边界：nextLocation<0（因为第一个是margin是0）
下边界：nextLocation>400（因为最后一个margin是400）
左边界：nextLocation%20==0 (触碰左端，下一个位置margin为0)
右边界：nextLocation%20==20 (触碰右端，下一个位置margin为380px)
*/
//结束判断
// 当蛇身中，除了第一个元素外，还存在另一个时
if(snakeBodyArr.indexOf(nextLocation,1)>0 ||
// 碰到上边界
nextLocation<0 ||
// 碰到下边界
nextLocation>400 ||
// 碰到左边界下一个位置margin为0px
fangXiang==1&&nextLocation%20==0 ||
// 碰到右边界下一个位置margin为380px
fangXiang==-1&&nextLocation%20==20
) {
// 如果以上有任何一个成立，
// 则停止定时器，同时弹出'GAME OVER'提示框
clearInterval(timer);
return alert("GAME OVER");
}
//绘制蛇身
// 调用了上面56行中的变量，设置蛇身的长度和颜色
drawOneSquare(nextLocation,'cyan');
//增加判断，如果下一次出现的位置是食物的
if(nextLocation==foodNum){
//因为我们设置蛇的初始位置是42，因此++nextLocation是43.
//因此为了第一次不执行蛇尾离开操作，我们设置foodNum初值为43
/*
第四节课2 设置食物
因为上一节我们设定了一个判断，如果蛇吃到食物长度增加，不立即执行蛇尾离开操作。
那么显而易见的问题就出现了两个：
(1)食物如何绘制
(2)蛇吃了食物后，食物再次绘制
事实上仔细分析的话，上述两个问题实际上是一个问题。
那就是如何在蛇之外的div上创建食物
那么这样一来事情就好办很多
snakeBodyArr.indexOf(foodNum)用来判断食物是否在蛇内
foodNum = Math.floor(Math.random()*400)用来在画布内随机位置创建食物
*/
//一个简单的do while循环足矣解决这个问题
do{
// 先执行随机数食物
foodNum=Math.floor(Math.random()*400);
}
// 判断食物是否在蛇身内，当被创建的食物存在蛇体内时
// 存在也就是>=0，就需要重新再绘制一个食物
while(snakeBodyArr.indexOf(foodNum)>=0);
//就继续执行，获取目标色块的位置后，
// 绘制一个新的目标色块
drawOneSquare(foodNum,"Yellow");
}else {
// 同时删除蛇身最后一个元素，返回显示黑色
// 从而变相的构成蛇身向前移动的样子，（霓虹灯式）
drawOneSquare(snakeBodyArr.pop(), "Black");
}
},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.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';
frag.appendChild(div);
oneArr.push(div);
}
zbxArr.push(oneArr);
}
document.querySelector('.canvas').appendChild(frag);
//绘制指定位置色块方法
function drawOneSquare(location,color)
{
for(var i=0; i<zbxArr.length; i++) {
for(var j=0; j<zbxArr[i].length; j++) {
var left = zbxArr[i][j].style.left;
var top = zbxArr[i][j].style.top;
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.background = color;
}
}
}
}
var snakeBodyArr = [42,41];
var nextLocation;
var foodNum = 43;
var fangxiang = 1;
//游戏执行
var timer = setInterval(function(){
//添加蛇头下一个出现的位置
snakeBodyArr.unshift(nextLocation=snakeBodyArr[0]+fangxiang);
/*
第四节课内容1 构建边界：
现在蛇已经在我们的页面当中开始奔跑，然而我们发现当蛇碰壁之后并没有结束，
而是会从页面的另外一边出现。
因此我们不得不思考一个问题：
游戏如何结束？
答案再简单不过，玩过贪吃蛇的人都知道规则：
(1)触碰自己立即结束
(2)触壁立即结束
那么我们又如何把这两条规则具现化为我们的代码呢？
分析问题：
a)触碰自己：nextLocation在蛇身数组中除了第一个元素之外，还存在另外一个
b)触壁有四种情况：上下左右四个边界
上边界：nextLocation<0（因为第一个是margin是0）
下边界：nextLocation>400（因为最后一个margin是400）
左边界：nextLocation%20==0 (触碰左端，下一个位置margin为0)
右边界：nextLocation%20==20 (触碰右端，下一个位置margin为380px)
*/
//结束判断
// 当蛇身中，除了第一个元素外，还存在另一个时
if(snakeBodyArr.indexOf(nextLocation,1)>0 ||
// 碰到上边界
nextLocation<0 ||
// 碰到下边界
nextLocation>400 ||
// 碰到左边界下一个位置margin为0px
fangXiang==1&&nextLocation%20==0 ||
// 碰到右边界下一个位置margin为380px
fangXiang==-1&&nextLocation%20==20
) {
// 如果以上有任何一个成立，
// 则停止定时器，同时弹出'GAME OVER'提示框
clearInterval(timer);
return alert("GAME OVER");
}
//绘制蛇身
// 调用了上面56行中的变量，设置蛇身的长度和颜色
drawOneSquare(nextLocation,'cyan');
//增加判断，如果下一次出现的位置是食物的
if(nextLocation==foodNum){
//因为我们设置蛇的初始位置是42，因此++nextLocation是43.
//因此为了第一次不执行蛇尾离开操作，我们设置foodNum初值为43
/*
第四节课2 设置食物
因为上一节我们设定了一个判断，如果蛇吃到食物长度增加，不立即执行蛇尾离开操作。
那么显而易见的问题就出现了两个：
(1)食物如何绘制
(2)蛇吃了食物后，食物再次绘制
事实上仔细分析的话，上述两个问题实际上是一个问题。
那就是如何在蛇之外的div上创建食物
那么这样一来事情就好办很多
snakeBodyArr.indexOf(foodNum)用来判断食物是否在蛇内
foodNum = Math.floor(Math.random()*400)用来在画布内随机位置创建食物
*/
//一个简单的do while循环足矣解决这个问题
do{
// 先执行随机数食物
foodNum=Math.floor(Math.random()*400);
}
// 判断食物是否在蛇身内，当被创建的食物存在蛇体内时
// 存在也就是>=0，就需要重新再绘制一个食物
while(snakeBodyArr.indexOf(foodNum)>=0);
//就继续执行，获取目标色块的位置后，
// 绘制一个新的目标色块
drawOneSquare(foodNum,"Yellow");
}else {
// 同时删除蛇身最后一个元素，返回显示黑色
// 从而变相的构成蛇身向前移动的样子，（霓虹灯式）
drawOneSquare(snakeBodyArr.pop(), "Black");
}
},200);
</script>
</body>
</html>
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
