`
pywepe
  • 浏览: 18604 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

JavaScript简单贪吃蛇,基本面向对象

htmljavascript 
阅读更多
没有写博客的习惯,这篇算心血来潮,算篇近几天编写的小程序纪实.

      以编写此程序的方式结束Javascript的本阶段的学习.编写的目的在于熟悉javascript的编程方式,包括代码风格,面向对象的运用等.

      回到程序,说说Snake的移动的实现方法.其实很简单,向头部添加Unit,然后删除尾部.其他,参见注释.

   作者:pcenshao
   转载请注明来自:
     http://blog.csdn.net/pywepe
   

     程序包括一个html文件:snake.html和一个js文件:snake.js

     snake.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript简单贪吃蛇</title>
<script type="text/javascript" src="snake.js"></script>
<script type="text/javascript" >
    $s(function(){
        $s.SnakeContext.init();       
    });
</script>
</head>
<body>   
<div id="headLocation"></div>
<div id="keyup"></div>
</body>
</html>

snake.js:

/*
* JavaScript简单贪吃蛇.基本面向对象.
* 规则:
*    1.没有墙,左与右连接,上与下连接.
*    2.当蛇头碰撞到自身时死亡.
* 兼容性:
*    完全支持Firefox,Chrome
*    基本支持IE(除了调试部分)
*
* 作者:pcenshao
* 转载请注明来自:
*    http://blog.csdn.net/pywepe
*    http://pcenshao.taobao.com
*/
(function(){
   
    $s = function(){
        if(arguments.length == 1){
            if(typeof arguments[0] == "string"){
                return document.getElementById(arguments[0]);   
            }else if(typeof arguments[0] == "function"){
                window.onload = arguments[0];
            } 
        }
    };   
   
    $s.UNIT_WIDTH = 10; // 单元的宽度
    $s.UNIT_HEIGHT = 10;
    $s.PANEL_WIDTH = 30; // 逻辑宽度   
    $s.PANEL_HEIGHT = 20; // 逻辑高度
    $s.STEP = 250 ;  // 每一步的时间
    $s.HEAD_COLOR = "red"; // 蛇头颜色
    $s.BODY_COLOR = "black"; // 蛇体颜色
    /*
     * 食物的颜色
     */
    $s.COLORS = ["blue","green","#494e8f","#905d1d","#845538","#77ac98","#8552a1"];
   
    /*
     * 调试相关
     * $s.DEBUG 调试信息显示开关
     * $s.KEY_UP_DIR_ID 监视方向键的结点id,若不存在,则不显示
     * $s.HEAD_LOCATION_ID 监视蛇头位置的结点id,若不存在,则不显示
     */
    $s.DEBUG = false;
    $s.KEY_UP_DIR_ID = "keyup";
    $s.HEAD_LOCATION_ID = "headLocation";
   
    $s.Dir = {  // 代表方向,强制以$s.Dir.UP方法调用,避免参数错误
        UP : {},
        DOWN : {},
        LEFT : {},
        RIGHT : {},
        NONE : {}
    };
   
    $s.State = { // 代表状态
        STOP : {},
        RUNNGIN : {},
        PAUSE : {}           
    };
   
    $s.Unit = function(){ // 一个单元格,用MVC的眼光看,Unit是模型,UnitView是视图
        this.x = 0;
        this.y = 0;
        this.view = new $s.UnitView();
        this.view.unit = this;
        this.color = $s.BODY_COLOR;
    };
    $s.Unit.prototype.repaint = function(){
        if(this.view != null){
            this.view.repaint(); // 通知重绘   
        }   
    };           
   
    $s.Snake = function(){
        this.units = [];
    };   
   
    $s.Snake.prototype.init = function(dir,count){
        var x = 5;
        var y = 5;
        for(var i = 0 ; i < count ; i ++){
            var u = new $s.Unit();
            u.x = x ;
            u.y = y ++;
            this.units.push(u);
            if(i == (count - 1 )){
                u.color = $s.HEAD_COLOR;
            }
            u.repaint();
        }
    };
   
    $s.Snake.prototype.crash = function(x,y){ // 传入头部的位置,返回true表示碰撞自身
        for(var i = this.units.length - 2 ; i >= 0 ; i --){ // 不包括头自身
            var u = this.units[i];
            if(u.x == x && u.y == y){
                return true;   
            }
        }
        return false;
    };
   
    $s.Snake.prototype.go = function(){
        // 判断前方是否有食物
        // 是否撞墙
        var _x = 0 , _y = 0;
        var head = this.units[this.units.length - 1];
        _x = head.x;
        _y = head.y;
        var dir = $s.SnakeContext.dir;
       
        if(this.crash(_x,_y)){ // 判断是否碰撞到自身
            $s.SnakeContext.stop();
            $s.SnakeContext.ondead(); // 触发dead事件
            return;
        }
       
        if(dir == $s.Dir.LEFT){
            _x --;       
        }else if(dir == $s.Dir.RIGHT){
            _x ++;
        }else if(dir == $s.Dir.UP){
            _y --;
        }else if(dir == $s.Dir.DOWN){
            _y ++;
        }
       
        // 实现左右连接,上下连接
        if(_x >= $s.PANEL_WIDTH){
            _x = 0;
        }
        if(_x < 0){
            _x = $s.PANEL_WIDTH - 1;   
        }
        if(_y >= $s.PANEL_HEIGHT){
            _y = 0;
        }
        if(_y < 0){
            _y = $s.PANEL_HEIGHT - 1;   
        }
       
        var h = new $s.Unit(); // 新头
        if($s.SnakeContext.hasFood(_x,_y)){ // 下一步碰到食物
            this.eat(_x,_y);
            head = this.units[this.units.length - 1]; // 因为eat方法可以改变头部,所以重新获取
            _x = head.x;
            _y = head.y;
           
            if(dir == $s.Dir.LEFT){
                _x --;       
            }else if(dir == $s.Dir.RIGHT){
                _x ++;
            }else if(dir == $s.Dir.UP){
                _y --;
            }else if(dir == $s.Dir.DOWN){
                _y ++;
            }
            head.color = $s.HEAD_COLOR;
            head.repaint();
            var oldHead = this.units[this.units.length - 2];
            oldHead.color = $s.BODY_COLOR;
            oldHead.repaint();
            return;
        }
       
        var tail = this.units.shift();
        $s.NodePool.releaseNode(tail);       
       
        h.x = _x;
        h.y = _y;
        this.units.push(h);
       
        for(var i = this.units.length - 1; i >= 0; i --){
            var u = this.units[i];
            if(i == (this.units.length - 1)){ // 头
                u.color = $s.HEAD_COLOR;
            }else{
                u.color = $s.BODY_COLOR;
            }
            u.repaint();
        }
       
    };
   
    $s.Snake.prototype.eat = function(x,y){
        var food = $s.SnakeContext.food;
        if(food != null){
            food.alive = false;
            this.units.push(food.unit);
            $s.SnakeContext.oneat();
        }else{
            alert("error:no food on (" + x + "," + y + ")");   
        }       
    }
   
    /*
     * 随机数产生器,提供简便的方法
     */
    $s.Random = {
        randomNumber : function(lower,upper){ // 返回区间[lower,upper]的整数
            var choices = upper - lower + 1;
            return Math.floor(Math.random() * choices + lower); // value = Math.floor(Math.random() * 可能值的个数 + 第一个可能的值)
        },
        randomLocation : function(maxX,maxY){
            var x = $s.Random.randomNumber(0,maxX);
            var y = $s.Random.randomNumber(0,maxY);
            return {x:x,y:y};
        }   
    };
   
    $s.Food = function(x,y){ // 代表食物,由一个Unit表示
        this.unit = new $s.Unit();
        this.unit.x = x;
        this.unit.y = y;
        var color = $s.COLORS[$s.Random.randomNumber(0,$s.COLORS.length - 1)];
        this.unit.color = color;
        this.alive = true;
       
        this.unit.repaint();
    };
    $s.Food.prototype.locateOn = function(x,y){
        return this.unit.x == x && this.unit.y == y;
    };
   
    /*
     * HTML结点池,主要目的是提高效率
     * 因为snake的移动是通过删除尾部结点并向头部添加结点实现的,
     * 在这个过程中会有大量的结点创建操作,为了操作效率,所以对结点进行池化管理.
     * 尾部的结点不删除,而是隐藏,需要结点时可以重用之
     */   
    $s.NodePool = {
        nodes : []
    };
    $s.NodePool._findHideNode = function(){ // 查找隐藏的div结点       
        for(var i = 0 ; i < this.nodes.length ; i ++){
            var n = this.nodes[i];
            if(n.style.display == "none"){
                return n;   
            }   
        }
        return null;
    };
    $s.NodePool.createNode = function(){
        var pooledNode = this._findHideNode();
        if(pooledNode != null){
            return pooledNode;   
        }else{
            var newNode = document.createElement("div");
            this.nodes.push(newNode);
            return newNode;
        }
    };
    $s.NodePool.releaseNode = function(node){
        if(node != undefined && node != null){
            if(node instanceof $s.Unit){
                var view = node.view;
                if(view != null){
                    var div = view.node;
                    div.style.display = "none";
                }
            }           
        }   
    }
   
    $s.UnitView = function(){ // Unit的视图
        this.unit = null;
        this.node = null;
    };
    $s.UnitView.prototype.repaint = function(){
        if(this.node == null){ // 初始化
            var tag = $s.NodePool.createNode();
            tag.style.width = $s.UNIT_WIDTH + "px";
            tag.style.height = $s.UNIT_HEIGHT + "px";
            tag.style.borderStyle = "dotted";
            tag.style.borderWidth = "1px";
            tag.style.borderColor = "white";       
            tag.style.margintLeft = "1px";
            tag.style.marginRight = "1px";
            tag.style.marginTop = "1px";
            tag.style.marginBottom = "1px";
            tag.style.backgroundColor =  this.unit.color; // 颜色由模型Unit指定
            tag.style.position = "absolute"; //容器的position指定为relative,孩子的position指定为absolute时,表示孩子相对容器绝对定位.
           
            tag.style.display = "block"; // 重要,因为从NodePool取现的结点是隐藏状态的
           
            var x = this.unit.x * $s.UNIT_WIDTH;
            var y = this.unit.y * $s.UNIT_HEIGHT;
            tag.style.top = y + "px";
            tag.style.left = x + "px";
           
            this.node = tag;
            $s.SnakeContext.panelView.append(this);
        }else{
            var tag = this.node;
           
            var x = this.unit.x * $s.UNIT_WIDTH;
            var y = this.unit.y * $s.UNIT_HEIGHT;
            tag.style.top = y + "px";
            tag.style.left = x + "px";
            tag.style.backgroundColor = this.unit.color;
        }
    };   
   
    $s.PanelView = function(){ // 整个游戏区域,包括按钮区
        var panel = document.createElement("div");
        panel.style.width = ($s.PANEL_WIDTH * $s.UNIT_WIDTH ) + "px";
        panel.style.height = ($s.PANEL_HEIGHT * $s.UNIT_HEIGHT ) + "px";
        panel.style.borderStyle = "dotted";
        panel.style.borderColor = "red";
        panel.style.borderWidth = "1px";
        panel.style.marginLeft = "auto";
        panel.style.marginRight = "auto";
        panel.style.marginTop = "50px";
        panel.style.position = "relative"; // 容器的position指定为relative,孩子的position指定为absolute时,表示孩子相对容器绝对定位.
        panel.style.marginBottom = "auto";
        this.node = panel;
        document.body.appendChild(panel);
       
        var len = document.createElement("div");
        len.style.marginLeft = "auto";
        len.style.marginRight = "auto";
        len.style.marginBottom = "20px";
        len.style.color = "gray";
        len.style.fontSize = "12px";
        len.innerHTML = "长度:";
        document.body.appendChild(len);
        $s.SnakeContext._len = len;
       
        var startBn = document.createElement("button");
        startBn.innerHTML = "开始";
        startBn.style.marginLeft = "10px";
        startBn.onclick = function(){
            $s.SnakeContext.run();
        };
        $s.SnakeContext._startBn = startBn;
        document.body.appendChild(startBn);
       
        var pauseBn = document.createElement("button");
        pauseBn.innerHTML = "暂停";
        pauseBn.style.marginLeft = "10px";
        pauseBn.onclick = function(){
            $s.SnakeContext.pause();   
        };
        $s.SnakeContext._pauseBn = pauseBn;
        document.body.appendChild(pauseBn);
       
        /*
        var stopBn = document.createElement("button");
        stopBn.innerHTML = "停止";
        stopBn.style.marginLeft = "10px";
        stopBn.onclick = function(){
            $s.SnakeContext.stop();   
        };
        $s.SnakeContext._stopBn = stopBn;
        document.body.appendChild(stopBn);
        */
       
        var restartBn = document.createElement("button");
        restartBn.innerHTML = "重新开始";
        restartBn.style.marginLeft = "10px";
        restartBn.onclick = function(){
            window.location.href = window.location.href;
        };
        $s.SnakeContext._restartBn = restartBn;
        document.body.appendChild(restartBn);
       
        var line = document.createElement("div");
        line.style.height = "10px";
        document.body.appendChild(line);
       
        var span = document.createElement("span");
        span.style.color = "gray";
        span.style.fontSize = "12px";
        span.innerHTML = "调试";
        document.body.appendChild(span);
       
        var debug = document.createElement("input");
        debug.type = "checkbox";       
        debug.checked = $s.DEBUG;
        debug.onchange = function(){
            $s.SnakeContext.setDebug(debug.checked);
        };       
        document.body.appendChild(debug);
       
    };
    $s.PanelView.prototype.append = function(unitView){
        try{
            this.node.appendChild(unitView.node);
        }catch(e){
            alert(e);   
        }       
    };
   
    /*
     * 全局环境类,代表应用       
     * 约定以_开头的成员为私有成员
     * 启动程序的方法:
     * window.onload = function(){
     *     $s.SnakeContext.init();
     * }
     */
    $s.SnakeContext = {   
        dir : $s.Dir.NONE,
        state : $s.State.STOP,
        goTimer : null,       
        run : function(){           
            if(this.state != $s.State.RUNNGIN){
                this.state = $s.State.RUNNGIN;
                this.goTimer = window.setInterval(function(){
                                                    $s.SnakeContext.updateFood();
                                                    $s.SnakeContext.snake.go();       
                                                 },$s.STEP);
            }
           
        },
        stop : function(){
            this._setState($s.State.STOP);
        },
        pause : function(){
            this._setState($s.State.PAUSE);
        },
        _setState : function(s){
            if(this.state != s && this.goTimer != null){
                window.clearInterval(this.goTimer);
                this.goTimer = null;
                this.state = s;
            }   
        },
        getFood : function(x,y){
            for(var f in this.foods){
                if(f.x == x && f.y == y){
                    return f;   
                }   
            }   
            return null;
        },
        init : function(){   
            this.panelView = new $s.PanelView();
            this.snake = new $s.Snake();
            this.dir = $s.Dir.DOWN;
            this.snake.init($s.Dir.UP,3);
            this._len.innerHTML = "长度:" + 3;
           
            document.body.onkeyup = function(e){
                var code = null;
                if(window.event){ // fuck的IE
                    code =     window.event.keyCode;
                }else{
                    code =     e.keyCode;
                }
                var str = "";
                var oldDir = $s.SnakeContext.dir;
                switch(code){
                    case 37: // left
                        if($s.SnakeContext.dir != $s.Dir.RIGHT){
                            $s.SnakeContext.dir = $s.Dir.LEFT;   
                        }   
                        str = "left";
                        break;
                    case 38 : // up
                        if($s.SnakeContext.dir != $s.Dir.DOWN){
                            $s.SnakeContext.dir = $s.Dir.UP;   
                        }           
                        str = "up";
                        break;
                    case 39: // right
                        if($s.SnakeContext.dir != $s.Dir.LEFT){
                            $s.SnakeContext.dir = $s.Dir.RIGHT;   
                        }           
                        str = "right";
                        break;
                    case 40: // down
                        if($s.SnakeContext.dir != $s.Dir.UP){
                            $s.SnakeContext.dir = $s.Dir.DOWN;   
                        }               
                        str = "down";
                        break;
                }
                if($s.SnakeContext.dir != oldDir){
                    if($s.DEBUG){
                        var v = $s($s.KEY_UP_DIR_ID);
                        if(v){
                            v.innerHTML = "方向键:" + str;
                        }                       
                    }
                   
                    if($s.SnakeContext.goTimer != null){
                        window.clearInterval($s.SnakeContext.goTimer);
                        $s.SnakeContext.goTimer = null;           
                    }   
                    $s.SnakeContext.snake.go();
                    $s.SnakeContext.goTimer = window.setInterval(function(){
                                                            $s.SnakeContext.updateFood();
                                                            $s.SnakeContext.snake.go();       
                                                         },$s.STEP);
                }           
            };
           
            var loc = $s.Random.randomLocation($s.PANEL_WIDTH - 1, $s.PANEL_HEIGHT - 1);
            this.food = new $s.Food(loc.x,loc.y);
           
        },
        snake : null,
        foods : [],
        panelView : null,
        food : null,
        updateFood : function(){
            if(this.food.alive){ // 当前Food还存活
                return;   
            }
            var loc = null;
            do{

               // 随机产生一个点,直到不Snake重叠  
                loc = $s.Random.randomLocation($s.PANEL_WIDTH - 1,$s.PANEL_HEIGHT - 1);
            }while(this.overlap(loc));   
            this.food = new $s.Food(loc.x,loc.y);
           
        },
        overlap : function(loc){ // 检查是否与Snake重叠,当重叠时返回true
            var x = loc.x;
            var y = loc.y;
            for(var i = 0 ; i < this.snake.units.length ; i ++ ){
                var u = this.snake.units[i];
                if(u.x == x && u.y == y){
                    return true;   
                }
            }
            return false;
        },
        hasFood : function(x,y){
            if($s.DEBUG){
                var xt = $s($s.HEAD_LOCATION_ID);
                if(xt){
                    xt.innerHTML = "头部位置:(" +  x + "," + y + ")";       
                }               
            }               
            return this.food.locateOn(x,y);
        },
        setDebug : function(enable){
            if(enable != $s.DEBUG){
                $s.DEBUG = enable;
                if($s.DEBUG){ // 显示
                    var i = $s($s.KEY_UP_DIR_ID);
                    $s.SnakeContext._show(i);
                    i = $s($s.HEAD_LOCATION_ID);
                    $s.SnakeContext._show(i);
                }else{ // 隐藏
                    var i = $s($s.KEY_UP_DIR_ID);
                    $s.SnakeContext._hide(i);
                    i = $s($s.HEAD_LOCATION_ID);
                    $s.SnakeContext._hide(i);
                }
            }   
        },
        _show : function(tag){
            if(tag){
                tag.style.display = "block";   
            }   
        },
        _hide : function(tag){
            if(tag){
                tag.style.display = "none";   
            }   
        },
        ondead : function(){ // Snake死亡时回调
            if(this._startBn){
                this._startBn.disabled = true;
            }
            if(this._pauseBn){
                this._pauseBn.disabled = true;   
            }
            if(this._stopBn){
                this._stopBn.disabled = true;   
            }
            alert("挂了");   
        },
        oneat : function(){ // Snake长度增加时回调
            this._len.innerHTML = "长度:" + this.snake.units.length;   
        },
        _startBn : null,
        _pauseBn : null,
        _stopBn : null,
        _restartBn : null,
        _len : null
    };
   
})();



计算机 二手书 经典
http://pcenshao.taobao.com
分享到：
| 网页菜单制作
评论
1 楼 沙舟狼客 2011-08-01  
用html5中的canvas标签写更简单，参考http://ligson.iteye.com/blog/1136517
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript贪吃蛇(面向对象)

    JavaScript贪吃蛇是一款基于面向对象编程的经典小游戏，它利用了HTML、CSS和JavaScript技术来实现。在这个项目中，我们将深入探讨JavaScript的面向对象特性以及如何应用于游戏开发。 首先，JavaScript是一种支持...

    js 贪吃蛇（面向对象）

    总结来说，"js 贪吃蛇（面向对象）"案例提供了学习和实践JavaScript面向对象编程的好机会。通过分析和实现这个案例，开发者可以深入理解面向对象的设计原则，提高代码复用和维护性，同时也能体会到面向对象编程在...

    JavaScript简易贪吃蛇

    JavaScript简易贪吃蛇是一款利用面向对象编程思想开发的基于网页的简单游戏。在这个游戏中，玩家通过控制一个由多个方块组成的小蛇，目标是吃到屏幕上出现的食物，每次吃掉食物后，小蛇会变长，游戏难度也随之增加。...

    小游戏JavaScript面向对象编程贪吃蛇

    在本项目"小游戏JavaScript面向对象编程贪吃蛇"中，我们将深入探讨如何使用JavaScript进行面向对象编程，来实现经典的贪吃蛇游戏。面向对象编程（Object-Oriented Programming, OOP）是编程的一种范式，它将程序设计...

    JavaScript原生面向对象贪吃蛇.rar

    JavaScript原生面向对象贪吃蛇是一款使用纯JavaScript编程实现的经典小游戏。它利用了JavaScript的面向对象编程特性，展示了如何在浏览器环境中创建一个交互式的、动态的游戏。在这个项目中，我们将探讨以下几个关键...

    贪吃蛇面向对象版.rar

    《贪吃蛇面向对象版》是一款使用原生JavaScript编写的，基于面向对象编程思想实现的经典游戏。本项目旨在帮助初学者理解面向对象编程的基本概念，同时也为已经熟悉JavaScript的开发者提供了一个有趣的练习案例。 在...

    JavaScript贪吃蛇小游戏.zip

    通过学习和实践这个JavaScript贪吃蛇小游戏，开发者不仅可以深入理解JavaScript的基本语法和面向对象编程，还能掌握到游戏开发中的动态更新、事件处理、动画制作等技巧，对于提升前端开发能力大有裨益。

    基于javascript实现贪吃蛇小游戏

    3. JavaScript面向对象编程：文章中提到了用“自调用函数”来封装食物对象，这表明了对JavaScript面向对象编程特性的应用。通过构造函数创建对象，并利用原型（prototype）扩展对象功能，使对象能够初始化并在页面上...

    贪吃蛇游戏_javascript_贪吃蛇；_

    通过学习和实践这个JavaScript贪吃蛇游戏，开发者不仅可以深入理解JavaScript的基础语法和面向对象编程，还能掌握事件处理、DOM操作、动画渲染等关键技能。此外，这个游戏还涉及到基本的算法设计，如队列数据结构...

    原生javascript网页贪吃蛇小游戏源码

    【原生JavaScript网页贪吃蛇小游戏源码】是一款利用JavaScript面向对象编程技术实现的经典小游戏，旨在提升开发者在编程过程中的思维能力。贪吃蛇游戏，作为一款广为人知的休闲娱乐游戏，通过JavaScript来实现，既...

    Javascript贪吃蛇.rar

    通过学习和实现这个JavaScript贪吃蛇小游戏，前端开发者不仅能掌握基本的JavaScript语法，还能深入理解面向对象编程思想，同时提升在实际项目中解决问题的能力。这是一个既有趣又有教育意义的练习，适合想要提升前端...

    小练手+JavaScript+贪吃蛇

    6. **对象和类**：可能用到面向对象编程，定义蛇、食物等对象，封装各自的行为和属性。 总的来说，这个项目是一个很好的实践平台，涵盖了JavaScript基础到高级的游戏开发技术，对于初学者来说是一次宝贵的学习机会...

    JavaScript贪吃蛇案例

    6. **对象与类**：定义对象，使用构造函数创建实例，实现面向对象编程。 7. **条件语句与循环**：if...else条件判断，for和while循环控制游戏逻辑。 8. **数组操作**：遍历数组，添加或删除元素，查找特定元素。 ...

    纯JS代码实现的贪吃蛇小游戏

    通过这个项目，开发者不仅可以掌握JavaScript的基本语法和面向对象编程，还能深入理解游戏逻辑、事件处理和图形渲染等实际应用场景。对于初学者来说，这是一个很好的学习项目，能够提升编程技巧和问题解决能力。而...

    面向对象的方法实现贪吃蛇

    利用面向对象的方法，实现贪吃蛇。 1. 利用面向对象的思想实现——一个食物对象、一个蛇对象、一个游戏总控对象。 2. 在使用××.prototype= {}重写原型对象的时候，一定要加上一句constructor:该对象。不然会造成...

    javascript贪吃蛇

    总结起来，JavaScript贪吃蛇游戏涉及到HTML结构设计、CSS样式布局、JavaScript事件处理、面向对象编程、Canvas绘图以及游戏逻辑实现等多个核心知识点。通过这个项目，开发者不仅可以巩固前端基础，还能提升对游戏...

    JS简单实现实现贪吃蛇

    使用JavaScript简单实现贪吃蛇,基于JS的面向对象技术

Magicbox
Global site tag (gtag.js) - Google Analytics