1. 首页
  2. 分类
  3. javascript
【前端｜JS实战】使用JS来实现属于自己的贪吃蛇游戏！
System
2024-08-07
所有,javascript

下面是一个简单的贪吃蛇游戏的实现示例，使用JavaScript和HTML。这个示例提供了游戏的核心功能，包括蛇的移动、食物生成和碰撞检测。




<!DOCTYPE html>
<html>
<head>
    <title>贪吃蛇游戏</title>
    <style>
        .game-container {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
        .snake {
            width: 10px;
            height: 10px;
            background-color: #000;
            position: absolute;
        }
        .food {
            width: 10px;
            height: 10px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="game-container" id="gameContainer"></div>
    <script>
        const gameContainer = document.getElementById('gameContainer');
        const snake = [{ x: 10, y: 10 }];
        let food = { x: 30, y: 30 };
        let dx = 10;
        let dy = 0;
        let interval = 200;
 
        function createEl(className, x, y) {
            const el = document.createElement('div');
            el.className = className;
            el.style.left = `${x}px`;
            el.style.top = `${y}px`;
            gameContainer.appendChild(el);
            return el;
        }
 
        function createFood() {
            food = { x: Math.floor(Math.random() * 20 + 1) * 10, y: Math.floor(Math.random() * 20 + 1) * 10 };
            createEl('food', food.x, food.y);
        }
 
        function moveSnake() {
            const head = { x: snake[0].x + dx, y: snake[0].y + dy };
            snake.unshift(head);
 
            const el = document.querySelector('.snake');
            if (el) {
                el.style.left = `${head.x}px`;
                el.style.top = `${head.y}px`;
            } else {
                createEl('snake', head.x, head.y);
            }
 
            if (food.x === head.x && food.y === head.y) {
                createFood();
            } else {
                snake.pop();
                const tail = document.querySelector('.snake:last-child');
                gameContainer.removeChild(tail);
            }
        }
 
        createFood();
        setInterval(moveSnake, interval);
 
        document.addEventListener('keydown', (e) => {
            switch (e.key) {
                case 'ArrowUp':
                    if (dy !== 10) {
                        dy = -10;
- 阅读更多 -
js常用数组方法
System
2024-08-07
所有,javascript

常用的JavaScript数组方法包括：

  1. map(): 创建一个新数组，其元素是原数组元素经过提供函数处理后的结果。
  2. filter(): 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
  3. reduce(): 对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值。
  4. forEach(): 对数组的每个元素执行一次提供的函数。
  5. push() 和 pop(): 添加和删除数组末尾的元素。
  6. shift() 和 unshift(): 删除数组开头的元素，并添加新元素。
  7. sort(): 对数组的元素进行排序。
  8. concat(): 合并两个或多个数组。
  9. slice(): 选取数组的一部分，并返回一个新数组。
  10. splice(): 添加或删除数组中的元素。

以下是这些方法的简单示例代码：




// map()
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出: [2, 4, 6]
 
// filter()
const filtered = numbers.filter(num => num > 2);
console.log(filtered); // 输出: [3]
 
// reduce()
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 输出: 6
 
// forEach()
numbers.forEach(num => console.log(num)); // 输出: 1, 2, 3
 
// push() and pop()
numbers.push(4);
console.log(numbers.pop()); // 输出: 4
 
// shift() and unshift()
numbers.unshift(0);
console.log(numbers.shift()); // 输出: 0
 
// sort()
numbers.sort((a, b) => a - b);
console.log(numbers); // 输出: [1, 2, 3]
 
// concat()
const concatenated = numbers.concat([4, 5]);
console.log(concatenated); // 输出: [1, 2, 3, 4, 5]
 
// slice()
const sliced = numbers.slice(1, 3);
console.log(sliced); // 输出: [2, 3]
 
// splice()
numbers.splice(1, 1, 4); // 从索引1开始，删除1个元素，然后插入4
console.log(numbers); // 输出: [1, 4, 3]
- 阅读更多 -
Three.js-实现加载图片并旋转
System
2024-08-07
所有,javascript

在Three.js中，要实现加载图片并旋转，你可以使用THREE.TextureLoader来加载图片，并创建一个THREE.Mesh使用THREE.PlaneGeometry和THREE.MeshBasicMaterial，其中THREE.MeshBasicMaterial使用了加载的纹理。然后，你可以通过设置mesh.rotation的属性来旋转网格。

以下是一个简单的例子：




// 初始化Three.js场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 加载图片
const loader = new THREE.TextureLoader();
loader.load('path/to/your/image.jpg', function(texture) {
    // 创建一个平面作为网格
    const geometry = new THREE.PlaneGeometry(1, 1);
    const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
 
    // 旋转网格
    mesh.rotation.x = Math.PI / 4; // 旋转x轴，使其倾斜
 
    // 渲染循环
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        mesh.rotation.y += 0.01; // 不断旋转
    }
    animate();
});
 
camera.position.z = 5;

在这个例子中，我们首先设置了Three.js的场景、相机和渲染器。然后，我们使用THREE.TextureLoader加载图片，在加载完成后，创建一个网格，并将该网格添加到场景中。我们还设置了网格的旋转属性，使其沿着y轴旋转。最后，我们启动了一个渲染循环，不断地更新网格的旋转。

- 阅读更多 -
vue2 使用pdf.js 实现pdf预览，并可复制文本
System
2024-08-07
所有,javascript



<template>
  <div>
    <pdf
      :src="pdfSrc"
      v-for="pageNumber in numPages"
      :key="pageNumber"
      :page="pageNumber"
      @num-pages="numPages = $event"
    ></pdf>
    <button @click="copyPdfText">复制PDF文本</button>
  </div>
</template>
 
<script>
import pdf from 'vue-pdf'
 
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfSrc: 'path/to/your/pdf/file.pdf',
      numPages: 0
    }
  },
  methods: {
    copyPdfText() {
      // 这里需要使用PDF.js的API来获取PDF文本内容
      // 假设你已经有了一个方法来获取PDF文本，这里是一个示例方法
      this.getPdfText().then(text => {
        navigator.clipboard.writeText(text).then(() => {
          console.log('PDF文本已复制到剪贴板');
        }).catch(err => {
          console.error('复制到剪贴板时发生错误:', err);
        });
      }).catch(err => {
        console.error('获取PDF文本时发生错误:', err);
      });
    },
    getPdfText() {
      // 这个方法需要使用PDF.js的API来实现，返回一个Promise
      // 这里只是示例，实际的实现需要根据PDF.js的API来编写
      // 假设你已经有了一个方法来获取PDF文本，这里是一个示例返回Promise
      return new Promise((resolve, reject) => {
        // 假设你已经有了pdfjsLib对象，并且已经加载了PDF文档
        const loadingTask = pdfjsLib.getDocument('path/to/your/pdf/file.pdf');
        loadingTask.promise.then(pdf => {
          const text = ''; // 这里应该是获取到PDF文档的文本内容
          resolve(text);
        }).catch(err => {
          reject(err);
        });
      });
    }
  }
}
</script>

在这个代码示例中，我们使用了vue-pdf组件来渲染PDF文档，并通过@num-pages来获取PDF的总页数。我们还添加了一个按钮，当点击按钮时，会触发copyPdfText方法，该方法使用navigator.clipboard.writeText()方法将PDF文本复制到剪贴板。这里假设你已经有了获取PDF文本的方法，这个方法需要使用PDF.js的API来实现，返回一个Promise。实际的实现需要根据PDF.js的API来编写。

- 阅读更多 -
JavaScript进阶：JS 垃圾回收机制_vue gc
System
2024-08-07
所有,javascript

JavaScript中的垃圾收集（GC）是自动管理内存的一种方式，它会自动释放不再使用的变量所占用的内存。Vue.js 框架并没有特别的垃圾收集机制，它使用的是JavaScript的标准垃圾收集机制。

在Vue.js中，组件被视为一种可以被垃圾收集的资源。当组件不再被使用时，它的事件监听器和子组件等资源会被自动清理。

以下是一个简单的例子，展示了Vue组件被销毁后，其所占用的内存资源将会被JavaScript的垃圾收集器回收：




<template>
  <div>
    <button @click="destroyComponent">Destroy Component</button>
    <my-component v-if="showComponent"></my-component>
  </div>
</template>
 
<script>
import MyComponent from './MyComponent.vue';
 
export default {
  components: {
    MyComponent
  },
  data() {
    return {
      showComponent: true
    };
  },
  methods: {
    destroyComponent() {
      this.showComponent = false;
      // 这里可以手动调用垃圾收集，但实际上不需要这么做
      // 因为Vue会在组件销毁时自动处理垃圾收集
      // 这里只是为了演示，通常不需要手动干预
      // global.gc(); // 调用JavaScript的手动垃圾收集函数
    }
  }
};
</script>

在这个例子中，MyComponent 组件被包含在v-if指令中，当用户点击按钮时，destroyComponent 方法被触发，showComponent 的值被设置为false，这导致MyComponent 组件被销毁。Vue.js 会自动处理该组件的垃圾收集。

需要注意的是，在生产环境中，通常不需要手动干预垃圾收集器，因为JavaScript引擎会自动管理内存。然而，在某些情况下，可以使用全局函数global.gc()来强制进行垃圾收集，但这主要用于调试目的，不应该在生产环境中频繁使用。

- 阅读更多 -
高德地图JS 离线部署方案，实现插件离线加载，自定义添加插件如RangingTool、ToolBar、Scale等
System
2024-08-07
所有,javascript

要在不连接互联网的情况下使用高德地图的JS API插件，您需要先下载这些插件的JS文件，然后在您的应用中引用这些本地文件。以下是一个基本的步骤和示例代码：

  1. 下载高德地图JS API库和所需插件的JS文件。
  2. 将这些文件放在本地服务器上或您的静态资源目录中。
  3. 在HTML文件中引用本地的JS文件而不是线上的URL。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>高德地图离线部署</title>
    <!-- 引用本地的高德地图API库 -->
    <script src="path/to/your/amap-js-v1.3.0.js"></script>
    <!-- 引用本地的插件JS文件 -->
    <script src="path/to/your/RangingTool.js"></script>
    <script src="path/to/your/ToolBar.js"></script>
</head>
<body>
    <div id="container" style="width:600px;height:400px;"></div> <!-- 地图容器 -->
    <script>
        // 初始化地图
        var map = new AMap.Map('container', {
            zoom: 11, // 缩放级别
            center: [116.397428, 39.90923] // 中心点坐标
        });
 
        // 使用离线的插件
        map.addControl(new AMap.RangingTool());
        AMap.plugin(['AMap.ToolBar'], function() {
            map.addControl(new AMap.ToolBar());
        });
    </script>
</body>
</html>

在这个示例中，请将path/to/your/替换为您本地文件的实际路径。您需要确保所有必要的JS文件都已经下载并且放置在正确的位置。这样，即使在没有网络的环境下，高德地图的JS API也可以加载并使用您的插件。

- 阅读更多 -
js实现一键任意html元素生成截图功能
System
2024-08-07
所有,javascript

要实现一键生成任意HTML元素截图的功能，可以使用HTML2Canvas库来将HTML元素渲染成画布（canvas），然后将画布保存为图片。以下是实现这一功能的示例代码：

首先，需要引入HTML2Canvas库：




<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

然后，实现一个函数来处理截图的逻辑：




function takeScreenshot(element, filename = 'screenshot.png') {
  html2canvas(element).then(canvas => {
    // 创建一个图片元素
    let img = canvas.toDataURL('image/png');
    let a = document.createElement('a');
    a.href = img;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  });
}

最后，为你想要生成截图的HTML元素添加一个点击事件，调用上面定义的函数：




<button onclick="takeScreenshot(document.getElementById('elementId'), 'custom_name.png')">生成截图</button>

在这个例子中，当按钮被点击时，takeScreenshot函数会被调用，并且传入了一个元素ID和一个自定义文件名。这个函数会将指定元素的截图下载为PNG文件。

- 阅读更多 -
华为OD机试 - 最长子字符串的长度（Java & JS & Python & C & C++）
System
2024-08-07
所有,javascript

题目描述：

给定两个字符串 A 和 B，现要从 A 中删除特定数量的字符，使得结果包含 B 中所有的字符。请找出最小需要删除的字符数量。

输入描述：

输入包含多组测试数据。每组测试数据共两行，第一行代表字符串 A，第二行代表字符串 B。

输出描述：

对于每组测试数据，输出最小需要删除的字符数量。

示例：

输入：

abcde

abcd

输出：

1

解决方案：

这是一个经典的动态规划问题，可以通过维护一个数组来记录到当前位置为止，需要删除的最小字符数。

以下是使用不同语言实现的解决方案：

Java 代码：




import java.util.Scanner;
 
public class Main {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        while (scanner.hasNextLine()) {
            String A = scanner.nextLine();
            String B = scanner.nextLine();
            System.out.println(minDeletion(A, B));
        }
        scanner.close();
    }
 
    private static int minDeletion(String A, String B) {
        int m = A.length();
        int n = B.length();
        int[][] dp = new int[m + 1][n + 1];
 
        for (int i = 0; i <= m; i++) {
            dp[i][0] = 0;
        }
        for (int j = 0; j <= n; j++) {
            dp[0][j] = 0;
        }
 
        for (int i = 1; i <= m; i++) {
            for (int j = 1; j <= n; j++) {
                if (A.charAt(i - 1) == B.charAt(j - 1)) {
                    dp[i][j] = dp[i - 1][j - 1] + 1;
                } else {
                    dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
                }
            }
        }
        return m - dp[m][n];
    }
}

JavaScript 代码：




process.stdin.setEncoding('utf8');
process.stdin.on('data', function (chunk) {
    const lines = chunk.trim().split('\n');
    const A = lines[0];
    const B = lines[1];
    process.stdout.write(minDeletion(A, B) + '\n');
});
 
function minDeletion(A, B) {
    let m = A.length;
    let n = B.length;
    let dp = new Array(m + 1).fill(0).map(() => new Array(n + 1).fill(0));
 
    for (let i = 0; i <= m; i++) {
        dp[i][0] = 0;
    }
    for (let j = 0; j <= n; j++) {
        dp[0][j] = 0;
    }
 
    for (let i = 1; i <= m; i++) {
        for (let j = 1; j <= n; j++) {
            if (A[i - 1] === B[j - 1]) {
                dp[i][j] = dp[i - 1][j - 1] + 1;
            } else {
                dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
            }
        }
    }
    return m - dp[m][n];
}

Python 代码：




import sys
 
def minDe
- 阅读更多 -
只使用JS怎么给静态页面网站添加站内全局搜索功能？
System
2024-08-07
所有,javascript

要给静态网站添加站内全局搜索功能，你可以使用JavaScript来监听输入，并在用户输入时更新页面上的搜索结果。以下是一个简单的实现示例：

  1. 添加一个搜索输入框和显示搜索结果的容器。
  2. 使用JavaScript来监听输入并执行搜索。
  3. 使用JavaScript的document.querySelector和document.getElementById方法来定位DOM元素并更新显示结果。

HTML 示例:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Static Site Search</title>
</head>
<body>
    <input type="text" id="searchInput" placeholder="Search...">
    <div id="searchResults">
        <!-- Search results will be displayed here -->
    </div>
 
    <script src="search.js"></script>
</body>
</html>

JavaScript 示例 (search.js):




document.getElementById('searchInput').addEventListener('input', function() {
    var input = this.value.toLowerCase();
    var searchItems = document.querySelectorAll('.searchable');
    var searchResults = document.getElementById('searchResults');
 
    // Reset results
    searchResults.innerHTML = '';
 
    searchItems.forEach(function(item) {
        var title = item.dataset.title.toLowerCase();
        var content = item.dataset.content.toLowerCase();
        var match = title.indexOf(input) > -1 || content.indexOf(input) > -1;
 
        if (match) {
            var result = document.createElement('div');
            result.textContent = item.dataset.title;
            searchResults.appendChild(result);
        }
    });
});

在这个例子中，我们假设你的静态页面上有一些元素带有searchable类，并且它们有data-title和data-content属性来存储各自的标题和内容。这些数据可以用来与用户的搜索词进行匹配。

请根据你的页面结构和需求调整上述代码。如果你需要更复杂的搜索功能，可能需要使用服务器端的脚本来生成搜索索引并提供搜索结果。

- 阅读更多 -
基于Vue+NodeJS的网店采购管理系统的设计与实现论文
System
2024-08-07
所有,javascript

由于篇幅限制，我将提供一个简化版的网店采购管理系统的核心功能代码示例。




// Node.js后端代码示例：使用Express框架创建API路由
const express = require('express');
const router = express.Router();
 
// 假设已经有了数据库模型和中间件等
const { Item, Category } = require('../models');
const { requireAdmin, requireToken } = require('./middleware');
 
// 获取所有分类
router.get('/categories', async (req, res, next) => {
  try {
    const categories = await Category.findAll();
    res.json(categories);
  } catch (err) {
    next(err);
  }
});
 
// 创建新分类
router.post('/categories', requireAdmin, async (req, res, next) => {
  try {
    const newCategory = await Category.create(req.body);
    res.json(newCategory);
  } catch (err) {
    next(err);
  }
});
 
// 获取所有物品
router.get('/items', async (req, res, next) => {
  try {
    const items = await Item.findAll();
    res.json(items);
  } catch (err) {
    next(err);
  }
});
 
// 创建新物品
router.post('/items', requireAdmin, async (req, res, next) => {
  try {
    const newItem = await Item.create(req.body);
    res.json(newItem);
  } catch (err) {
    next(err);
  }
});
 
module.exports = router;

在这个示例中，我们定义了几个API路由来处理分类和物品的基本操作。这些操作需要管理员权限，因此我们使用了一个自定义中间件requireAdmin来确保只有管理员才能进行这些操作。这些操作也会返回JSON格式的响应。

这个示例展示了如何使用Express框架和Sequelize ORM创建RESTful API，并且如何在实际应用中结合JWT进行身份验证。这是一个基本的网店采购管理系统后端的示范，展示了如何通过Node.js和Express构建可扩展和安全的后端服务。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号