原生js實現的貪吃蛇網頁版游戲完整實例

2024-05-06 16:20:35

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了原生js實現的貪吃蛇網頁版游戲完整實例,可實現自主選擇游戲難度進行貪吃蛇游戲的功能,涉及javascript鍵盤事件及頁面元素的操作技巧,需要的朋友可以參考下

本文實例講述了原生js實現的貪吃蛇網頁版游戲。分享給大家供大家參考。具體實現方法如下：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>原生js寫的貪吃蛇網頁版游戲</title>

</head>

<body>

</body>

<script>

Star = {

init:function(){

var bigDiv = this.appendEle(this.addStyle(this.creatEle(),

{w:'900',h:'600',p:'absolute',t:10,l:500}));

for(var i = 0; i<600/30;i++){

Star.data.arrayAll[i] = [];

for(var j = 0; j<900/30; j++){

div = this.addStyle(this.creatEle(),{w:(!+[1,] ? 30 :28),h:(!+[1,] ? 30 :28),f:'left',border:'1px solid #666'});

div.setAttribute('number', i*30+j)

this.appendEle(div,bigDiv)

Star.data.arrayAll[i][j] = div;

}

}

bigDiv = this.appendEle(this.addStyle(this.creatEle(),

{w:'900',h:'600',p:'absolute',t:10,l:500}));

this.pushEleInSelect(Star.data.arrayAll[9][15],Star.data.arrayAll[9][14],Star.data.arrayAll[9][13])

this.keyBoard.apply(this,arguments);

this.appearPoint();

this.leftGo();

},

appearPoint:function(){

var arrayIn = [];

var number;

for(var i = 0; i<600; i++){

if(!this.hasInArray(Star.data.arrayAll[parseInt(i/30)][i%30].getAttribute('number'),Star.data.arraySelect)){

arrayIn.push(Star.data.arrayAll[i])

}

}

Star.data.foodNumber = number = parseInt(Math.random()*arrayIn.length);

this.giveColor(number)

},

giveColor:function(number){

var div = Star.data.arrayAll[parseInt(number/30)][number%30];

Star.timeInterval.timeB = setInterval(function(){

if(div.className == 'shanshuo'){

div.className = ''

div.style.backgroundColor = '#fff'

}

else{

div.className = 'shanshuo';

div.style.backgroundColor = '#f00'

}

},500)

},

disappearColor:function(){

clearInterval(Star.timeInterval.timeB);

Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30].style.backgroundColor = '#f00';

},

hasInArray:function(number,array){

for(var i in array){

if(array[i] instanceof Array){

if(this.hasInArray(number,array[i])){

return true;

}

}

if(array[i].getAttribute && array[i].getAttribute('number') == number) return true;

}

return false;

},

keyBoard:function(){

var self = this;

document.onkeydown = function(e){

e = e? e : window.event;

switch(e.keyCode){

case 37: if(Star.keycode == 37 || Star.keycode == 39){return;}; self.leftGo(); break;

case 38: if(Star.keycode == 38 || Star.keycode == 40){return;}; self.upGo();break;

case 39: if(Star.keycode == 37 || Star.keycode == 39){return;}; self.rightGo();break;

case 40: if(Star.keycode == 38 || Star.keycode == 40){return;}; self.downGo();break;

}

}

},

leftGo:function(){

var div, number , self = this;

Star.keycode = 37;

clearInterval(Star.timeInterval.timeA)

Star.timeInterval.timeA = setInterval(function(){

number = Star.data.arraySelect[0].getAttribute('number');

if(number%30<=0 || self.hasInArray(number-1,Star.data.arraySelect)){

self.guanle();

}

else{

if(Star.data.foodNumber == number-1){

self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);

self.disappearColor();

self.appearPoint();

}

else{

div = Star.data.arraySelect.pop();

div.style.background = '#fff';

self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30-1]);

}

}

},Star.timeInterval.speed)

},

