js编写简单的贪吃蛇游戏
css代码
*{
margin: 0;
padding:0;
}
td{
width: 4px;
height: 4px;
background: #ccc;
border: 2px solid #ccc;
}
table{
margin: 60px auto 0;
border: 10px solid #333;
background: #ccc;
}
js代码
window.onload = function(){
snake();
};
function snake(){
//<table><tbody><tr><td></td><td></td><td></td></tr></tbody></table>
//创建表格的外层，并存入变量
var oTa = document.createElement('table');
var oTb = document.createElement('tbody');
//循环生成40*40的表格
for(var i=0; i<40; i++){
var oTr = document.createElement('tr');
//需要生成td
for(var j=0; j<40; j++){
var oTd = document.createElement('td');
//oTd.style = "background:#ccc";
oTr.appendChild(oTd);
}
//将tr放到tbody中
oTb.appendChild(oTr);
}
//将tbody放入table中
oTa.appendChild(oTb);
oTa.cellSpacing = '1';
document.body.appendChild(oTa);
//约定一下所有的颜色 黑边框#333 大背景#ccc 红点背景red #555蛇身的颜色 #eee蛇头的颜色
//随机一个红点,先获取所有的td存起来，以便后续使用
var aTd = document.getElementsByTagName("td");
fruit();
function fruit(){
var num = Math.floor( Math.random()*aTd.length );
//判断是否和蛇重复了
if(aTd[num].style.backgroundColor != 'rgb(238, 238, 238)' && aTd[num].style.backgroundColor != 'rgb(85, 85, 85)'){
aTd[num].style = 'background:red;border:2px solid #333';
}else{
fruit();
}
}
//初始化蛇的位置
var arr = [[19,20]];
var rows = oTb.rows;
var timer = null;
var keyTimer = null;
var directionCode = "";
var snakeMove ="";
snakeColor();
function snakeColor(){
//蛇身的颜色需要设置
//通过tbody的rows属性可以找到下面的所有tr ，通过tr的cells属性可以找到下面所有td
for(var i=0; i<arr.length; i++){
rows[arr[i][0]].cells[arr[i][1]].style = 'background:#555;border:2px solid #333';
}
rows[arr[0][0]].cells[arr[0][1]].style = 'background:#eee;border:2px solid #333'; //19 = arr[0][0] 20 = arr[0][1]
}
//检测键盘事件
document.onkeydown = function(e){
e = e || window.event;
//console.log(e.keyCode);
clearTimeout(keyTimer);
keyTimer = null;
keyTimer = setTimeout(function(){
doKeyAction(e.keyCode);
},20)
function doKeyAction(keyCo){
if( keyCo==37||keyCo==38||keyCo==39||keyCo==40 ){
if(Math.abs(directionCode-keyCo) == 2 || directionCode == keyCo){
return;
}else{
directionCode = keyCo;
}
}
//37 38 39 40 左上右下 32空格 enter 13
switch (keyCo){
case 37:
//需要执行的代码
snakeTimer(0,-1);
break;
case 38:
//上需要执行的代码
snakeTimer(-1,0);
break;
case 39:
//右需要执行的代码
snakeTimer(0,1);
break;
case 40:
//下需要执行的代码
snakeTimer(1,0);
break;
case 32:
//空格需要执行的代码 暂停 继续
//snakeTimer(0,-1);
if(timer){
clearInterval(timer);
timer = null;
}else{
snakeMove && snakeMove(); // || && a || b 如果a为真，就不会执行b a && b 如果a为真才会执行b
}
break;
}
}
//运动的timer
function snakeTimer(y,x){
snakeMove = function(){
snakeTimer(y,x);
};
clearInterval(timer); //TUDO这里的清除timer只是暂时处理
timer = setInterval(function(){
//console.log( [arr[0][0],arr[0][1]-1] );
//当达到25个的时候，进入下一关
if(arr.length >=25){
clearInterval(timer);
alert("恭喜，进入下一关");
window.snakeSpeed = window.snakeSpeed*0.8;
document.body.removeChild(oTa);
snake();
}
//检测是否碰到边缘了
if(arr[0][0]+y<0 || arr[0][0]+y>39 || arr[0][1]+x<0 || arr[0][1]+x>39){
fail();
return;
}
//检测是否撞到自己了
for(var i=1; i<arr.length; i++){
if(arr[0][0]+y == arr[i][0] && arr[0][1]+x == arr[i][1]){
fail();
return;
}
}
arr.unshift( [arr[0][0]+y,arr[0][1]+x] ); //arr.unshift(新值),在arr最前面插入一个（新值）
//是否遇到红色的块了
if(rows[arr[0][0]].cells[arr[0][1]].style.backgroundColor == 'red'){
//console.log("已经迟到水果了");
//重新去生成以红点
fruit();
//console.log(arr);
}else{
rows[arr[arr.length-1][0]].cells[arr[arr.length-1][1]].style = 'background:#ccc;border:2px solid #ccc'; //如何寻找数组的最后一个,arr[arr.length-1]
arr.pop();
}
snakeColor();
},window.snakeSpeed);
}
function fail(){
clearInterval(timer);
alert("任务失败");
//TODO:任务失败后重新加载游戏
document.body.removeChild(oTa);
snake();
}
};
if(!window.snakeSpeed){
alert("点击方向键开始游戏，点击空格暂停");
window.snakeSpeed = 100;
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
