# es6 **Repository Path**: hrbu2024/es6 ## Basic Information - **Project Name**: es6 - **Description**: es6 学习 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2026-08-31 - **Last Updated**: 2026-09-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # ES6 ECMAScript Javascript VbScript [01.ES6.0核心技术 (yuque.com)](https://www.yuque.com/donghua-nhdx0/abx4x1/uo3vwesl5evxf5sb) # 工具的安装 ![image-20260831112049546](assets/image-20260831112049546.png) ![image-20260831112211186](assets/image-20260831112211186.png) ### 设置主题 ![image-20260831112750081](assets/image-20260831112750081.png) ## 演示前端代码 创建一个文件夹叫ES6 空白位置右键使用Vscode打开 ![image-20260831114817305](assets/image-20260831114817305.png) 新建一个html html:5 ![image-20260831113005079](assets/image-20260831113005079.png) ### CTRL + 滚轮可以放大 缩小文字 ![image-20260831113100004](assets/image-20260831113100004.png) ![image-20260831113126532](assets/image-20260831113126532.png) ## 安装开发服务器 ![image-20260831113310768](assets/image-20260831113310768.png) ### 在服务区中运行 ![image-20260831113520427](assets/image-20260831113520427.png) # 1 变量 运行环境在控制台 ![image-20260831134734943](assets/image-20260831134734943.png) ## Code Runner插件， 需要安装Node工具 ![image-20260831144657773](assets/image-20260831144657773.png) ![image-20260831144740699](assets/image-20260831144740699.png) 设置安装目录d:\app\nodejs\ ![image-20260831144803998](assets/image-20260831144803998.png) ![image-20260831144810053](assets/image-20260831144810053.png) 可以脱离html 直接执行 js ![image-20260831143829977](assets/image-20260831143829977.png) 使用右键或者其他方式运行程序（Javascript） ![image-20260831143902624](assets/image-20260831143902624.png) 设置输出，清空上一次的内容 ![image-20260831160252797](assets/image-20260831160252797.png) 自动保存 ![image-20260831162410103](assets/image-20260831162410103.png) const声明一个只读的常量。一旦声明，常量的值就不能改变。 ```javascript const PI = 3.1415926; PI = 3; //TypeError: Assignment to constant variable. ``` # 2.方法 # 3 数组 # 4.模板字符串 # 5.练习贪吃蛇 ## Deepseek贪吃蛇 ```html 贪吃蛇 - Canvas Class 实现 ``` ## Canvas API ### 绘制图形 - 文字 - 扇形 - 原型 - 矩形 - 绘制线条 参考资料：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API ## Demo ### 矩形 有一个canvas标签的画布 ```html Document ``` ### 矩形 ![image-20260901133753029](assets/image-20260901133753029.png) ### 网格 ```html Document ``` ![image-20260901115327329](assets/image-20260901115327329.png) ### 绘制圆形糖果 弧形 ctx.arc( x,y ,r , 开始弧度 ， 结束的弧度 ,true/false 是否逆时针旋转 ) ````html Document ```` ### 绘制文字 ```html Document ``` ## 案例开发 - 使用canvas绘制 背景、网格 - 绘制糖果 - 随机绘制糖果 - 绘制蛇 - 绘制起始的位置 - 定时任务，让身体移动 - 判断蛇是否跟糖果重叠 - 身子+1 - 随机生成位置 - 分数计算 - 边界判断 - 键盘事件