诺基亚手机上的经典游戏
1. 贪吃蛇
2. 跳跳球
3. 熊猫爬树
还有俄罗斯方块等经典游戏，我就不11介绍了，欢迎大家在评论区中写下自己童年记忆深刻的游戏吧，如果写下了，希望大家可以动手去找到相应的图片或视频保存收藏起来，如果评论还能发图片那就更好了。锻炼一下动手能力和体验一下百度搜资源多、杂，因此珍惜珍贵的资源（记忆）。也希望大家可以相互分享一下乐趣，资源，技巧，经验，让共享更方便。
真正的主题在这☺
JavaScript中Canvas实现贪吃蛇小游戏
两个链接介绍JavaScript和Canvas
JavaScript:https://baike.baidu.com/item/JavaScript/
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
注意：这种两种方法都会改变原始数组！
大概熟悉
- 封装蛇、食物函数
- 蛇移动
move()判断（重点)
-[吃到食物，加入蛇数组，再随机产生食物]
-[判断游戏结束，撞墙，碰撞身体] - 画出初始蛇，方块食物，开启定时器setInterval()
- 全局键盘监听
document.onkeydown = function(e){...}
-[W、A、S、D、 ← ↑ ↓ →箭头控制方向键]
-[蛇方向为右，向左无效,方向上，向下无效类推… ]
-[enter开始游戏、空格暂停游戏]
源码:https://gitee.com/huiDBK/SnakeGame.git
目前已知Bug，有时候可以蛇身体沿着墙走(进去了)，可能因为撞墙判断写的不够严谨，或者方块大小的和canvas大小有冲突，没有形成倍数，还望大神指点迷津
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/163686.html
