JavaScript实现贪吃蛇（两种方法）

最新推荐文章于 2023-10-10 12:12:50 发布
最新推荐文章于 2023-10-10 12:12:50 发布
阅读量1k 收藏
点赞数
分类专栏： javascript 文章标签： javascript 方法 代码 html 贪吃蛇
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blankmanp/article/details/44850953
版权

前阵子无聊，试着用原生态JavaScript写了写贪吃蛇。一开始写的时候因为以前写的是C，所以想的就是面对过程，于是写了一坨翔出来。。。不过还是把代码贴上来吧：

<!--HTML CODE:-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zombie Snake</title>
    <script type="text/javascript" src="ZombieSnake.js"></script>
    <link rel="stylesheet" type="text/css" href="ZombieSnake.css" />
</head>
<body>
    <div id="pannel"></div>
    <select name="" id="snakeSpeed">
        <option value="100">god damn</option>
        <option value="500" selected="selected">normal people</option>
        <option value="1000">just for baby</option>
    </select>
    <input type="button" id="snakeStart" value="start" />
</body>
</html>
/*CSS CODE:*/
#pannel table {
    border-collapse: collapse;
    margin-bottom: 10px;
}
#pannel td {
    width: 10px;
    height: 10px;
    border: 1px solid black;
}
.food {
    background: black;
}
.snake {
    background: green;
}
.wall {
    background: red;
}
//JavaScript CODE：
var gameSetting = {
    Speed : 500, //speed of snake
    Size : 20, //size of pannel
    Len : 3, //length of snake
    Func : null
};

var direction = {
    left : 37,
    up : 38,
    right : 39,
    down : 40
};

var Snake,
    direct,
    inside;

window.onload = function() {
    createTable("pannel");
    window.onkeydown = listen;
    document.getElementById("snakeSpeed").onchange = function() {
        gameSetting.Speed = this.value;
    }
    document.getElementById("snakeStart").onclick = function() {
        start();
        this.disabled = true;
    }
}

function start() {
    direct = direction.down;
    Snake = new Array();
    inside = cubeArray(gameSetting.Size);
    createSnake();
    createFood();
    move();
    createWall();
}

function cubeArray(m) {
    var arr = new Array(m);
    for (i = 0; i < m; i ++) {
        arr[i] = new Array(m);
    }
    return arr;
}

function addObj (x, y, name) {
    var obj = document.getElementById("box" + x + "_" + y);
    obj.className = name;
}

function restart() {
    for (var x = 0; x < gameSetting.Size; x ++)
        for (var y = 0; y < gameSetting.Size; y ++) {
            document.getElementById("box" + x + "_" + y).className = "";
            document.getElementById("snakeStart").removeAttribute("disabled");
        }
}

function createTable (pid) {
    var t = [];
    t.push("<table>");
    for (var j = 0; j < gameSetting.Size; j ++) {
        t.push("<tr id = row" + j +">");
        for (var i = 0; i < gameSetting.Size; i ++) {
            t.push("<td id = 'box" + i + "_" + j + "'x ='" + i + "' y ='" + j + "'></td>");
        };
        t.push("</tr>");
    };
    t.push("</table>");
    var p = document.getElementById(pid);
    p.innerHTML = t.join("");
};

function createWall() {
    for (var i = 0; i < 20; i ++)
        document.getElementById("box" + i + "_0").className = "wall";
    for (var i = 0; i < 20; i ++)
        document.getElementById("box" + i + "_19").className = "wall";
    for (var i = 0; i < 20; i ++)
        document.getElementById("box" + "0_" + i).className = "wall";
    for (var i = 0; i < 20; i ++)
        document.getElementById("box" + "19_" + i).className = "wall";
}

function createPoint(startX, startY, endX, endY) {
    var x = Math.floor(Math.random() * (endX - startX)) + startX;
    var y = Math.floor(Math.random() * (endY - startY)) + startY;
    var p = [];
    p[0] = x;
    p[1] = y;
    return p;
}

function createSnake() {
    var point = createPoint(gameSetting.Len, gameSetting.Len, gameSetting.Size / 2, gameSetting.Size / 2);
    for (var i = 0; i < gameSetting.Len; i ++) {
        var x = point[0];
        var y = point[1] - i;
        Snake.push([x, y]);
        addObj(x, y, "snake");
    }
}

function createFood() {
    var foodPoint = createPoint(1, 1, gameSetting.Size - 1, gameSetting.Size - 1);
    if(document.getElementById("box" + foodPoint[0] + "_" + foodPoint[1]).className == "snake") return createFood();
    addObj(foodPoint[0], foodPoint[1], "food");
    inside[foodPoint[0]][foodPoint[1]] = "food";
}

