启智社区，确实给力

当前位置：首页 > 学习 > 实训 >

JS实现2048游戏

JS实现2048游戏

  • 来源：头歌教研中心
  • 章节：5 单元：4

  • 课程研发团队

  • 张金炜
进入实训课程

课程简介：

2048 是一款十分火爆的益智游戏，游戏的规则十分简单，简单易上手的数字小游戏。
本课程基于 HTML+CSS+JS+jQuery 来实现网页版 2048，通过小游戏和实战案例引导学生运用程序设计思维解决实际问题，赋予编程更多趣味性和实战性，让你融会贯通学到 Web 应用程序的开发流程，从布局，初始化到编写游戏逻辑。

你将学到
















了解 2048 游戏的设计原理

实现方块移动

Web 应用程序的开发流程

使用 HTML+CSS 进行简单页面的构建

使用 JavaScript 及 jQuery 编写游戏的逻辑

综合利用所学知识制作一个 2048 小游戏

面向人群


- 对 2048 游戏设计感兴趣的同学
- 想做项目练手，希望在动手能力上得到提升的同学
- 有一定前端基础（HTML+CSS+JavaScript+jQuery）的同学

课程大纲


课程包含：4章节课程+案例实训
第一章：补足性体验性实验
第二章：界面实现
第三章：用户-界面-程序-交互控制实现
第四章：游戏优化

课程章节：

【项目源码】JS实现2048游戏

第一章：补足性体验性实验

1. 实现数组初始化 2. 随机初始化数字 2 或 4 3. 获取数字背景颜色 4. 判断游戏是否 over

第二章：界面实现

1. 根据样式文件，实现16个格子的 GUI 2. 根据样式文件，实现四个按钮的 GUI 3. 数据关联

第三章：用户-界面-程序-交互控制实现

1. 方向键进行交互控制 2. 撤回功能 3. 游戏进度存储以及读取

第四章：游戏优化

1. 移动动画 2. 游戏结束界面显示 3. 完整游戏测试