妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 5633|回复: 5

棍子英雄——JS小游戏开发的魅力

[复制链接]
前台-小仙 发表于 2016-6-22 15:40:45 | 显示全部楼层 |阅读模式
你还在犹豫:实战项目的题材吗?
你还在纠结:零散的知识点要如何归整吗?

本期为大家呈现:《JS版棍子英雄小游戏》——带你领略前端游戏开发的魅力。

11.jpg

*借用真实游戏配图,纯属为了好看~~ ^_^


游戏说明:
1、当棍子的长度落在右边块的左侧到右侧之间,角色向前进,游戏继续;
2、当棍子的长度没有到达右边块的左侧,让角色向前走,走到棍子的末端的时候角色掉下,游戏结束;
3、棍子的长度超出右边块,让角色往前走,超过范围,角色掉下,游戏结束;

——在具体JS实现中,究竟该如何判断?怎么实现那些功能呢?
——那些 编程思路流程控制 思维逻辑 要怎么去训练?
以上问题,《JS版棍子英雄小游戏》视频教程,带你一探究竟!

游戏制作思路:
  1. 棍子的长度 num增加
  2.         num 要在一定范围之间(左边块左侧-右边块左侧)~(左边块的左侧-右边块的右侧)才能继续游戏        
  3.                 游戏继续:从初始位置移动到右边块的左侧的位置(人物移动)
  4.                         整个游戏内容往左边移动一定距离(人物移动的长度)
  5.                         要在右侧生成下一个块的位置(随机位置)
  6.                         得分+1

  7.                 游戏失败:角色从初始位置移动到棍子长度结束的位置,让角色掉落下来
  8.                         显示得分
复制代码


完成游戏所需的知识点:
  1. 定时器
  2. 随机数范围的生成
  3. transition
  4. transitionend
  5. transform rotate
复制代码

本次的游戏视频教程的更新如下:
14.png


第二次更新的内容:
2.png

3.png

链接:http://pan.baidu.com/s/1kUXBwX5

密码:kl5s





还不是VIP会员?想随时收到更多妙味VIP视频课程???

>>点击加入妙味VIP会员


——享受正版妙味VIP用户超值回报!

课程咨询QQ:3049266712、3023710192
VIP会员咨询:3349734318、2379848569
咨询电话:010-57269690












回复

使用道具 举报

tgbtgb 发表于 2016-7-15 11:12:13 | 显示全部楼层
棍子英雄的视频是不是还没录制完啊,网盘中教程只有12节


回复 支持 反对

使用道具 举报

小林同学 发表于 2016-7-22 04:09:35 | 显示全部楼层
怎么12节就没有了
回复 支持 反对

使用道具 举报

 楼主| 前台-小仙 发表于 2016-7-22 13:37:36 | 显示全部楼层

你好,已经录制完成啦。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-1-16 20:55 , Processed in 0.122856 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表