function listen(e) {
    e = e || event;
    direct = Math.abs(e.keyCode - direct) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : direct;
}

function move() {
    if (gameSetting.Func) window.clearInterval(gameSetting.Func);
    gameSetting.Func = window.setInterval(step, gameSetting.Speed);
}

function step() {
    var headX = Snake[0][0],
        headY = Snake[0][1],
        lastX = Snake[Snake.length - 1][0],
        lastY = Snake[Snake.length - 1][1];
    addObj(lastX, lastY, "");
    for (var i = Snake.length - 1; i > 0; i --) {
        Snake[i][0] = Snake[i - 1][0];
        Snake[i][1] = Snake[i - 1][1];
    }
    switch (direct) {
        case direction.up: headY    -= 1; break;
        case direction.down: headY  += 1; break;
        case direction.left: headX  -= 1; break;
        case direction.right: headX += 1; break;
    }
    Snake[0][0] = headX;
    Snake[0][1] = headY;
    for (var i = 0; i < Snake.length; i ++) {
        addObj(Snake[i][0], Snake[i][1], "snake");
    }
    //eat food
    if (inside[headX][headY] == "food") {
        createFood();
        Snake.unshift([headX, headY]);
    }
    if (headX >= 19 || headX <= 0 || headY >= 19 || headY <=0 ) {
        window.clearInterval(gameSetting.Func);
        alert("game over! :D ");
        restart();
    }
}

如上所示，写的简直就是一坨翔，完全不堪入目。功能也没有怎么完善：比如说撞到自己的判断没有写，数组操作烂到了一种水平，写了一大堆函数看得头都晕了，还掺杂了一大堆的全局变量……于是看了点书后我又写了另一个版本，是面向对象的：

<!--HTML CODE:-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Snake</title>
    <link rel="stylesheet" type="text/css" href="snake.css" />
</head>
<body>
    <div id="game">
        <div id="pannel"></div>
    </div>
    <div id="button">
        <input type="button" id="start" value="start" />
    </div>
