<!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>