諾基亞手機上的經(jīng)典游戲

1. 貪吃蛇

2. 跳跳球

3. 熊貓爬樹

還有俄羅斯方塊等經(jīng)典游戲，我就不11介紹了，歡迎大家在評論區(qū)中寫下自己童年記憶深刻的游戲吧，如果寫下了，希望大家可以動手去找到相應的圖片或視頻保存收藏起來，如果評論還能發(fā)圖片那就更好了。鍛煉一下動手能力和體驗一下百度搜資源多、雜，因此珍惜珍貴的資源（記憶）。也希望大家可以相互分享一下樂趣，資源，技巧，經(jīng)驗，讓共享更方便。

真正的主題在這?

JavaScript中Canvas實現(xiàn)貪吃蛇小游戲

兩個鏈接介紹JavaScript和Canvas

JavaScript:https://baike.baidu.com/item/JavaScript/321142

Canvas:https://www.w3school.com.cn/jsref/dom_obj_canvas.asp

先看效果圖

點擊下載，雙擊用瀏覽器打開即可玩耍

主要JavaScript代碼實現(xiàn)

//構造方塊對象function Rect(x,y,w,h,color){this.x = x;this.y = y;this.w = w;this.h = h;this.color = color;}//畫方塊的方法Rect.prototype.draw = function(){context.beginPath();context.fillStyle= this.color;context.rect(this.x,this.y,this.w,this.h);context.fill();context.stroke();}//構造蛇對象function Snake(){//定義一個數(shù)組存放一整條蛇的方塊對象var snakeArray = [];var start_num = 4; //方塊開始數(shù)量this.snake_head_color = snake_head_color; //蛇頭顏色this.rect_color = rect_color; //方塊顏色//生成4個灰色方塊for(var i=0;i<start_num;i++){var rect = new Rect(i*20,0,20,20,this.rect_color);snakeArray.splice(0,0,rect);}var head = snakeArray[0];head.color = this.snake_head_color;this.head = snakeArray[0];this.snakeArray = snakeArray;//給定初始位置向右(keyCode右箭頭)this.direction = 39;}//畫蛇的方法Snake.prototype.draw = function (){for(var i=0;i<this.snakeArray.length;i++){this.snakeArray[i].draw();}}//蛇移動的方法(重點)Snake.prototype.move = function(){//1、畫一個方塊位置與蛇頭重疊//2、將這個方塊插入蛇頭后面一個的位置//3、然后將最后一個方塊刪除即可//4、將蛇頭向指定的方向移動一格var rect = new Rect(this.head.x,this.head.y,this.head.w,this.head.h,this.rect_color);this.snakeArray.splice(1,0,rect);//判斷是否吃到食物if(isEat()){score +=score_increment;total_score.innerText = score;food = new getRandomFood();}else{this.snakeArray.pop();}//設置蛇頭的運動方向，37、A(65)左，38、W(87)上，39、D(68)右，40、S(83)下if(this.direction==37||this.direction==65){ //左this.head.x -= this.head.w;}else if(this.direction==38||this.direction==87){//上this.head.y -= this.head.h;}else if(this.direction==39||this.direction==68){//右this.head.x += this.head.w;}else if(this.direction==40||this.direction==83){//下this.head.y += this.head.h;}//GameOver判定//撞墻if(this.head.x+1 >mCanvas.width || this.head.x<0 || this.head.y+1>mCanvas.height || this.head.y<0){//判定是否無墻模式if(hasWall){if(this.head.x > mCanvas.width){this.head.x = 0;}if(this.head.x < 0){this.head.x = mCanvas.width;}if(this.head.y > mCanvas.height){this.head.y = 0;}if(this.head.y < 0 ){this.head.y = mCanvas.height;}}else{closeInterval(); //關閉定時器setTimeout(function(){//location.reload();game_over(); //游戲結(jié)束},1500);}}//撞自己for(var i=1;i<this.snakeArray.length;i++){if(this.snakeArray[i].x == this.head.x && this.snakeArray[i].y == this.head.y){closeInterval();setTimeout(function(){//location.reload();game_over();},1500);}}}//畫出初始的蛇var snake = new Snake();snake.draw();snake_length.innerText = snake.snakeArray.length;//畫出初始的食物var food = new getRandomFood();var timer = null;//開啟定時器function startInterval(){if(timer==null){timer = setInterval(function (){context.clearRect(0,0,mCanvas.width,mCanvas.height);food.draw();snake.move();snake.draw();snake_length.innerText = snake.snakeArray.length;},movement);}}

JavaScript中Array數(shù)組對象的splice()和pop()方法

splice()函數(shù)用于插入、刪除或替換數(shù)組的元素。
從當前數(shù)組中移除一部分連續(xù)的元素。如有必要，還可以在所移除元素的位置上插入一個或多個新的元素。該函數(shù)以數(shù)組形式返回從當前數(shù)組中被移除的元素。

詳情教程請看:
https://www.w3cschool.cn/jsref/jsref-splice.html
https://codeplayer.vip/p/j7sh3

pop() 方法用于刪除數(shù)組的最后一個元素并返回刪除的元素。
詳情教程請看:https://www.w3cschool.cn/jsref/jsref-pop.html
注意：這種兩種方法都會改變原始數(shù)組！

大概熟悉

封裝蛇、食物函數(shù)

蛇移動move()判斷（重點)
-[吃到食物，加入蛇數(shù)組，再隨機產(chǎn)生食物]
-[判斷游戲結(jié)束，撞墻，碰撞身體]

畫出初始蛇，方塊食物，開啟定時器setInterval()

全局鍵盤監(jiān)聽document.onkeydown = function(e){...}
-[W、A、S、D、 ← ↑ ↓ →箭頭控制方向鍵]
-[蛇方向為右，向左無效,方向上，向下無效類推… ]
-[enter開始游戲、空格暫停游戲]

源碼:https://gitee.com/huiDBK/SnakeGame.git

目前已知Bug，有時候可以蛇身體沿著墻走(進去了)，可能因為撞墻判斷寫的不夠嚴謹，或者方塊大小的和canvas大小有沖突，沒有形成倍數(shù)，還望大神指點迷津

總結(jié)

以上是生活随笔為你收集整理的还记得诺基亚手机上贪吃蛇小游戏吗？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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