仿写一个html小游戏，贪吃蛇。
它的body中要写的内容并不多，只是展示出来几个按钮input还有就是蛇本身最开始的初始化。
head里面的style也是调整样式和大小位置，比较简单，这里就不细说了。
主要说一下script中处理。
function getClass(oParent,sClass){
varaEle=oParent.getElementsByTagName('*')
varresult=[];
for(vari=0;i
if(aEle[i].className==sClass){
result.push(aEle[i])
}
}
return result
}
这个方法主要用来遍历整个html中的元素，跟你所想要比对的sClass进行比较，这样来拿到你想要操作的元素，返回一个数组。
在window对象onload加载方法中，获取
var oDiv=document.getElementById('body')
var oBtn1=document.getElementById('btn1')
var oBtn2=document.getElementById('btn2')
var oBtn3=document.getElementById('btn3')
var oBtn4=document.getElementById('btn4')
var oBtn5=document.getElementById('btn5')
var oBtn6=document.getElementById('btn6')
var aSk=getClass(oDiv,'snake')
var t=0//Top系数
var l=0//Left系数
var direction=4//方向 1：左 2：上 3：右 4：下
var Timer=null
var speed=100//定时器频率
var pause=0//暂停/开始
var wall=1//撞墙开关
var Body=1//撞自己开关
var Auto=0//自动模式开关
写各个按钮的响应事件
//撞墙开关
oBtn1.onclick=function(){
wall=1
oBtn1.style.borderColor="#960"
oBtn1.style.color="#960"
oBtn2.style.borderColor="#03C"
oBtn2.style.color="#000"
}
oBtn2.onclick=function(){
Body=0
oBtn2.style.borderColor="#960"
oBtn2.style.color="#960"
oBtn1.style.borderColor="#03C"
oBtn1.style.color="#000"
}
//撞身体开关
oBtn3.onclick=function(){
Body=1
oBtn3.style.borderColor="#960"
oBtn3.style.color="#960"
oBtn4.style.borderColor="#03C"
oBtn4.style.color="#000"
}
oBtn4.onclick=function(){
Body=0
oBtn4.style.borderColor="#960"
oBtn4.style.color="#960"
oBtn3.style.borderColor="#03C"
oBtn3.style.color="#000"
}
//自动模式
oBtn5.onclick=function(){
Auto=1
Body=0
wall=0
Body=0
oBtn2.style.borderColor="#960"
oBtn2.style.color="#960"
oBtn1.style.borderColor="#03C"
oBtn1.style.color="#000"
oBtn4.style.borderColor="#960"
oBtn4.style.color="#960"
oBtn3.style.borderColor="#03C"
oBtn3.style.color="#000"
oBtn5.style.borderColor="#960"
oBtn5.style.color="#960"
oBtn6.style.borderColor="#03C"
oBtn6.style.color="#000"
}
oBtn6.onclick=function(){
Auto=0
pause=0
clearInterval(Timer);
oBtn6.style.borderColor="#960"
oBtn6.style.color="#960"
oBtn5.style.borderColor="#03C"
oBtn5.style.color="#000"
}
在这留按钮事件中，处理的是调整本身按钮和其他按钮的css样式，还有就是及时更新各种状态值。
functionMove(){
//吃豆
if(aSk[0].offsetLeft==aDiv.offsetLeft&&aSk[0].offsetTop==aDiv.offsetTop){
oDiv.removeChild(aDiv)//吃豆后豆豆消失，并随机位置重新生成
aDiv=document.createElement('div')
aDiv.className='doudou'
oDiv.appendChild(aDiv)
aDiv.style.left=parseInt(Math.random()*29)*20+'px'
aDiv.style.top=parseInt(Math.random()*24)*20+'px'
//吃豆豆后生长一截↓
varbDiv=document.createElement('div')
bDiv.className='snake'
oDiv.appendChild(bDiv)
}
aSk=getClass(oDiv,'snake')//重新确定身体组成
for(vari=aSk.length-1;i>0;i--){//后面一截跟着前面一截走
aSk[i].style.left=aSk[i-1].offsetLeft+'px'
aSk[i].style.top=aSk[i-1].offsetTop+'px'
}
varsnakeL=document.getElementById("snakelength");
snakeL.innerHTML='分数: '+aSk.length;
//自动模式
if(Auto==1){
if(aSk[0].offsetTop>aDiv.offsetTop){
direction=2
}else if(aSk[0].offsetTop
direction=4
}else if(aSk[0].offsetTop==aDiv.offsetTop){
if(aSk[0].offsetLeft>aDiv.offsetLeft){
direction=1
}else if(aSk[0].offsetLeft
direction=3
}
}
}
//蛇身运动
if(direction==1){
l--
aSk[0].style.left=20*l+'px'
}else if(direction==2){
t--
aSk[0].style.top=20*t+'px'
}else if(direction==3){
l++
aSk[0].style.left=20*l+'px'
}else if(direction==4){
t++
aSk[0].style.top=20*t+'px'
}
//撞墙死
if(wall==1){
if(t>=25||t<0||l>=30||l<0){
clearInterval(Timer)
alert('死了')
}
}else{
if(t>=25){
t=0
aSk[0].style.top=0+'px'
}else if(t<0){
t=24
aSk[0].style.top=480+'px'
}else if(l>=30){
l=0
aSk[0].style.left=0+'px'
}else if(l<0){
l=29
aSk[0].style.left=580+'px'
}
}
//撞身体死
if(Body==1){
for(vari=1;i
if(aSk[0].offsetLeft==aSk[i].offsetLeft&&aSk[0].offsetTop==aSk[i].offsetTop){
clearInterval(Timer)
alert('死了')
}
}
}
}
这个Move方法是这贪吃蛇的核心方法，里面主要是用getClass方法获取className值为snake的aSk数组，然后遍历aSk中的各个元素的offset属性值（offsetLeft，offsetTop）和所谓的doudou的oDiv的offset比较。来判断doudou是否被吃掉，运用createElement生成随机位置的新doudou。同时整个蛇的运行，也是在遍历调整蛇的数组aSK中每一个doudou的style中的left和top。
window的onkeydown监听键盘的响应事件，其中方向键，加减速度以及空格键。这个方法主要是更新方向的状态值，是否暂停的状态值，还有就是开启和消除定时器来走Move方法。
在写这个游戏的时候出现一个疑问的地方，那就是初始化doudou的位置是放在body中还是在onload加载时出现。其实两个都可以，如果是放在body中实现，那么你在onload方法Move方法里处理蛇吃掉doudou的这个情况时，就要用getElementById获取它，然后删除，并且再生成一个随机的。我这学习的是写的script的onload中，效果也一样。
刚学html，写这个文章既是自己积累也是分享跟我一样的初学者，非喜勿喷，谢谢！！！
网友评论