码迷,mamicode.com
首页 > 编程语言 > 详细

javascript实现贪吃蛇小游戏

时间:2018-08-29 20:02:51      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:reset   bsp   out   resolve   pac   require   html   ref   结构   

源码地址:https://github.com/qmdx00/Snake ,请不要吝啬star。

首先画出UML类图:

技术分享图片

用es6的语法,创建项目结构:

技术分享图片

配置webpack:

const path = require(‘path‘)
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)

module.exports = {
    entry: ‘./src/index.js‘,
    output: {
        path: path.resolve(__dirname, ‘dist‘),
        filename: ‘bundle.js‘
    },
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: ‘babel-loader‘
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: ‘./index.html‘
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, ‘./release‘),
        open: true,
        port: 4000
    }
}

入口文件为index.js,构建生成目录为dist

配置启动脚本:package.json

{
  "name": "snake",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development",
    "build": "webpack --config ./webpack.dev.config.js --mode production"
  },
  "author": "yuanweimin",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

安装依赖后执行 npm run build

即可生成最终代码。具体代码请见github,喜欢的给个star哦。

 

javascript实现贪吃蛇小游戏

标签:reset   bsp   out   resolve   pac   require   html   ref   结构   

原文地址:https://www.cnblogs.com/qmdx00/p/9556338.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!