</body>
<script type="text/javascript" src="snake.js"></script>
</html>
/*CSS CODE:*/
#pannel table {
    border-collapse: collapse;
    margin-bottom: 10px;
}
#pannel td {
    width: 10px;
    height: 10px;
    border: 1px solid black;
}
.food {
    background: black;
}
.snake {
    background: green;
}
//JavaScript CODE:
(function () {
    /*全局变量*/
    var g = {
        //获得or设置盒子的attribute
        attr : function (x, y, att, name) {
            var d = document.getElementById("box_" + x + "_" + y);
            if (d && name)
                d.setAttribute(att, name);
            else if (d)
                return d.getAttribute(att);
        },
        //随机创建点
        create : function (start, end) {
            return Math.floor(Math.random() * (end - start) + start);
        },
        //运动方向
        direction : {
            left : 37,
            up : 38,
            right : 39,
            down : 40
        },
        //游戏设定
        setting : {
            size : 20,
            speed : 500,
            len : 3,
            func : null,
            direct : null
        }
    }
    /*Game构造器*/
    function Game () {
        /*创建格子*/
        this.pannel = function () {
            var t = [];
            t.push("<table>");
            for (var i = 0; i < g.setting.size; i ++) {
                t.push("<tr class = 'row' y = " + i + ">");
                for (var j = 0; j < g.setting.size; j ++) {
                    t.push("<td id = 'box_" + j + "_" + i + "'></td>");
                }
                t.push("</tr>");
            }
            t.push("</table>");
            document.getElementById("pannel").innerHTML = t.join("");
        };
        /*初始化游戏*/
        this.init = function () {
            if (g.setting.func)
                window.clearInterval(g.setting.func);
            var d = document.getElementById("start"); 
            if (d)
                d.disabled = false;
            for (var x = 0; x < g.setting.size; x ++)
                for (var y = 0; y < g.setting.size; y ++)
                    g.attr(x, y, "class", " ");
        }
        /*游戏开始*/
        this.start = function () {
            g.setting.direct = g.direction.down;
            var snake = new Snake(), food = new Food();
            food.create();
            snake.create();
            //蛇移动
            g.setting.func = window.setInterval(snake.move, g.setting.speed);
        }
        /*监听键盘*/
        this.listen = function (e) {
            e = e || event;
            g.setting.direct = Math.abs(e.keyCode - g.setting.direct) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : g.setting.direct;
        }
        /*游戏结束*/
        this.over = function () {
            alert("game over XD!");
            game.init();
        };
    };
    /*Snake构造器*/
    function Snake () {
        var headX, headY, pos = [], that = this;
        /*创建蛇*/
        this.create = function () {
            var x = g.create(g.setting.len, g.setting.size / 2),
            y = g.create(g.setting.len, g.setting.size / 2);
            //获得蛇的坐标
            for (var i = 0; i < g.setting.len; i ++) {
                y --;
                pos.push([x, y]);
                g.attr(x, y, "class", "snake");
            }
        };
        /*移动*/
        this.move = function () {
            headX = pos[0][0];
            headY = pos[0][1];
            lastX = pos[pos.length - 1][0];
            lastY = pos[pos.length - 1][1];
            g.attr(lastX, lastY, "class", " ");
            for (var i = pos.length - 1; i > 0; i --) {
                pos[i][0] = pos[i - 1][0];
                pos[i][1] = pos[i - 1][1];
            }
            switch (g.setting.direct) {
                case g.direction.up : headY    -= 1; break;
                case g.direction.down : headY  += 1; break;
                case g.direction.left : headX  -= 1; break;
                case g.direction.right : headX += 1; break;
            }
            pos[0][0] = headX;
            pos[0][1] = headY;
            for (var i = 0; i < pos.length; i ++)
                g.attr(pos[i][0], pos[i][1], "class", "snake");
            var inside = g.attr(headX, headY, "inside");
            //吃食物
            if (inside == "food") {
                lastX = pos[pos.length - 1][0];
                lastY = pos[pos.length - 1][1];
                if (lastX == pos[pos.length - 2][0]) {
                    if (lastY - pos[pos.length - 2][1] == 1)
                        pos.push([lastX, lastY + 1]);
                    else if (pos[pos.length - 2][1] - lastY == 1)
                        pos.push([lastX, lastY - 1]);
                }
                else if (lastY == pos[pos.length - 2][1]) {
                    if (lastX - pos[pos.length - 2][0] == 1)
                        pos.push([lastX + 1, lastY])
                    else if (pos[pos.length - 2][0] - lastX == 1)
                        pos.push([lastX - 1, lastY]);
                }
                lastX = pos[pos.length - 1][0];
                lastY = pos[pos.length - 1][1];
                g.attr(lastX, lastY, "class", "snake");
                var food = new Food();
                food.create();
            };
            //撞到自己或者墙，游戏结束
            for (var i = 1; i < pos.length; i ++) {
                if (headX == pos[i][0] && headY == pos[i][1])
                    game.over();
                else
                    continue;
            }
            if (headX > 19 || headX < 0 || headY > 19 || headY < 0)
                game.over();
        };
    };
    /*Food构造器*/
    function Food () {
        var that = this;
        /*创建食物*/
        this.create = function () {
            var x = g.create(0, g.setting.size),
            y = g.create(0, g.setting.size);
            //检查是否与蛇的位置重合
            var c = g.attr(x, y, "class");
            if (c == "snake")
                return that.create();
            else {
                g.attr(x, y, "class", "food");
                g.attr(x, y, "inside", "food");
            }
        };
    };

    var game = new Game();
    game.pannel();
    game.init();
    document.getElementById("start").onclick = function () {
        this.disabled = true;
        game.start();
        window.onkeydown = game.listen;
    }

})()

这个版本因为写的太过匆忙，所以有些功能没有加：比如调整蛇的移动速度什么的……有空再说吧……
【END】

