第13/90步《前端篇》第2章 编写一个简单的HTML5小游戏:打造游戏界面 第4课

简介: 今天学习《前端篇》第2章 编写一个简单的HTML5小游戏:打造游戏界面 第4课 绘制挡板,这节课我们开始练习几何绘制,完成一个基本的游戏元素——挡板的绘制。

image.png

今天学习《前端篇》第2章 编写一个简单的HTML5小游戏:打造游戏界面 第4课 绘制挡板,这节课我们开始练习几何绘制,完成一个基本的游戏元素——挡板的绘制。


学习目标


  • 在画布上绘制直线;
  • 拓展:JS的8个基本数据类型,如何作类型判断
  • 给画布添加背景
  • 加厚挡板;
  • 拓展:JS中的数值类型、布尔类型是如何进行类型转换的
  • 给挡板添加圆角、阴影效果
  • 使用路径填充和矩形绘制挡板
  • 如何使用颜色渐变对象和图像填充材质绘制挡板
  • 拓展:什么是区块作用域
  • 拓展:了解浮点数字的不精准性,警惕0.1 + 0.2 != 0.3
  • 拓展:如何批量声明变量、常量

主要知识点/技能点


  • Canvas 绘制中,使用 moveTo、lineTo 可以绘制直线,我们可以沿矩形的四边依次调用lineTo,达到绘制目的。

  • moveTo 是方法把路径移动到画布中的指定点,不创建线条,lineTo 是同时创建线条。
  • JS的数据类型是隐性的,赋值时是根据右值自动判断的,在声明变量或常量时并不需要显式描述。

  • JS共有 8 种基本数据类型。

  • 所有基本数据类型都可以用 typeof 进行类型判断,对于object类型,可以使用 instanceof 关键字判断具体的子类型,使用 toString 方法也可以判断;

  • 用构造函数判断类型

  • 渲染上下文对象的fill 方法可用于填充当前绘制的路径。

  • 渲染上下文对象的lineWidth 属性可以设置线条宽度。

  • 字符串转化为数值有 4 种转换方法

  • 字符串加任何数值(例如"" + 10)都会直接返回字符串

  • 在 JS 中,在类型转换方面最常用的是布尔转换。以下6 种情况转化为布尔值,结果都是false。
  • 两个感叹号(!!)会强制转化右值为布尔类型,if (!!options.user)比 if (options.user)更加严谨。
  • 渲染上下文对象的lineCap 属性,可用于设置线条末端线帽的样式。

  • 渲染上下文对象(RenderingContext)的shadowBlur、shadowColor 等属性可以设置阴影效果。

  • 我们可以组合使用moveTo 与 lineTo,在挡板的 4 个角坐标依次移动绘制矩形。

  • 使用渲染上下文对象的rect方法可以快速创建矩形

  • 一个 fillRect方法相当于beginPath、rect和fill三个方法的综合

  • 创建一个 LinearGradient 对象,赋值给渲染上下文对象的 fillStyle 属性即可实现线性颜色渐变绘制

  • 可以使用 createRadialGradient 方法创建放射状渐变对象,返回结果的对象类型仍然是CanvasGradient

  • createPattern 方法即可以创建一个在指定方向有重复特征的木质填充对象

  • ES6 中引入了两个新关键字:let 与 const,并且规定花括号可以创建区块作用域。在区块作用域内,let、const 声明的变量、常量,只有在该区块内(即花括号内)有效,在区块外不能访问;同时在区块外已经声明的标识符,在区块内仍然可以再次声明。

  • 凡声明变量,一律推荐使用 let;如果变量在声明之后不需要改变,就用 const 关键字声明为常量,放开的权限越小,潜在的软件风险越小

  • JS中的数字类型是遵循IEEE 754浮点数标准实现的,这是标准本身存在的问题

  • 理想情况下在函数内部或文件顶部声明变量和常量时,至多使用两次 let或const 关键字即可。

实践疑难点


  • 在画布绘制中,路径是必须闭合的,但凡带填充的路径绘制,必起始于 beginPath,不然 fill 方法将可能发生填充错误。

  • 原因是图片加载是异步的,如果在创建 CanvasPattern 对象时图片还没有加载完成,此时创建的 CanvasPattern 是无效的。因为JS是动态语言,fillStyle属性不知道我们是想传一个错误的颜色字符串,还是想传一个企图正确的CanvasPattern 对象,所以此时程序并不会报错,这个 Bug 很难察觉。

小结


这节课主要实现了右挡板的绘制,学习了属性strokeStyle、lineWidth、lineCap及方法fill、fillRect的使用,练习了放射状颜色渐变对象和材质填充对象的使用,并在实践中了解了JS的基本数据类型及如何作类型判断等语法,还有什么是区域作用域,以及如何批量声明变量常量等。


目录
相关文章
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
43 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
15天前
|
JSON 前端开发 数据可视化
前端开发者狂喜!30K star开源组件库,界面美观度/开发速度双碾压!
嗨,大家好,我是小华同学。Layui 是一款开源前端 UI 组件库,具有极简设计、强大功能和卓越性能,支持布局、表单、表格、弹层等六大模块,组件高度可定制。它无需复杂构建工具,直接面向浏览器开发,极大提升开发效率与界面美观度。适合新手和老手,快来试试吧!
|
2月前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
96 25
|
3月前
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码,为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑,还具备丰富的界面设计和用户交互功能,使得玩家能够轻松上手并享受扫雷带来的乐趣。
142 22
|
3月前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
4月前
|
移动开发 编解码 前端开发
摸鱼必备-80款在线HTML小游戏
本文推荐了80款精彩的HTML5在线小游戏,涵盖益智、冒险、射击、体育等多种类型,适合各年龄段玩家。无需下载安装,随时随地畅玩。地址:[https://game.share888.top/](https://game.share888.top/)
1065 7
摸鱼必备-80款在线HTML小游戏
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
74 6
|
4月前
|
移动开发 HTML5
HTML5熊猫弹跳手机小游戏源码
一款html5手机端小游戏源码,熊猫跳跃小游戏源码下载。熊猫脚底有弹簧,长按变化力度跳跃,计分游戏,html5手机熊猫也疯狂小游戏源代码。
82 5
|
4月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
136 0
html5+three.js公路开车小游戏源码
|
4月前
|
前端开发 API
前端界面生成PDF并导出下载
【10月更文挑战第21天】利用合适的第三方库,你可以在前端轻松实现界面生成 PDF 并导出下载的功能,为用户提供更方便的文档分享和保存方式。你还可以根据具体的需求进一步优化和定制生成的 PDF 文件,以满足不同的业务场景要求。

热门文章

最新文章