原生js實(shí)現(xiàn)的貪吃蛇網(wǎng)頁(yè)版游戲完整實(shí)例
更新時(shí)間：2015年05月18日 16:17:14 作者：休閑生活文化
這篇文章主要介紹了原生js實(shí)現(xiàn)的貪吃蛇網(wǎng)頁(yè)版游戲完整實(shí)例,可實(shí)現(xiàn)自主選擇游戲難度進(jìn)行貪吃蛇游戲的功能,涉及javascript鍵盤(pán)事件及頁(yè)面元素的操作技巧,需要的朋友可以參考下
本文實(shí)例講述了原生js實(shí)現(xiàn)的貪吃蛇網(wǎng)頁(yè)版游戲。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生js寫(xiě)的貪吃蛇網(wǎng)頁(yè)版游戲</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 = '請(qǐng)選擇關(guān)卡'
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) + '關(guān)'
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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript合并兩個(gè)數(shù)組并去除重復(fù)項(xiàng)的方法
這篇文章主要介紹了JavaScript合并兩個(gè)數(shù)組并去除重復(fù)項(xiàng)的方法,涉及javascript操作數(shù)組的合并與去重的相關(guān)技巧,需要的朋友可以參考下2015-06-06
js+css實(shí)現(xiàn)的圓角邊框TAB選項(xiàng)卡滑動(dòng)門(mén)代碼分享（2款）
這篇文章主要為大家詳細(xì)介紹了兩種js+css實(shí)現(xiàn)的圓角邊框TAB選項(xiàng)卡滑動(dòng)門(mén)效果，很實(shí)用的代碼，推薦給大家，有需要的小伙伴可以參考下2015-08-08
微信小程序?qū)崿F(xiàn)發(fā)動(dòng)態(tài)功能的示例代碼
最近做了一個(gè)校園拍賣(mài)小程序，想在里面添加一個(gè)類似校園圈功能，現(xiàn)在來(lái)一步一步實(shí)現(xiàn)，對(duì)微信小程序?qū)崿F(xiàn)發(fā)動(dòng)態(tài)功能感興趣的朋友一起看看吧2022-08-08
js定時(shí)調(diào)用方法成功后并停止調(diào)用示例
這篇文章主要介紹了js定時(shí)調(diào)用方法成功后并停止調(diào)用的實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
這篇文章主要為大家總結(jié)了Bootstrap Table使用心得,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
在TypeScript中,類型斷言用于告訴編譯器某個(gè)變量的類型,這在我們確定變量的類型比編譯器更準(zhǔn)確時(shí)非常有用,本文給大家分享了幾種TypeScript中使用類型斷言方式,需要的朋友可以參考下2023-09-09
javascript學(xué)習(xí)隨筆(使用window和frame)的技巧
javascript學(xué)習(xí)隨筆(使用window和frame)的技巧...2007-03-03
引用其它js時(shí)如何同時(shí)處理多個(gè)window.onload事件
引用其它js時(shí)，其js卻使用了window.onload事件，這樣的話，引入的頁(yè)面的onload事件就有可能執(zhí)行不了，那么該如何解決呢？祥看下文2014-09-09
本篇文章主要是對(duì)JavaScript定義類的幾種方式進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要介紹了js的Object.assign用法,結(jié)合實(shí)例形式分析了js Object.assign基本功能、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-03-03