|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/modern-javascript-dom/
课程评论：没有评论
**JavaScript DOM 游戏入门教程：让网页动起来！** 本课程专为初学者设计，将带您深入了解 JavaScript 的文档对象模型（DOM），开启创建交互式和动态网页的神奇之旅。 **您将学到：** * **DOM 基础：** 理解 DOM 作为网页对象表示的本质，并学会用 JavaScript 修改它。 * **元素选择与操纵：** 掌握使用 `querySelector` 等方法选择单个或多个页面元素，并修改其文本内容。 * **样式与交互：** 学会使用 JavaScript 更新元素的颜色、背景色，并添加点击事件。 * **元素移动与动画：** 利用 `requestAnimationFrame` 和键盘事件，实现页面元素的平滑移动和键盘控制。 * **动态创建元素：** 使用 `createElement` 方法动态生成新元素并将其添加到页面中，实现元素随机生成和移动。 * **碰撞检测与计分：** 实现页面元素间的碰撞检测，为游戏增加计分功能，提升互动性。 * **游戏开发基础：** 构建一个基础的 JavaScript 游戏框架，为未来更复杂的项目奠定基础。 **课程特色：** * **实战项目：** 通过创建可玩的键盘控制游戏，将所学知识付诸实践。 * **丰富资源：** 提供源代码、分步 PDF 指南以及 Web 开发环境搭建的链接和资源。 * **经验丰富的讲师：** 由拥有 20 多年 Web 开发经验的导师授课，提供专业指导。 加入本课程，释放您的创造力，用 JavaScript 打造令人惊叹的动态网页和游戏！
JavaScript Explore what you can do with the Document Object Model making your web pages come to life!!!The DOM is an object-oriented representation of the web page, which can be modified with JavaScript to Create Interactive and Dynamic Web ContentSelect elements from the pageUpdate Elements on the PageApply Styling to the style attributeTrack user interactions with Click events and keyboard eventsMove and manipulate page elements with JavaScriptUpcoming lessons will show you how - to make you web pages come to lifeCreating a basic game project - where the player can move a page element using the keyboard. Also create new page elements - and automatically have new page elements added to the page when conditions are met. Creating a dynamic and interactive game that detects element collision and adds to the score. Move your element to hit the other elements on the page, score and see how new elements are created with a max number in from the code. Basic JavaScript Game structure that can be extended upon to build your own games and more.Source Code is included - Step by step PDF guide and more.Selection of page elements into JavaScript - select single or multiple Page elements with QuerySelectorCourse CoversWeb Dev Setup Coding IDE and Resources - links and resources to setup introduction to course content.JavaScript DOM Document Object Model Introduction to Selection JavaScript element selection and manipulation of the text content. Selection of page elements into JavaScript - select single or multiple Page elements with QuerySelectorElement Style Manipulation with JavaScript Update Color and Background Color - Update manipulate the Element Style properties and add click events with JavaScript Event Listeners. Create a mini project that updates the element background color when it is clicked.Update Element Position Using JavaScript - Move elements on the page update the element style left and top values with JavaScript. AnimationFrames with JavaScript and KeyBoard EventListeners Movement - Use of AnimationFrames to have smooth continuous movement of elements on the page. Adding keyboard key presses to move element according to keypress event listeners. Update element position with JavaScript.Create Element using JavaScript and Randomly Place within Page Container Div Make new elements with JavaScript - using document create Element method to dynamically generate elements and add them to the HTML page.Move element Randomly make clickable Make new elements clickable and randomly move on the page. Collision Detection with JavaScript elements Add options to check collision between page elements. Check top to bottom element dimensions and left to right comparing to detect if there is overlap. If overlap happens, track as a collision. Add the collision check to the JavaScript project checking for any collision between page elements.Scoring and Game Development with JavaScript Page Elements Adding scoring to the gameplay - create gameplay and allow the user to progress in the game. Game design and game concepts and how to apply it with JavaScript.Final Gameplay of JavaScript DOM project Source Code is includedTaught by an instructor with over 20 years of web development experience ready to help you learn more about JavaScript