blankmanp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于JavaScript实现贪吃蛇游戏
12-28
本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 1.结构 创建一个盒子box作为蛇的身体，当前盒子中只有一个子元素，代表此时蛇的长度为1. 在创建一个盒子food作为贪吃蛇的食物。...
【前端｜JS实战第1篇】使用JS来实现属于自己的贪吃蛇游戏！
A_D_H_E_R_E的博客
08-20 4033
通过这个项目，你不仅可以学习如何使用 JavaScript 来实现一个小游戏，还可以熟练学习js操作dom、数据的常用方法、定时器setInterval、css样式、事件监听器以及实现需求的逻辑思维等等知识，对前面学习的一些理论知识进行了实践，相信你跟着一套教程下来会对前面学习到的知识有更深的理解。后续我们这个前端专栏还会讲述ES6、垃圾回收、js算法技巧、Vue入门实战、React实战、前端面试题。
javascript实现贪吃蛇效果
weixin_63590089的博客
06-09 896
JavaScript，面向对象，前端
利用JS实现贪吃蛇
weixin_63489869的博客
06-23 3678
利用js实现贪吃蛇的相关功能
js实现贪吃蛇
deasec的博客
03-28 5071
很久没有打过js了，所以我翻出以前用画布(Canvas)标签做的贪吃蛇来复习一下顺便讲解一下执行原理。 实现思路：主要用到canvas标签来作为动画，采用逐帧运动法：先画一张之后销毁上一张，擦除->重绘（循环） 需要利用定时器每隔一小段时间就擦除->重绘。运动产生的原理就是：每次运动过程中在前面加一个头然后判断是否吃到食物。如果没有吃到食物就删除尾部(这样就产生前进的效果)，吃到了就不用删除：这样就比原来长度长了一段。边界判定就是获取当前蛇头位置的x,y乘以像素值n 判断是否达到了边界，还有头
JavaScript实现贪吃蛇.zip
04-10
JavaScript实现贪吃蛇.zip
javascript实现简单的贪吃蛇游戏
10-24
本文很简单，给大家分享了一段使用javascript实现简单的贪吃蛇游戏的代码，算是对自己学习javascript的一次小小的总结，代码参考了网友的部分内容，推荐给大家，希望对大家能够有所帮助。
用JavaScript实现贪吃蛇游戏
10-14
主要为大家详细介绍了用JavaScript实现贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现贪吃蛇小游戏
热门推荐
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
JavaScript版贪吃蛇
03-13
使用JavaScript中对象、定时器以及html5新增的Canvas标签等知识制作的一款纯js贪吃蛇游戏，大家下载来学习下
js实现贪吃蛇小游戏
m0_64344470的博客
04-08 206
【代码】js实现贪吃蛇小游戏。
手把手教你完成第一个JS项目：用简单到极致的贪吃蛇游戏熟悉JS语法
Maynor996的博客
07-04 1522
文章目录前言思路分析：第一关 Pixelbox.js的下载和使用第二关 孵一条小蛇-蛇的创建第三关 让小蛇动起来-移动蛇可以移动了，还很丝滑~ 前言 贪吃蛇被业内视为真正意义上的第一款手机游戏，玩法简单到极致，随着诺基亚手机的流行风靡一时！在本次课程中我们采用Pixelbox.js这个框架进行开发，其核心是数据模型及渲染。通过贪吃蛇的开发，我们将对JS的语法更加的熟悉，同时学习如何把一个需求给分解成具体的开发步骤，培养你做项目的思维。 我们先来看一下开发完后的效果： 是不是很有复古的气息！！！没做过的小伙
（新手向js项目）小白必看的原生js实现贪吃蛇游戏
最新发布
weixin_51953261的博客
10-10 377
前端入门，用原生js开发贪吃蛇小游戏
【JavaScript】贪吃蛇
编程记录，亲测有效
11-17 5351
看起来好像很复杂的贪吃蛇，到底是怎么用JavaScript去实现的？ 其实你只要会用setInterval去现实一个时钟，会使用JavaScript的键盘响应事件，会使用JavaScript去操作html节点，也就是HTML DOM与BOM，这个问题应该不会有太大的问题。 下面就来一步一步地，剖析怎么用JavaScript，也就是说完全可以记事本写一个html文件，放在任意一个浏览器中，把贪吃蛇搞起来！
原生JS 实现小游戏 贪吃蛇
m0_64191440的博客
08-16 3044
JS 超详细 贪吃蛇 案例 速速围观
JavaScript贪吃蛇
weixin_35752645的博客
01-06 68
JavaScript 贪吃蛇是一个经典的小游戏，在网页上实现。它的原理很简单：有一条蛇在网页的一个网格中移动，蛇的身体由若干个小方块组成。蛇可以通过改变移动方向来控制它的移动方向。 蛇在移动过程中，如果吃到了食物(食物是一个小方块，它随机出现在网格中)，蛇的身体会变长。如果蛇的头碰到了墙或者蛇身，游戏就结束了。 这个游戏的目的是让蛇吃到尽可能多的食物，尽量长的时间保持活着。 ...
【JS】原生js实现极简版贪吃蛇，附全部代码
小安驾到的博客
02-15 1078
原生js实现贪吃蛇小游戏，包括小蛇的移动、吃食物、检测是否撞到自己等功能
纯生Html + Css +Js实现贪吃蛇（附源码）（个人练习）
m0_53479584的博客
08-05 1058
如题，今天用原生js实现贪吃蛇小游戏，主要是记录一下以及加深学习，大佬勿喷！
JavaScript实现贪吃蛇
Sunblogy的博客
09-26 1219
用js实现一个贪吃蛇游戏， 要求： 1. 不能撞墙 2. 不能撞自己 3. 每吃一个食物就会加一分 4. 相撞后就结束游戏
面向过程方法实现贪吃蛇
06-09
好的，下面是一个简单的面向过程方法实现贪吃蛇的示例代码： ```python import pygame import random # 初始化pygame pygame.init() # 定义游戏窗口尺寸 WIDTH = 600 HEIGHT = 600 # 定义贪吃蛇方块大小 BLOCK_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值