upGo:function(){

var div, number , self = this;

Star.keycode = 38;

clearInterval(Star.timeInterval.timeA)

Star.timeInterval.timeA = setInterval(function(){

number = parseInt(Star.data.arraySelect[0].getAttribute('number'));

if(parseInt(number/30)<=0 || self.hasInArray(number-30,Star.data.arraySelect)){

self.guanle();

}

else{

if(Star.data.foodNumber == number-30){

self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);

self.disappearColor();

self.appearPoint();

}

else{

div = Star.data.arraySelect.pop();

div.style.background = '#fff';

self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)-1][number%30]);

}

}

},Star.timeInterval.speed)

},

rightGo:function(){

var div, number , self = this;

Star.keycode = 39;

clearInterval(Star.timeInterval.timeA)

Star.timeInterval.timeA = setInterval(function(){

number = parseInt(Star.data.arraySelect[0].getAttribute('number'));

if(parseInt(number%30)>=29 || self.hasInArray(number+1,Star.data.arraySelect)){

self.guanle();

}

else{

if(Star.data.foodNumber == number+1){

self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);

self.disappearColor();

self.appearPoint();

}

else{

div = Star.data.arraySelect.pop();

div.style.background = '#fff';

self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30+1]);

}

}

},Star.timeInterval.speed)

},

downGo:function(){

var div, number , self = this;

Star.keycode = 40;

clearInterval(Star.timeInterval.timeA)

Star.timeInterval.timeA = setInterval(function(){

number = parseInt(Star.data.arraySelect[0].getAttribute('number'));

if(parseInt(number/30)>=19 || self.hasInArray(number+30,Star.data.arraySelect)){

self.guanle();

}

else{

if(Star.data.foodNumber == number+30){

self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);

self.disappearColor();

self.appearPoint();

}

else{

div = Star.data.arraySelect.pop();

div.style.background = '#fff';

self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)+1][number%30]);

}

}

},Star.timeInterval.speed)

},

guanle:function(){

alert('撞墻了,總分：' + (Star.data.arraySelect.length-3) * parseInt(1000 / Star.timeInterval.speed));

location.reload();

},

creatEle:function(tag){

var tagName = tag || 'DIV'

return document.createElement(tagName)

},

appendEle:function(ele,father){

var father = father || document.body || document.documentElement

father.appendChild(ele)

return ele;

},

addStyle:function(ele,css){

for(var i in css){

switch(i){

case 'b' : ele.style.background = css[i]; break;

case 'l' : ele.style.left = css[i]+'px'; break;

case 'r' : ele.style.right = css[i]+'px'; break;

case 't' : ele.style.top = css[i]+'px'; break;

case 'd' : ele.style.down = css[i]+'px'; break;

case 'p' : ele.style.position = css[i]; break;

case 'w' : ele.style.width = css[i]+'px'; break;

case 'h' : ele.style.height = css[i]+'px'; break;

case 'f' : ele.style.cssFloat = css[i]; ele.style.styleFloat = css[i]; break;

default : ele.style[i] = css[i]; break;

}

}

return ele;

},

pushEleInSelect:function(){

for(var i = 0; i<arguments.length; i++){

Star.data.arraySelect = [arguments[i]].concat(Star.data.arraySelect)

this.addStyle(arguments[i],{b:'#f00'})

}

}

}

Star.data={

arrayAll : [],

arraySelect:[],

newPoint:null,

foodNumber:0

}

Star.timeInterval={

timeA:null,

timeB:null

}

Star.keycode = 0;

window.onload = function(){

var select = Star.creatEle('select');

var optionDefault = Star.creatEle('option');

optionDefault.innerHTML = '請選擇關卡'

Star.appendEle(optionDefault,select)

Star.addStyle(select,{w:200,h:30,p:'absolute',left:'40%',top:'40%'})

for(var i = 0 ; i <10 ; i++){

var option = Star.creatEle('option');

option.innerHTML = '第' + (i+1) + '關'

Star.appendEle(option,select);

}

Star.appendEle(select)

select.onchange = function(){

selectValue = select.options[select.selectedIndex].value || select.options[select.selectedIndex].innerHTML

var number = selectValue.match(//d+/)[0]

Star.timeInterval.speed = parseInt(200/number);

Star.addStyle(select,{display:'none'});

Star.init();

}

}

</script>

</html>