诺基亚手机上的经典游戏

1. 贪吃蛇

2. 跳跳球

3. 熊猫爬树

还有俄罗斯方块等经典游戏，我就不11介绍了，欢迎大家在评论区中写下自己童年记忆深刻的游戏吧，如果写下了，希望大家可以动手去找到相应的图片或视频保存收藏起来，如果评论还能发图片那就更好了。锻炼一下动手能力和体验一下百度搜资源多、杂，因此珍惜珍贵的资源（记忆）。也希望大家可以相互分享一下乐趣，资源，技巧，经验，让共享更方便。

真正的主题在这☺

JavaScript中Canvas实现贪吃蛇小游戏

两个链接介绍JavaScript和Canvas

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

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

先看效果图

点击下载，双击用浏览器打开即可玩耍

主要JavaScript代码实现

//构造方块对象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(){//定义一个数组存放一整条蛇的方块对象var snakeArray = [];var start_num = 4;  //方块开始数量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();    //游戏结束},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数组对象的splice()和pop()方法

splice()函数用于插入、删除或替换数组的元素。
从当前数组中移除一部分连续的元素。如有必要，还可以在所移除元素的位置上插入一个或多个新的元素。该函数以数组形式返回从当前数组中被移除的元素。

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

pop() 方法用于删除数组的最后一个元素并返回删除的元素。
详情教程请看:https://www.w3cschool.cn/jsref/jsref-pop.html
注意：这种两种方法都会改变原始数组！

大概熟悉

1. 封装蛇、食物函数
2. 蛇移动move()判断（重点)
   -[吃到食物，加入蛇数组，再随机产生食物]
   -[判断游戏结束，撞墙，碰撞身体]
3. 画出初始蛇，方块食物，开启定时器setInterval()
4. 全局键盘监听document.onkeydown = function(e){...}
   -[W、A、S、D、 ← ↑ ↓ →箭头控制方向键]
   -[蛇方向为右，向左无效,方向上，向下无效类推… ]
   -[enter开始游戏、空格暂停游戏]

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

目前已知Bug，有时候可以蛇身体沿着墙走(进去了)，可能因为撞墙判断写的不够严谨，或者方块大小的和canvas大小有冲突，没有形成倍数，还望大神指点迷津