贪吃蛇原生JavaScript分享

最新推荐文章于 2024-08-12 22:28:07 发布
最新推荐文章于 2024-08-12 22:28:07 发布
阅读量2.1k 收藏 39
点赞数 23
分类专栏： 小游戏 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AN27xy/article/details/109457924
版权

1.HTML部分，东西很少

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇</title>
    <style>
    *{
        margin: 0px;
        padding: 0px;
    }
    td{
        border-radius: 30%;
    }
    </style>
    
</head>
<body>
    <script type="text/javascript" src="./snake.js"></script>
</body>
</html>

2.JavaScript部分

var arrayBox = new Array(); // 存放单元格
var arraySnake = new Array(); // 存放蛇 
var food; // 食物
var key = true; // 判断页面是否需要初始化
var timekey; // 运动定时器常量

function newGame() {
    bgInit();
    arrayBoxInit();
    initSnake();
    randomFood();
}

newGame();
document.onclick = function () {
    if (key) {
        gameStart(arraySnake);
        key = false;
    }
}



// 记录的单元格数组初始化
function arrayBoxInit() {
    for (var y = 0; y < 20; y++) {
        arrayBox[y] = new Array();
        for (var x = 0; x < 20; x++) {
            arrayBox[y][x] = 0;
        }
    }
}

// 背景初始化
function bgInit() {
    var table = document.createElement("table");
    table.style = "border-spacing:0px; border:1px solid #3c3c3c;margin:10% auto";
    for (var y = 0; y < 20; y++) {
        var tr = document.createElement("tr");
        for (var x = 0; x < 20; x++) {
            var td = "<td class='box-" + y + "-" + x + "' style='width: 20px; height: 20px;'></td>";
            tr.innerHTML += td;
        }
        table.appendChild(tr);
    }
    document.body.insertBefore(table, document.getElementsByTagName("script")[0]);
}

// 初始化蛇
function initSnake() {
    var x = Math.floor(Math.random() * 20);
    var y = Math.floor(Math.random() * 20);
    var initA = document.getElementsByClassName("box-" + y + "-" + x)[0];
    var b = initBFn(x, y);
    var initB = document.getElementsByClassName(b)[0];
    arraySnake.push(initB);
    arraySnake.push(initA);
    initA.style.backgroundColor = "#9c9c9c";
    initB.style.backgroundColor = "#9c9c9c";
    arrayBox[y][x] = 1;
    arrayBox[b.split("-")[1]][b.split("-")[2]] = 1;
}

// 初始化蛇身
function initBFn(x, y) {
    if (x != 19 && x != 0) {
        if (y != 19 && y != 0) {
            if (Math.random() > 0.5) {
                if (Math.random() > 0.5) {
                    return "box-" + y + "-" + (x + 1);
                } else {
                    return "box-" + y + "-" + (x - 1);
                }
            } else {
                if (Math.random() > 0.5) {
                    return "box-" + (y + 1) + "-" + x;
                } else {
                    return "box-" + (y - 1) + "-" + x;
                }
            }
        } else if (y == 0) {
            if (Math.random() > 0.5) {
                return "box-0-" + (x + 1);
            } else {
                return "box-0-" + (x - 1);
            }
        } else if (y == 19) {
            if (Math.random() > 0.5) {
                return "box-19-" + (x + 1);
            } else {
                return "box-19-" + (x - 1);
            }
        }
    } else if (x == 0) {
        if (y != 19 && y != 0) {
            if (Math.random() > 0.5) {
                return "box-" + (y + 1) + "-0";
            } else {
                return "box-" + (y - 1) + "-0";
            }
        } else if (y == 0) {
            if (Math.random() > 0.5) {
                return "box-1-0";
            } else {
                return "box-0-1";
            }
        } else if (y == 19) {
            if (Math.random() > 0.5) {
                return "box-18-0";
            } else {
                return "box-19-1";
            }
        }
    } else if (x == 19) {
        if (y != 19 && y != 0) {
            if (Math.random() > 0.5) {
                return "box-" + (y + 1) + "-19";

            } else {
                return "box-" + (y - 1) + "-19";
            }
        } else if (y == 0) {
            if (Math.random() > 0.5) {
                return "box-1-19";
            } else {
                return "box-0-18";
            }
        } else if (y == 19) {
            if (Math.random() > 0.5) {
                return "box-18-19";
            } else {
                return "box-19-18";
            }
        }
    }
}

// 随机产生食物食物
function randomFood() {
    var x = Math.floor(Math.random() * 20);
    var y = Math.floor(Math.random() * 20);
    if (!arrayBox[y][x]) {
        document.getElementsByClassName("box-" + y + "-" + x)[0].style = "background-color:#9c9c9c;border-radius:50%";
        arrayBox[y][x] = 1;
        food = document.getElementsByClassName("box-" + y + "-" + x)[0];
    } else {
        eatFood();
    }
}

