?更新時間：2020年10月26日 11:46:36 ? 作者：leisure-ZL ?

這篇文章主要為大家詳細介紹了原生js實現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

原生JavaScript實現(xiàn)貪吃蛇游戲的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<script>var timer = null;var oMain = ("main");function Map(atom,xnum,ynum){//地圖,設(shè)置單位大小，及根據(jù)單位大小創(chuàng)建地圖this.atom = atom;this.xnum = xnum;this.ynum = ynum;this.create = function(){= ("div");.style.cssText = "position: relative;top: 40px;border: 1px solid red;background: #F1F1F1;".style.width = this.atom * this.xnum + "px";//畫布寬.style.height = this.atom * this.ynum + "px";//畫布高();}}function Food(map){//食物this.width = map.atom;this.height = map.atom;//實現(xiàn)隨機背景色this.bgColor = "rgb("+(()*200)+","+(()*200)+","+(()*200)+")";this.x = (()*);this.y = (()*);= ('div');.style.width = this.width + 'px';.style.height = this.height + 'px';.style.backgroundColor = this.bgColor;.style.borderRadius = '50%';.style.position = "absolute";.style.left = this.x * this.width + 'px';.style.top = this.y * this.height + 'px';();}//重新開始function restart(map,snake){for(var i=0; i<.length; i++){([i].flag);}= [{x : 2,y : 0},//蛇頭{x : 1,y : 0},//蛇身{x : 0,y : 0}//蛇尾]= "right";();();food = new Food(map);}function Snake(map){this.width = map.atom;this.height = map.atom;= "right";= [{x : 2,y : 0},{x : 1,y : 0},{x : 0,y : 0}]= function(){for(var i=0; i<.length; i++){if([i].x != null){var s = ('div');//將節(jié)點保存[i].flag = s;//設(shè)置樣式s.style.width = this.width + 'px';s.style.height = this.height + 'px';s.style.backgroundColor = "rgb("+(()*200)+","+(()*200)+","+(()*200)+")";s.style.borderRadius = '50%';//設(shè)置位置s.style.position = "absolute";s.style.left = [i].x * this.width + 'px';s.style.top = [i].y * this.height + 'px';//添加到地圖(s);}}}this.run = function(){for(var i=.length-1; i>0; i--){[i].x = [i-1].x;[i].y = [i-1].y}switch(){case "left":[0].x -= 1;break;case "right":[0].x += 1;break;case "up":[0].y -= 1;break;case "down":[0].y += 1;break;}//吃食物if([0].x == food.x && [0].y == ){.push({x : null,y : null,flag : null});();food = new Food(map);}//判斷游戲結(jié)束if([0].x<0 || [0].x>-1 || [0].y<0 || [0].y>-1){clearInterval(timer);alert("GAME OVER!");restart(map,this);return false;}for(var i=4; i<.length; i++){if([0].x == [i].x && [0].y == [i].y){clearInterval(timer);alert("GAME OVER!");restart(map,this);return false;}}//刪除原來for(var i=0; i<.length; i++){if([i].flag != null){([i].flag);}}();}}//創(chuàng)建地圖對象var map = new Map(20,40,20);();//創(chuàng)建食物對象var food = new Food(map);//創(chuàng)建蛇對象var snake = new Snake(map);();//加上鍵盤事件(改變蛇頭方向)window.onkeydown = function(e){event = e || window.event;switch(){case 38:if( != "down")//禁止掉頭= "up";break;case 40:if( != "up")= "down";break;case 37:if( != "right")= "left";break;case 39:if( != "left")= "right";break;}}var speed = 100;function start(){clearInterval(timer);timer = setInterval(function(){();("score").innerHTML = .length-3;start();},speed)}//難度("1").onclick = function(){speed = 100;}("2").onclick = function(){speed = 50;}("3").onclick = function(){speed = 20;}("begin").onclick = function(){start();}("pause").onclick = function(){clearInterval(timer);} </script>

代碼僅有js部分，完整代碼可以上我的github免費下載

更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：

C++經(jīng)典小游戲匯總

python經(jīng)典小游戲匯總

python俄羅斯方塊游戲集合

JavaScript經(jīng)典游戲 玩不停

javascript經(jīng)典小游戲匯總

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

• 淺談TypeScript的類型保護機制

  這篇文章主要介紹了淺談TypeScript的類型保護機制,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

  2020-02-02

• 深入理解redux之compose的具體應(yīng)用

  這篇文章主要介紹了深入理解redux之compose的具體應(yīng)用,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

  2020-01-01

• 深入淺析JavaScript中with語句的理解

  JavaScript 有個 with 關(guān)鍵字, with 語句的原本用意是為逐級的對象訪問提供命名空間式的速寫方式。這篇文章主要介紹了JavaScript中with語句的相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧

  2016-05-05

• javascript實現(xiàn)3D變換的立體圓圈實例

  這篇文章主要介紹了javascript實現(xiàn)3D變換的立體圓圈效果,涉及javascript動態(tài)操作頁面元素實現(xiàn)滾動與變色的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

  2015-08-08

總結(jié)

以上是生活随笔為你收集整理的eclipse javascript_原生js实现贪吃蛇游戏_javascript技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。