JS用原型对象写的贪吃蛇，很粗糙的代码

YanceyOfficial 发布于2019-08-20 16:05 / 1852人阅读

摘要：贪吃蛇类默识贪吃蛇速度，毫秒地图轴分为多少单位地图轴分为多少单位贪吃蛇运动速度贪吃蛇每节身体和食物的宽高地图轴分为多少单位初始化贪吃蛇属性蛇移动方向食物和食物的坐标游戏开始创建地图初始化食物初始化贪吃蛇绑定键盘方向更改贪吃蛇方向移动贪吃蛇创

/**

贪吃蛇类

@author 默识

@param {int} speed 贪吃蛇速度，毫秒

@param {int} x 地图x轴分为多少单位

@param {int} y 地图y轴分为多少单位

@returns {Snake} none
*/

function Snake(speed, x, y) {

</>复制代码 
//贪吃蛇运动速度
this.speed = speed;
//贪吃蛇每节身体和食物的宽高
this.width = window.innerWidth / x;
this.height = window.innerHeight / y;
//地图xy轴分为多少单位
this.x = x;
this.y = y;
//初始化贪吃蛇属性
this.sBody = [
    [0, 1, "green"],
    [1, 1, "green"],
    [2, 1, "green"],
    [3, 1, "red"]
];
//蛇移动方向
this.sDirection = "right";
//食物和食物的坐标
this.food = null;
this.foodX = 0;
this.foodY = 0;

}
/**

游戏开始

@returns {undefined} none
*/

Snake.prototype.start = function () {

</>复制代码 
this.createMap();//创建地图
this.createFood();//初始化食物
this.createSnake();//初始化贪吃蛇
this.bind();//绑定键盘方向更改贪吃蛇方向
//移动贪吃蛇
setInterval(function () {
    snake.moveSnake();
}, this.speed);

};
/**

创建贪吃蛇地图

@returns {undefined}none
*/

Snake.prototype.createMap = function () {

</>复制代码 
document.body.style.backgroundColor = "black";

};
/**

创建贪吃蛇食物

@returns {undefined}none
*/

Snake.prototype.createFood = function () {

</>复制代码 
//创建食物
var food = document.createElement("div");
this.food = food;
this.foodX = Math.floor(Math.random() * this.x);
this.foodY = Math.floor(Math.random() * this.y);
//食物的样式
with (food.style) {
    position = "absolute";
    width = this.width + "px";
    height = this.height + "px";
    backgroundColor = "green";
    left = this.foodX * this.width + "px";//食物随机X轴坐标
    top = this.foodY * this.height + "px";//食物随机Y轴坐标  
}
//食物添加到地图上
document.body.appendChild(food);

};
/**

创建贪吃蛇

@returns {undefined}none
*/

Snake.prototype.createSnake = function () {

</>复制代码 
//绘制蛇
for (var i = 0; i < this.sBody.length; i++) {
    this.sBody[i][3] = this.sBody[i][3] || document.createElement("div");
    //设置蛇的样式
    with (this.sBody[i][3].style) {
        position = "absolute";
        width = this.width + "px";
        height = this.height + "px";
        left = this.sBody[i][0] * this.width + "px";
        top = this.sBody[i][1] * this.height + "px";
        backgroundColor = this.sBody[i][2];
    }
    //放入地图中
    document.body.appendChild(this.sBody[i][3]);
}

};
/**

绑定方向事件更改贪吃蛇运动方向

@returns {undefined}none
*/

Snake.prototype.bind = function () {

</>复制代码 
var tmp = this;
document.onkeyup = function (e) {
    var e = window.event || e;
    switch (e.keyCode) {
        case 37:
            tmp.sDirection = "left";
            break;
        case 38:
            tmp.sDirection = "up";
            break;
        case 39:
            tmp.sDirection = "right";
            break;
        case 40:
            tmp.sDirection = "down";
            break;
    }
}

};
/**

贪吃蛇行动

@returns {undefined}none
*/