// 开始游戏
function gameStart(arraySnake) {
    var Ax = arraySnake[1].className.split("-")[2];
    var Ay = arraySnake[1].className.split("-")[1];
    var Bx = arraySnake[0].className.split("-")[2];
    var By = arraySnake[0].className.split("-")[1];
    if (Ay == By) {
        if (Ax > Bx) {
            moveRight();
        } else {
            moveLeft()
        }
    } else {
        if (Ay > By) {
            moveDown()
        } else {
            moveUp()
        }
    }
}


// 初始化运动，（方向：右左上下）
function moveRight() {
    timekey = setInterval(function () {
        var nextBox = document.getElementsByClassName("box-" + arraySnake[arraySnake.length - 1].className.split("-")[1] + "-" + (parseInt(arraySnake[arraySnake.length - 1].className.split("-")[2]) + 1))[0];
        if (nextBox) {
            arrayBox[arraySnake[arraySnake.length - 1].className.split("-")[1]][(parseInt(arraySnake[arraySnake.length - 1].className.split("-")[2]) + 1)] = 1;
            nextBox.style.backgroundColor = "#9c9c9c";
            arraySnake.push(nextBox);
            arrayBox[arraySnake[0].className.split("-")[1]][arraySnake[0].className.split("-")[2]] = 0;
            arraySnake[0].style.backgroundColor = "#fff";
            arraySnake.shift();
            eatFood();
        }
    }, 200);
}

function moveLeft() {
    timekey = setInterval(function () {
        var nextBox = document.getElementsByClassName("box-" + arraySnake[arraySnake.length - 1].className.split("-")[1] + "-" + (parseInt(arraySnake[arraySnake.length - 1].className.split("-")[2]) - 1))[0];
        if (nextBox) {
            arrayBox[arraySnake[arraySnake.length - 1].className.split("-")[1]][(parseInt(arraySnake[arraySnake.length - 1].className.split("-")[2]) - 1)] = 1;
            nextBox.style.backgroundColor = "#9c9c9c";
            arraySnake.push(nextBox);
            arrayBox[arraySnake[0].className.split("-")[1]][arraySnake[0].className.split("-")[2]] = 0;
            arraySnake[0].style.backgroundColor = "#fff";
            arraySnake.shift();
            eatFood();
        }
    }, 200);
}

function moveUp() {
    timekey = setInterval(function () {
        var nextBox = document.getElementsByClassName("box-" + (parseInt(arraySnake[arraySnake.length - 1].className.split("-")[1]) - 1) + "-" + arraySnake[arraySnake.length - 1].className.split("-")[2])[0];
        if (nextBox) {
            arrayBox[(parseInt(arraySnake[arraySnake.length - 1].className.split("-")[1]) - 1)][arraySnake[arraySnake.length - 1].className.split("-")[2]] = 1;
            nextBox.style.backgroundColor = "#9c9c9c";
            arraySnake.push(nextBox);
            arrayBox[arraySnake[0].className.split("-")[1]][arraySnake[0].className.split("-")[2]] = 0;
            arraySnake[0].style.backgroundColor = "#fff";
            arraySnake.shift();
            eatFood();
        }
    }, 200);
}

function moveDown() {
    timekey = setInterval(function () {
        var nextBox = document.getElementsByClassName("box-" + (parseInt(arraySnake[arraySnake.length - 1].className.split("-")[1]) + 1) + "-" + arraySnake[arraySnake.length - 1].className.split("-")[2])[0];
        if (nextBox) {
            arrayBox[(parseInt(arraySnake[arraySnake.length - 1].className.split("-")[1]) + 1)][arraySnake[arraySnake.length - 1].className.split("-")[2]] = 1;
            nextBox.style.backgroundColor = "#9c9c9c";
            arraySnake.push(nextBox);
            arrayBox[arraySnake[0].className.split("-")[1]][arraySnake[0].className.split("-")[2]] = 0;
            arraySnake[0].style.backgroundColor = "#fff";
            arraySnake.shift();
            eatFood();
        }
    }, 200);
}

// 键盘操作拐弯
document.addEventListener("keydown", function (e) {
    if (e.code == "ArrowDown") {
        turnDown();
    } else if (e.code == "ArrowUp") {
        turnUp();
    } else if (e.code == "ArrowLeft") {
        turnLeft();
    } else if (e.code == "ArrowRight") {
        turnRight();
    }
}, false);

