Skip to content
小游戏: JavaScript 面向对象编程-----贪吃蛇:
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
README.md
food.js
game.js
index.html
snake.gif
snake.js
tool.js

README.md

typora-root-url typora-copy-images-to
./
./

JavaScript 经典面向对象Demo-贪吃蛇...

snake

​ 1 面向对象编程思想在程序项目中有着非常明显的优势:

​ 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块

​ 1- 2 维护非常方便并且成本较低。

​ 2 这个demo是采用了面向对象的编程思想. 用JavaScript 语言编写的游戏小程序--贪吃蛇.

​ 代码注释详细,逻辑清晰 . 非常适合新手前端开发者, 锻炼JavaScript语言的面向对象的编程思想.

​ 欢迎大家下载. 觉得好的话,随手给个star,  您的star是我最大的动力!

3 核心代码片段展示:

food.js--设计食物对象

function Food(option) {
  //防止用户不传参数会报错
  option = option || {};
  this.width = option.width || 20;
  this.height = option.height || 20;
  this.bgc = option.bgc || 'orange';
  this.x = option.x || 0;
  this.y = option.y || 0;
  this.borderRadius = option.borderRadius |10;
}

snake.js--设计蛇对象

// 1 创建蛇对象
function Snake(option) {
    option = option || {};
    this.width = option.width || 20;
    this.height = option.height || 20;
    this.body = [
        {x: 3, y: 2, col: 'green'},//蛇头的位置和颜色
        {x: 2, y: 2, col: 'orange'},//蛇头身体的位置和颜色
        {x: 1, y: 2, col: 'orange'}];
    this.direction = option.direction || 'right';
}


//2 渲染蛇的方法
Snake.prototype.render = function () {
    // 2-3 为了防止多个sanke渲染到页面上,一渲染之前先清除掉原来的
    for (var i = 0; i < arr.length; i++) {
        map.removeChild(arr[i]);//移除页面上的蛇节
    }
    arr.splice(0,arr.length);//蛇节都被移除掉了,那么数组中也应该都移除.

game.js--设计游戏对象,

//2 开始游戏
Game.prototype.start = function () {
    this.snake.render();
    this.food.render();

    // 2-1 游戏一开始,蛇和食物就渲染出来
    timeid = setInterval(function () {
        //2-2 -1 蛇的数据改变
        this.snake.move();
       // 2-3 判断蛇是否到达边界
        var snakeHead = this.snake.body[0];
        //2-3-1 求蛇头可以移动的水平/垂直坐标的最大位置
        var maxX = map.offsetWidth/this.snake.width -1;
        var maxY = map.offsetHeight/this.snake.height -1;
        if (snakeHead.x <0 ||snakeHead.x > maxX ||snakeHead.y <0 ||snakeHead.y > maxY){
            clearInterval(timeid);
            alert("gave over");
            //注:当X超出范围,代码应立即终止,
            // 防止2-2-2 渲染出下一个盒子.展示出来
            return;
        }
You can’t perform that action at this time.