原生js實現的貪吃蛇網頁版遊戲完整實例_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

原生js實現的貪吃蛇網頁版遊戲完整實例_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:58 PM

js 遊戲貪吃蛇

本文實例講述了原生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,] &#63; 30 :28),h:(!+[1,] &#63; 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&#63; 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>

登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1659

CakePHP 教程

1416

Laravel 教程

1310

PHP教程

1259

C# 教程

1233

Related knowledge

在遊戲時，CPU利用率應該是多少？ Feb 19, 2024 am 11:21 AM

遊戲因消耗大量資源而導致電腦運作速度變慢是常見現象。了解遊戲時CPU的使用率是至關重要的，這樣可以避免過度負荷。因此，掌握適當的CPU使用率是維持遊戲體驗流暢的關鍵。在本文中，我們將探討遊戲執行時間CPU應該達到的適當使用率。遊戲時的CPU使用率CPU使用率是指衡量處理器工作負載的重要指標，取決於CPU的效能規格。功率較大的CPU通常具有更高的使用率。擁有更多核心和執行緒的CPU可以提高系統的整體效能。多執行緒支援有助於充分發揮CPU的潛力。在遊戲中，CPU使用率取決於處理器的使用率，這會影響遊戲

NAT Boost與遊戲的Qos；哪個比較好？ Feb 19, 2024 pm 07:00 PM

在當下幾乎所有遊戲都在線上的情況下，忽視家庭網路的最佳化是不可取的。幾乎所有路由器都配備了NATBoost和QoS功能，旨在提升使用者的遊戲體驗。本文將探討NATBoost和QoS的定義、優點和缺點。 NATBoost與遊戲的Qos；哪個比較好？ NATBoost，又稱網路位址轉換Boost，是一種內建於路由器的功能，可提升其效能。對於遊戲而言尤其重要，因為它有助於減少網路延遲，即遊戲設備和伺服器之間資料傳輸的時間。透過優化路由器內的資料處理方式，NATBoost實現了更快的資料處理速度和更低的延遲，從而改

Nvgpucomp64.dll導致Windows PC遊戲崩潰; Mar 26, 2024 am 08:20 AM

如果Nvgpucomp64.dll導致遊戲經常崩潰，這裡提供的解決方案可能會對您有所幫助。這種問題通常是由於過時或損壞的顯示卡驅動程式、遊戲檔案損壞等原因引起的。修復這些問題可以幫助您解決遊戲崩潰的困擾。 Nvgpucomp64.dll檔案與NVIDIA顯示卡關聯。當這個檔案崩潰時，你的遊戲也會崩潰。這通常發生在《LordsoftheFallen》、《LiesofP》、《RocketLeague》和《ApexLegends》等遊戲中。 Nvgpucomp64.dll使WindowsPC上的遊戲崩潰如果N

win11蜘蛛紙牌在哪 win11玩蜘蛛紙牌遊戲的方法 Mar 01, 2024 am 11:37 AM

在玩夠3A大作以及手遊的小夥伴們，是不是想重溫一下兒時的電腦遊戲呀？那我們一起在windows11中尋找蜘蛛紙牌吧！點選介面上的開始選單，點選「所有應用」按鈕；點選「所有應用」。找到並選擇“MicrosoftSolitaireCollection”，這是微軟的紙牌系列遊戲應用程式；紙牌系列遊戲選擇。載入完成後，進入選擇介面，找到“蜘蛛紙牌”；選擇“蜘蛛紙牌”。雖然介面有些許變化，但還是以前的

英偉達上線 RTX HDR 功能：不支援的遊戲透過 AI 濾鏡達到 HDR 艷麗視覺效果 Feb 24, 2024 pm 06:37 PM

本站2月23日消息，英偉達昨晚更新推出了NVIDIA‏‏應用程序，為玩家提供了全新的統一GPU控制中心，便於玩家透過遊戲內懸浮窗提供的強大錄影工具捕捉精彩時刻。在本次更新中，英偉達也引入了RTXHDR功能，本站附上官方介紹如下：RTXHDR是一款AI賦能的全新Freestyle濾鏡，可以將高動態範圍(HDR)的艷麗視覺效果無縫引入到原本不支援HDR的遊戲中。你只需擁有相容HDR的顯示器，即可對大量基於DirectX和Vulkan的遊戲使用此功能。玩家在啟用RTXHDR功能之後，運行即便不支援HD

超級人類（superpeople）遊戲下載安裝方法介紹 Mar 30, 2024 pm 04:01 PM

超級人類（superpeople）遊戲可以透過steam客戶端下載遊戲，這款遊戲的大小在28G左右，下載到安裝通常需要一個半小時，以下為大家帶來具體的下載安裝教學！新的申請全球封閉測試方法1)在Steam商店（steam客戶端下載）搜尋“SUPERPEOPLE”2)點擊“SUPERPEOPLE”商店頁面下方的“請求SUPERPEOPLE封閉測試訪問權限”3)點擊請求訪問權限按鈕後，將在Steam庫中可確認「SUPERPEOPLECBT」遊戲4)在「SUPERPEOPLECBT」中點選安裝按鈕並下

Thrustmaster控制面板無法正常運作或顯示[修復] Feb 19, 2024 am 10:45 AM

Thrustmaster是一家專門生產遊戲輪和其他遊戲配件的公司，其車輪產品在遊戲界備受歡迎。使用Thrustmaster控制面板可以安裝和調整Thrustmaster輪的設定。如果遇到控制面板無法運作或無法顯示的問題，可能會影響遊戲體驗。因此，當發生這種情況時，需要檢查連接是否正常，確保軟體驅動程式已正確安裝並更新至最新版本。另外，也可以嘗試重新啟動設備或重新連接設備，以解決可能的故障。在遇到問題時，可以參考Thrustmaster的官方網站或聯絡客服以獲得進一步協助。如何訪問Thrustma

華碩發表 BIOS 更新，提升英特爾第 13/14 代處理器遊戲穩定性 Apr 20, 2024 pm 05:01 PM

本站4月20日消息，華碩公司近日發布了BIOS更新，改善了英特爾第13/14代處理器運行遊戲時崩潰等不穩定情況。本站先前報導，玩家回饋的問題包括運行萬代南夢宮格鬥遊戲《鐵拳8》PC演示版時，即便電腦擁有充足的記憶體和顯存，也會出現系統崩潰並提示記憶體不足的錯誤訊息。類似的崩潰問題也出現在《戰地風雲2042》、《遺跡2》、《要塞英雄》、《墮落之主》、《霍格華茲之遺》以及《TheFinals》等多款遊戲中。 RAD公司今年2月發布長文，解釋遊戲崩潰問題是BIOS設定、英特爾處理器的高時脈頻率和高功耗共同

See all articles

原生js實現的貪吃蛇網頁版遊戲完整實例_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題