[Html5源码] HTML5如何编程游戏How to Program Games: Tile Classics in JS for HTML5 Canvas

[复制链接]

7271

主题

7393

帖子

8508

积分

管理员

阅读权限
255

Rank: 22Rank: 22Rank: 22Rank: 22Rank: 22Rank: 22

UID
27405
在线时间
1168 小时
活力值
38449 点
推荐注册人数
777 人
wang 发表于 2018-1-3 09:21:24
351 4


HTML5如何编程游戏How to Program Games: Tile Classics in JS for HTML5 CanvasCourse Description

By taking this new course you'll program several classic game types that all incorporate 2D tile-based worlds. You'll code in JavaScript for HTML5 Canvas, so a text editor and ordinary web browser are all you need (an art program can be handy for a few sections but is not required). I've attached my code for each step so you'll never be stuck. At the end you'll learn even more ways to apply what you've learned. Also by completing the course you'll get a PDF of my complete 500-page textbook on game development: Hands-On Intro to Game Programming. The book contains over 100 exercises, a couple of more game types, and additional material with more detail about the projects.

What are the requirements?

Any plain text editor like Notepad will do, however one which supports features for programmers such as multiple file tabs, code highlighting, line numbers, and smart/auto-indentation can be handy for later phases as the code grows in length (Notepad++ is free for Windows, TextWrangler for Mac, or Sublime Text 2 which I use has a fully functional free trial for either).
Any common web browser should work fine, although I use Google Chrome (free) so you may prefer that one just to see on your side exactly how it shows up in the videos.
To follow along the few steps for drawing art you'll need a program that lets you draw and save images with transparency. I use a slightly older version of Photoshop, although free alternatives exist and the steps are similar. I also attach all art files that I create, so if you prefer to only focus on the coding steps you can download the images that I create in the videos.

What am I going to get from this course?

