前面几篇的学习日志中我们学习了canvas的基本用法,那么今天,我们就要运用canvas来开发一个小的益智游戏,什么游戏呢?那就是我们小时候常玩的魔板拼图游戏,在一个M*N的魔板中共有(M*N-1)张小块图片,和一个空白块;我们要利用这个空白块来移动这(M*N-1)张小块图片,使之拼成一张原始的完整的图片。

优质阅读感受及更多讨论,请查看原文:
https://segmentfault.com/a/1190000009622722

  游戏实例:http://xiaowu.shnow.cn/html5/note4/index.html

SegmentFault Weekly – vol.24

  接下来就要详细讲解如何利用html5中的canvas来开发这样一个益智小游戏,下面我来简单地讲解一下游戏的开发思路。

今天是六一国际儿童节,祝小伙伴们六一快乐!本期技术周刊小编为大家奉上几款小游戏,让我们一起来
“玩” 吧~

  1.首先我们来定义游戏中需要用到的一些全局配置变量

游戏大集合

八分音符小游戏

这个游戏的原理很简单,就是通过声音来控制小人移动,声音越大,跳得越高。

  • 获取音频和视频
  • 进行音频和视频通信
  • 进行任意数据的通信

贪吃蛇。
和童年的贪吃蛇相比,这次是 3D 的哦,而且 JS 代码只有 90
行,是不是很激动?

传统 2D
的贪吃蛇游戏一般通过方向键盘控制蛇的前进方向,我一开始就想定位可运行在平板上的Touch交互,所以不考虑键盘的操作交互方式,采用完全用点击的方式来控制,得到鼠标点击所在的平面位置,这样与蛇头的位置做比较就能判断出新的前进方向,如果点击位置超出了贪吃蛇的运行矩阵范围我就不做处理。

英雄抓怪物
实现这个游戏只需要三张图,一个 html 文件和一个 js
文件,看起来好像很简单的样子。

魔秀时光道
一个类似滑雪大冒险和赛车的结合的游戏。

实现思路:

  • 背景滑动效果实现
  • 人物滑动实现
  • 碰撞检测

子弹打飞船
据说只要知道 javascript 怎么拼写,就可以用 canvas 做游戏。

网球游戏
纯 canvas 实现,代码 100 行不到,赶紧动手写起来吧。

俄罗斯方块
老少皆宜,简直是童年回忆啊。

数字拼图
下面来一个考验智力的小游戏,据说拼出来有赏哦~

原理很简单,需要实现的功能点:

  • 随机生成1~15的数字格子,每一个数字都必须出现且仅出现一次
  • 点击一个数字方块后,如其上下左右有一处为空,则两者交换位置
  • 格子每移动一步,我们都需要校验其是否闯关成功
  • 点击重置游戏按钮后需对拼图进行重新排序

拼图小游戏
看了上面的数字拼图小游戏,有木有想起我们玩过的游戏拼图?想不想来一个?

实现思路也很简单:

  • 利用canvas切出小块图片
  • 实现小块图片的随机排列
  • 相关touch事件的监听和实现
  • 游戏是否完成的判断

细胞自动机
每个细胞有两种状态:存活或死亡,看着细胞不断变化,小编突然开始思考人生了。

细胞自动机(英语:Cellular
automaton),又称格状自动机、元胞自动机,它是由无限个有规律、坚硬的方格组成,每格均处于一种有限状态。每格于t时的态由t-1时的一集有限格(这集叫那格的邻域)的态决定。每一格的“邻居”都是已被固定的。每次演进时,每格均遵从同一规矩一齐演进。

蜗牛
喜欢徒步的小伙伴还可以做个游戏记录下自己的行走路线。

我希望可以过一段时间拿到一个定位,只有一个,所以我设置了一个时间周期的循环,并记录当前在哪个循环内,如果这个周期内已经拿到过watch接口得到的位置,那么我就不做操作,如果没拿到过,我就给放到记录里,如果整个周期都没拿到,也没关系,我就抛弃这个周期,去获取更精确的值。

2048
相信大多数人都听说过 2048 这个游戏,现在就来学习一下吧。

还没通关的小伙伴,这里是通关攻略:

//全局配置变量
var kBoardWidth = 4;            //横向块数
var kBoardHeight = 5;            //纵向块数
var kPieceWidth = 100;            //每块的宽度
var kPieceHeight = 100;            //每块的高度
var kPixelWidth = 1 + kBoardWidth * kPieceWidth;        //游戏视野的宽度
var kPixelHeight = 1 + kBoardHeight * kPieceHeight;        //游戏视野的高度
var exchangeTimes = 100;        //随机对换次数

var gCanvasElement;                //canvas元素节点
var gDrawingContext;            //canvas元素的context内容
var gMoveCountElem;                //移动步数元素节点
var gMoveCount;                    //移动次数
var gPieces;                    //小块图片数组
var gNumPieces;                    //小块图片的张数

Phaser.js 游戏开发