Snake.prototype.moveSnake = function () {

</>复制代码 
//舍身跟随前一节运动,即改变坐标，注意蛇身先走，要不蛇头紧随的一段身体会跟蛇头重叠
for (var i = 0; i < this.sBody.length - 1; i++) {
    this.sBody[i][0] = this.sBody[i + 1][0];
    this.sBody[i][1] = this.sBody[i + 1][1];
}
//蛇运动根据方向改变xy轴坐标
switch (this.sDirection) {
    case "up":
        this.sBody[this.sBody.length - 1][1]--;
        break;
    case "right":
        this.sBody[this.sBody.length - 1][0]++;
        break;
    case "down":
        this.sBody[this.sBody.length - 1][1]++;
        break;
    case "left":
        this.sBody[this.sBody.length - 1][0]--;
        break
}
//贪吃蛇吃食物
if (this.sBody[this.sBody.length - 1][0] === this.foodX
        && this.sBody[this.sBody.length - 1][1] === this.foodY
        ) {
    //创建一节身体
    var node = [this.sBody[0][0], this.sBody[0][1], "green"];
    //身体生长
    this.sBody.unshift(node);
    //食物位置重置
    this.foodX = Math.floor(Math.random() * this.x);
    this.foodY = Math.floor(Math.random() * this.y);
    with (this.food.style) {
        left = this.foodX * this.width + "px";//食物随机X轴坐标
        top = this.foodY * this.height + "px";//食物随机Y轴坐标  
    }
}
//判断游蛇是否碰到边界
if (this.sBody[this.sBody.length - 1][0] < 0
        || this.sBody[this.sBody.length - 1][0] >= this.x
        || this.sBody[this.sBody.length - 1][1] < 0
        || this.sBody[this.sBody.length - 1][1] >= this.y
        ) {
    this.gameover();
    return;
}
//显示新贪吃蛇位置
this.createSnake();

};
/**

游戏结束

@returns {undefined} none
*/

Snake.prototype.gameover = function () {

</>复制代码 
alert("GAME OVER!");
location.reload();

};
var snake = new Snake(100, 60, 40);
snake.start();

云服务器 GPU云服务器 js贪吃蛇代码视频贪吃蛇小游戏js代码贪吃蛇游戏php代码 js贪吃蛇视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82702.html

深入理解js

摘要：详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。介绍了的内存管理。延迟加载 (Lazyload) 三种实现方式延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。详解 Javascript十大常用设计模式力荐~ ...

caikeal 2019-08-26 11:39 评论0 收藏0
用 js 写个自动寻路的贪吃蛇

摘要：前言偶尔看到两年前写的贪吃蛇，当时没把自动寻路的算法写好，蛇容易挂，周末找了个时间把当年的坑填上，写了个不会挂的贪吃蛇。前言偶尔看到两年前写的贪吃蛇，当时没把自动寻路的算法写好，蛇容易挂，周末找了个时间把当年的坑填上，写了个不会挂的贪吃蛇。两年前的版本_点击查看这次更新的版本_点击查看代码比较简单,使用 canvas 完成游戏的画图，抛开 A* 算法的实现，整个 html 代...

gaara 2019-08-22 10:45 评论0 收藏0
小白成长日记：写个贪吃蛇

摘要：贪吃蛇并不是通过操作来完成移动的，而是通过记录贪吃蛇的路径来将身体渲染出来。目前没有内置的操作符判断对象的内容是否相同。还是用的vue，本来以为不合适，但想法错了。贪吃蛇并不是通过操作dom来完成移动的，而是通过记录贪吃蛇的路径来将身体渲染出来。一般移动元素，我们都是变动它的css达到目的，但我在写贪吃蛇的时候发现这样很难以实现，参考了网上的资源，发现大部分人是通过记录贪吃蛇的路径...

archieyang 2019-08-21 17:55 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

you_De 2019-08-29 12:34 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

lwx12525 2019-08-20 16:35 评论0 收藏0