Over 149 lectures and 14 hours of content!
Create, display, and play with a 2D tile world that supports optimized collision (a central concept for generations of games in a variety of genres!).
Program games in JavaScript for HTML5 Canvas without using any external libraries or plug-ins.
Create, load, display, and rotate image graphics in games.
Break game code into multiple files to better manage large projects.
Define a class and use it to create multiple instances of gameplay objects in unique positions (note: only using the very basic first concept of object-oriented programming, it doesn't dive deep into that rabbit hole).
Handle mouse input for a one-player game, or keyboard controls for both one and two-player games.
Implement basic item pick-ups (keys) and trigger their usage upon collision (open doors).
Develop and adapt gameplay for basic platformer movement, digital board/strategy games, simple matrix formations for retro arcade-style enemies, and worlds larger than the screen viewed by scrolling camera.
Apply simple trigonometry calls to move game objects at arbitrary angles.
Implement basic loading screen functionality in HTML5.

What is the target audience?

Anyone who wants to learn practical skills to program their own games at home.
People who may already be familiar with programming concepts but are new to applying that knowledge to making real-time computer games.
Creators who have only ever tried drag-and-drop tools but are interested in learning more about how to make games by programming for an deeper level of control over the details.
Developers interested in getting practice with a more traditional "code only" approach to core gameplay programming before moving on to major engines and tools (which are not covered in this course) like Unity or Unreal.
People looking for a technical game design foundation based in indie-style games or classic gameplay as a starting point.
New developers who completed the free course "Code Your First Game: Arcade Classic in JavaScript on Canvas" and are looking to further build upon their game development skills in JavaScript on HTML5 Canvas.
Please note that advanced topics like object-oriented programming are only very briefly touched upon - software engineering patterns are generally outside the scope of this course.
课程描述
通过这门新课程,你将规划几个经典的游戏类型,它们都包含了基于二维瓦片的世界。您将用JavaScript来编写HTML5画布,因此您只需要一个文本编辑器和普通Web浏览器(一个艺术程序可以方便地使用几个部分,但不需要)。我已经为每一步附上了我的代码,这样你就不会被卡住了。最后,你会学到更多的方法来应用你所学到的东西。此外,通过完成课程,你会得到一个PDF的完整的500页的教科书上的游戏开发:动手介绍游戏编程。这本书包含了100多个练习,两个以上的游戏类型,以及关于项目的更多细节的附加材料。
有什么要求?
任何文本编辑器如记事本就行了,然而一个支持程序员如多文件标签,功能代码高亮,行号和智能/自动缩进可以方便后期的代码长度增长(Notepad++是免费的Windows,Mac或TextWrangler,Sublime Text 2我使用已经是一个全功能的免费试用)。
任何普通的Web浏览器都应该很好用,虽然我使用谷歌浏览器(免费),所以你可能只喜欢在你身边看到它在视频中显示的样子。
沿着绘画艺术的几个步骤,你需要一个程序,让您绘制和保存图像的透明度。我用一个稍微大一点的版本的PS图象处理软件,虽然免费的选择和步骤都是类似的。我还附上我创建的所有艺术文件,所以如果您只想专注于编码步骤,您可以下载我在视频中创建的图像。
我从这门课中学到什么?
超过149个讲座和14小时的内容!
创建、显示和播放一个支持优化碰撞的2D瓦片世界(一个几代游戏的中心概念!)。
不使用任何外部库或插件的HTML5画布JavaScript编程游戏。
在游戏中创建、加载、显示和旋转图像图形。
将游戏代码分成多个文件,以更好地管理大型项目。
定义一个类,并用它来创建独特位置的游戏对象的多个实例(注意:只使用非常基本的面向对象编程的第一个概念,它不会深入到那个兔子洞)。
处理一个单人游戏的鼠标输入,或者一个和两个玩家游戏的键盘控制。
执行基本项目拾取(键)并在碰撞时触发它们的使用(打开门)。
发展和适应基础平台的运动游戏,数字板/战略游戏,复古的街机风格的敌人简单的矩阵形式,并通过摄像机观察世界大于滚动屏幕。
应用简单三角调用将游戏物体移动到任意角度。
在HTML5中实现基本的加载屏幕功能。
目标受众是什么?
任何想学习实用技能在家里自己编程的人。
可能已经熟悉编程概念的人,但将这些知识应用到实时计算机游戏中是很新的。
那些曾经尝试过拖放工具的创造者们,他们更感兴趣的是学习如何通过编程来进行游戏,以便对细节进行更深层次的控制。
开发者倾向于在转向主要引擎和工具之前采用更传统的“只有代码”的方法来练习,而在本课程中还没有涉及到这一点。
人们正在寻找一个以独立风格游戏或经典游戏为起点的技术游戏设计基础。
新的开发者完成了免费课程“编码你的第一个游戏:在JavaScript的经典街机在画布上”,并期待进一步建立在他们的游戏开发技能在JavaScript的HTML5画布上。
请注意,像面向对象编程这样的高级主题只是非常简单地涉及到——软件工程模式通常不在本课程的范围之内。

推广帖子奖励=推广值=排行榜:
!attachdown!

!attachdownreg!

!attachdownlogin!

!attachname!: Udemy - How to Program Games Tile Classics in JS for HTML5 Canvas.rar 
!attachdownloads!:0 !attachsize!:34.05 KB  !attachprice!:1 推广值 [充推广值]
[开通VIP特权]   无视推广值,直接免费下载   [或者点上面推广连接可免费赚推广值]

c10149568 发表于 2018-1-5 01:33:40

支持下!
llmm951446 发表于 2018-10-14 21:41:20
支持
云的踪迹 发表于 2018-11-2 00:10:20

支持
云的踪迹 发表于 2018-11-17 12:20:07


支持
*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

CG侠游戏资源平台简介

CG侠(Cgxia.Com)是专业cg论坛CG资源网平台,CG侠提供大量的免费游戏资源和CG资源下载。包含:unity3d资源、UDK虚幻引擎资源、cocos2d资源、unity3d插件、游戏源码、app源码、html5游戏源码、游戏特效、CG原画插画、CG贴图库、CG模型、游戏模型、成套手游页游美术资源等CG资源以及VR视频、VR游戏等VR资源下载,是国内专业且免费的游戏CG资源平台!

QQ|手机版|小黑屋|联系管理员|CG ( 赣ICP备06005507号-5 ) 每日免费摇推广值(天天摇天天送)

Powered by CG侠游戏资源网 X3.2  © 2015-2018 Unity3d资源  Unity3d插件  Unity3d源码  青木南天文化传媒  CG侠 Cgxia.Com  ICP证:赣ICP备06005507号-5

返回顶部 返回列表