// 下拐
function turnDown() {
    if (arraySnake[arraySnake.length - 1].className.split("-")[1] == arraySnake[arraySnake.length - 2].className.split("-")[1]) {
        clearInterval(timekey);
        moveDown();
    }
}
// 下拐
function turnUp() {
    if (arraySnake[arraySnake.length - 1].className.split("-")[1] == arraySnake[arraySnake.length - 2].className.split("-")[1]) {
        clearInterval(timekey);
        moveUp();
    }
}
// 左拐
function turnLeft() {
    if (arraySnake[arraySnake.length - 1].className.split("-")[2] == arraySnake[arraySnake.length - 2].className.split("-")[2]) {
        clearInterval(timekey);
        moveLeft();
    }
}
// 右拐
function turnRight() {
    if (arraySnake[arraySnake.length - 1].className.split("-")[2] == arraySnake[arraySnake.length - 2].className.split("-")[2]) {
        clearInterval(timekey);
        moveRight();
    }
}
// 蛇吃食物
function eatFood() {
    var temp = food;
    if (arrayBox[food.className.split("-")[1]][food.className.split("-")[2]] == 0) {
        randomFood();
        addSnakeLength(temp);
    }
}
// 增加长度在蛇尾
function addSnakeLength(temp) {
    arraySnake.unshift(temp);
}

全程独自敲下来，敲了两个多小时，基本功能都实现了，由于没有参考任何东西，所以有很多很多需要优化的地方，点个赞吧

AN27Xy
关注
  • 23
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
原生JavaScript贪吃蛇小项目
07-08
使用原生JavaScript 写一个贪吃蛇小项目，帮你快速学习JavaScript相关的碰撞检测方法。
原生 JavaScript 实现像素贪吃蛇
12-31
《原生JavaScript实现像素贪吃蛇》是一款基于HTML、CSS和JavaScript技术的入门级编程练习。这个项目旨在帮助初学者理解和应用这些基础Web开发技术，同时体验游戏编程的乐趣。通过这个项目，我们可以深入学习...
＜mate name=“viewport“＞移动端设置详解
qq_41072930的博客
10-10 715
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 1.width=device-width //应用程序的宽度和屏幕的宽度是一样的 2.height=device-height //应用程序的高度和屏幕的高是一样的 3.initial-sc...
<meta name="viewport">移动端设置详解
hualala_32的博客
10-06 805
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"width = device-width:应用程序的宽度和屏幕的宽度是一样的 height = device-heig
使用meta标签的【viewport】控制在移动设备上的布局
精彩人生
02-10 1417
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大
meta name="viewport" content="width=device-width,initial-scale=1.0"理解
热门推荐
yiyueqinghui的博客
01-23 3万+
viewport的概念 viewport就是设备的屏幕上能用来显示我们的网页的那一块区域 content属性值 width:设备可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被显示时可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域...
html5开发之viewport使用
weixin_34378767的博客
08-30 1132
2019独角兽企业重金招聘Python工程师标准>>> ...
贪吃蛇 原生js
m0_72815229的博客
11-01 117
贪吃蛇 纯原生JS
原生JavaScript实现贪吃蛇游戏
01-18
本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 1.HTML部分，东西很少 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=...
贪吃蛇游戏 - 原生JavaScript实现
04-18
在这个项目中，我们将探讨如何使用原生JavaScript来实现一个网页版的贪吃蛇游戏。 首先，让我们了解JavaScript的基础知识。JavaScript是一种广泛用于Web开发的脚本语言，它在浏览器端运行，负责处理用户交互、动态...
原生Javascript贪吃蛇代码
12-29
在本主题中，我们将深入探讨如何使用原生JavaScript实现经典的贪吃蛇游戏。JavaScript作为Web开发中最常用的脚本语言，其灵活性和强大的功能使得开发者能够创建各种交互式应用，包括这款深受喜爱的游戏。 首先，...
关于HTML5的viewpoint用法
weixin_42636959的博客
03-05 864
viewport 语法介绍：     width 控制 viewport 的大小，pixel_value表示可以指定的一个值或者特殊的值，而device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height 和 width 相对应，指定高度。 target-densitydpi 一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 493
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
Electron学习与总结
song854601134的博客
08-12 183
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 416
注释很详细，直接上代码……
【Markdown】Markdown 中的语言简称
最新发布
EleganceJiaBao的博客
08-12 656
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
【Vue3】图片未加载成功前占位
菜就多练
08-08 347
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 465
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
JavaScript实现贪吃蛇教程
"JavaScript实战之贪吃蛇" 在本文档中，我们主要探讨的是如何使用JavaScript实现经典的电子游戏——贪吃蛇。贪吃蛇游戏是一种基于矩阵的简单游戏，玩家通过控制一个不断移动的蛇来捕食食物，每吃掉一个食物，蛇的...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值