《推箱子小游戏》

最新推荐文章于 2021-05-30 20:17:03 发布

勤奋的宇威

最新推荐文章于 2021-05-30 20:17:03 发布

阅读量302

点赞数

分类专栏：模块化文章标签： web js html

本文链接：https://blog.csdn.net/weixin_45080852/article/details/104150582

版权

这篇博客介绍了一个利用HTML、JavaScript实现的推箱子小游戏。主要包括五个部分：index.html作为主页面，src/module下的index.js是入口文件，map.js存储地图数据，ui.js负责界面渲染，play.js和game.js则分别处理人物移动和游戏初始化及事件处理。

摘要由CSDN通过智能技术生成

文件目录：

index.html
src>assets>inage
src>module

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./src/assets/index.css">
</head>
<body>
    <div id="game">
       
    </div>
    <script src="./src/module/index.js" type="module"></script>
</body>
</html>

module>index.js入口文件

import './game.js'; // 将game中的代码执行一遍！

module>map.js地图数据

//仅用于记录地图中的内容（箱子、玩家、墙、空白）

export const SPACE = 0;
export const PLAYER = 1;
export const WALL = 2;
export const BOX = 3;


/**
 * 0. 空白
 * 1. 玩家
 * 2. 墙
 * 3. 箱子
 */
export const content = [
    [0, 0, 2, 2, 2, 2, 2, 0, 0],
    [0, 0, 2, 0, 1, 0, 2, 0, 0],
    [0, 0, 2, 0, 3, 0, 2, 0, 0],
    [2, 2, 2, 0, 0, 0, 2, 2, 2],
    [2, 0, 0, 0, 3, 0, 0, 0, 2],
    [2, 0, 3, 3, 3, 3, 3, 0, 2