前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >还记得诺基亚手机上贪吃蛇小游戏吗?

还记得诺基亚手机上贪吃蛇小游戏吗?

作者头像
忆想不到的晖
发布2022-04-13 17:35:25
1.3K0
发布2022-04-13 17:35:25
举报
文章被收录于专栏:hui

诺基亚手机上的经典游戏

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代码实现

代码语言: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大小有冲突,没有形成倍数,还望大神指点迷津

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/09/29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 诺基亚手机上的经典游戏
  • JavaScript中Canvas实现贪吃蛇小游戏
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档