重点推荐
@Vincent_Pat
的《从零到一:用 Phaser.js
写意地开发小游戏》系列文章。这个系列一共有五篇文章,从框架选择到场景搭建,从零开始讲解如何用
Phaser.js 实现动画效果。

Chapter 1 –
认识Phaser.js

为什么选择 Phaser?以下是我选择它的一些原因:

  • 出现在国外几乎所有的H5游戏框架的榜单中,而且名列前茅。
  • 支持原生JS及TypeScript。
  • 可以方便地在Canvas和WebGL之间切换。
  • 仅支持开发2D游戏,因为专注,所以高效。
  • 定位如上图所示,是桌面和移动端H5游戏框架,Pixi.js、Three.js这些框架则不同,它们不是专门针对游戏开发设计的,拿来开发游戏并没有很轻松。
  • 非常完善的文档及示例(当然是英文文档)。
  • 持续更新,目前Phaser
    3正在开发,没什么比一个热度高的开源框架更值得推荐了。

Chapter 2 –
搭建游戏的骨架

这一节我们来搭建游戏的骨架,并添加四个游戏场景,分别是加载、开始、游戏、结束。游戏相关的一些概念:

  • 画布:一般来说,做游戏的话基于 Canvas 会比基于 DOM
    性能要好很多,尤其是涉及大量动画的情况下。Phaser 会将一切渲染在
    canvas 元素上,于是,毫不夸张地说,你的body 标签里可能只包含一个
    canvas 元素。
  • 场景:一个完整的游戏都是有分场景的,不是指“迷宫”、“沙漠”这些游戏场景,而是“加载”、“开始”、“游戏”、“结束”等场景。
  • 对象池:游戏中生成非常多的元素,我们会需要一个对象池来维护他们,对象池可以理解成是一个Group。

Chapter 3 –
加载游戏资源

这一节我们介绍了加载场景,分步骤介绍了加载资源、监听加载完成的事件以及添加一个最小的加载展示时间,其中“添加一个最小的加载展示时间”是偏实际应用的内容,非必须。
在文章的最后我们还向场景中加入了主角、背景、标题和开始提示等元素,来丰富开始场景。

Chapter 4 –
游戏即将开始

这一节我们来完成游戏最核心的场景——play。这是一个接苹果的游戏,为此我们会加入物理引擎,会使用一些过渡动画以及监听触摸事件等等。
我们首先布置了游戏场景,加入了背景音乐。然后实现了对主角的操作,最后实现了苹果的随机掉落。

Chapter 5 –
游戏大功告成

这一节我们来完成游戏剩余的部分,主要是计算分数、如何结束游戏等等,实现一个完整的游戏。当然了,效果远未达到理想,要说的话,游戏水非常深,这个系列的教程只是从零到一,引导大家接触并上手
Phaser.js。

  2.利用OOP(面向对象)的方法,创建一个Cell类,Cell类当中包含了每个小块图片的行列和内容信息:

一点干货

关于动画:

一些实用的代码片段:

(本期完)


# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列,一周一主题。周刊筛选的每篇内容,是作者的独到见解,踩坑总结和经验分享。

每周四更新,欢迎「关注」或者「订阅」。大家也可以在评论处留言自己感兴趣的主题,推荐主题相关的优秀文章。

© 本文版权归作者 SegmentFault
所有,文中提及所有文章版权归原文作者所有,任何形式转载请联系作者。

//定义一个cell类,cell类包含了小块图片的信息
function Cell(row,column,index)
{
    this.row = row;            //行信息
    this.column = column;    //列信息
    this.index = index;        //内容信息
}

  3.接下来可以开始初始化游戏了。

//初始化游戏
function initGame(canvasElement,moveCountElement)
{
    //若canvas元素节点不存在则创建canvas元素节点
    if(!canvasElement)
    {    
        canvasElement = document.createElement("canvas");
        canvasElement.id = "puzzle";
        document.body.appendChild(canvasElement);
    }

    //若记录步数记录节点不存在则创建步数记录节点
    if(!moveCountElement)
    {
        moveCountElement = document.createElement("p");
        document.body.appendChild(moveCountElement);
        document.body.appendChild(moveCountElement);
    }

    //初始化参数
    gCanvasElement = canvasElement;
    gDrawingContext = gCanvasElement.getContext("2d");
    gCanvasElement.width = kPixelWidth;
    gCanvasElement.height = kPixelHeight;
    gMoveCountElem = moveCountElement;
    gMoveCount = 0;

    newGame();            //载入新的游戏
    //监听按键事件
    document.onkeydown=function(e)  
    {   
        //key接受到的键盘码,以下写法有更好的跨浏览器兼容性
        var key=e.keyCode||e.which||e.charCode;
        if(key==38 || key==87) movePiece("up");     //上 或者 W 被按下
        if(key==40 || key==83) movePiece("down");   //下 或者 S 被按下
        if(key==37 || key==65 ) movePiece("left");  //左 或者 A 被按下
        if(key==39 || key==68 ) movePiece("right"); //右 或者 D 被按下
    } 
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图