利用原生的JavaScript实现简单拼图游戏


Posted in Javascript onNovember 18, 2018

前言

本篇主要讲解,如何利用原生的 JavaScript

来实现一个简单的拼图小游戏。

利用原生的JavaScript实现简单拼图游戏

一、游戏的基础逻辑

想用一门语言来开发游戏,必须先了解如何使用这门语言来实现一些基础逻辑,比如图像的绘制、交互的处理、定时器等。

1、图形绘制

图形绘制是一切的基础,这里使用 JavaScript 在 canvas 上进行绘制。即先在 html 中创建 canvas 元素,然后在 JavaScript 中,通过 id 拿到这个元素,并且通过 canvas 拿到对应的上下文环境 context ,为后续的绘图做好准备。

<canvas id="background" width="450px" height="450px"></canvas>
var background = document.getElementById("background");
var context = background.getContext('2d');

通过 context 的 drawImage 方法可以绘制图片,这里进行了相应的封装:

注:这里要等图片加载完毕后再进行绘制,即在 onload 中去调用 drawImage 方法,否则会绘制失败。

var drawImageItem = function(index, position) {
var img = new Image();
img.src = './image/dog_0' + String(index+1) + '.jpg';
img.onload = () => {
var rect = rectForPosition(position);
context.drawImage(img, rect[0], rect[1], rect[2], rect[3]);
}
}

在绘制图片之后,我们还需要去动态刷新视图,否则 canvas 就只是一张静态的图片。如果是简单的图形刷新,只需在原来的位置重新绘制,进行覆盖即可。但有时候我们只需要将原来已存在的图形清除掉,而不需要绘制新图案。比如在拼图游戏中,将一个方块移动到另一个位置后,需要清空原来的位置。

通过 context 的 clearRect 方法可以达到清除的目的。以下是清除 canvas 的某个区域的代码:

var originRect = rectForPosition(origin);
context.clearRect(originRect[0], originRect[1], originRect[2], originRect[3]);

2、事件处理

有了图形的绘制后,我们还需要处理玩家的输入事件,然后根据输入事件,来决定什么时候刷新视图。输入事件可以分为 3 种:在手机上有触屏事件;在 PC 上,有鼠标和键盘事件。

JavaScript 中对触屏和鼠标点击的监听是一样的,都是通过 canvas 的 onclick 事件进行回调,具体如下:

// 屏幕点击
background.onclick = function(e) {
};

我们可以通过 e.offsetX 、 e.offsetY 来获取触控点在 canvas 中的位置。

注: canvas 的坐标原点在左上角,即左上角的坐标是 (0, 0) 。

键盘的按键点击则是通过 document 的 onkeyup 、 onkeydown 等事件进行回调。 onkeyup 是指按键的抬起事件, onkeydown 是指按键的按下事件。我们可以通过 keyCode 知道当前具体是哪一个按键,然后根据不同的按键去处理不同的逻辑,如下:

if (event.keyCode == '37') { // 左
// do something
} else if (event.keyCode == '38') { // 上
// do something
} else if (event.keyCode == '39') { // 右
// do something
} else if (event.keyCode == '40') { // 下
// do something
}

3、定时器

有时候,除了在玩家输入的时候需要去刷新视图,还需要每隔一段时间定时去刷新视图。比如在一个贪吃蛇游戏中,就需要每隔一段时间就去刷新蛇的位置。

这个时候我们就需要一个定时器,让它每隔一段时间去执行一段刷新视图的代码。我们通过 setInterval 方法来实现定时器功能:

setInterval("run()", 100);

上面这段代码表示每隔 100 毫秒,去执行一次 run 方法。

二、拼图的基础逻辑

有了游戏的基础逻辑,下面来看一下如何实现拼图的逻辑。

1、生成随机序列

因为不是任意序列都可以通过平移的方式来还原,所以我们不能简单地生成一个随机序列。比如 1、0、2、3、4、5、6、7、8 这个序列,无论怎么平移,都不可能还原。

这里采取的做法是:预先设置了 4 个可还原的序列,先从这 4 个序列中随机选取一个,然后再对序列进行模拟平移若干步骤。以此来尽可能地保证初始序列的多样性,也保证了序列的可还原性。具体代码如下:

var setupRandomPosition = function() {
var list1 = [4, 3, 2, 8, 0, 7, 5, 6, 1];
var list2 = [2, 0, 5, 6, 8, 7, 3, 1, 4];
var list3 = [3, 7, 2, 4, 1, 6, 8, 0, 5];
var list4 = [3, 2, 4, 1, 7, 6, 5, 0, 8];
var lists = [list1, list2, list3, list4];

imageIndexForPosition = lists[parseInt(Math.random() * 4)];

// 获取空位位置
var emptyPosition = 0;
for (var i = imageIndexForPosition.length - 1; i >= 0; i--) {
if (imageIndexForPosition[i] == lastIndex()) {
emptyPosition = i;
break;
}
}
background.emptyPosition = emptyPosition;

// 随机移动次数
var times = 10;
while (times--) {
// 获取随机数,决定空位哪个位置进行移动
var direction = parseInt(Math.random() * 4);

var target = -1;
if (direction == 0) {
target = topOfPosition(emptyPosition); // 上
} else if (direction == 1) {
target = leftOfPosition(emptyPosition); // 左 
} else if (direction == 2) {
target = rightOfPosition(emptyPosition); // 右
} else if (direction == 3) {
target = bottomOfPosition(emptyPosition); // 下
}
if (target < 0 || target > lastIndex()) { // 位置不合法,继续下一次循环
continue;
}
var result = moveImageIfCanAtPosition(target);
if (result >= 0) { // 如果移动成功,更新空位的位置
emptyPosition = target;
}
}
}

2、判断是否可以移动方块

在保存顺序的时候,是用 0~8 这 9 个数字来保存,而空白的方块是数字 8 的位置。所以判断可以移动的唯一条件是,目标位置的值是否为 8。代码如下:

var isPositionEmpty = function(position) {
if (position < 0 || position > lastIndex()) {
return false;
} 
if (imageIndexForPosition[position] == lastIndex()) {
return true;
} else {
return false;
}
}

上面 lastIndex() 的值为 8。

3、实现方块移动

方块移动的实现很简单,先将旧位置的图形清除,然后在新的位置绘制。

var refreshImagePositions = function(origin, target) {
var originRect = rectForPosition(origin);
context.clearRect(originRect[0], originRect[1], originRect[2], originRect[3]);
drawImageItem(imageIndexForPosition[target], target);
}

4、检查是否完成

检查图案是否已经还原,只需要对数组进行一次遍历,看是否有序即可。

var checkIfFinish = function() {
for (var index = 0; index < imageIndexForPosition.length; index++) {
if (index != imageIndexForPosition[index]) {
return false;
}
}
return true;
}

5、交互事件屏蔽

当图案还原之后,我们不希望玩家还能通过键盘或鼠标来移动方块,这个时候就需要对交互事件进行屏蔽。

只需要一个标志位就可以达到这个目的:

//

屏幕点击
background.onclick = function(e) {
if (isFinish) {
return;
}

// do something
};

// 键盘按钮事件
document.onkeyup = function(event) {
if (isFinish) {
return;
}

// do something
}

当图案还原之后,标志位 isFinish 会被置为 true ,然后在屏幕点击和键盘按钮响应事件的开始处添加判断,如果已经结束,则不继续走方块移动的逻辑。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js模拟弹出效果代码修正版
Aug 07 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
Javascript实现动态时钟效果
Nov 17 #Javascript
使用Javascript简单计算器
Nov 17 #Javascript
JS实现图片切换效果
Nov 17 #Javascript
js实现导航跟随效果
Nov 17 #Javascript
JavaScript实现新年倒计时效果
Nov 17 #Javascript
JS实现倒计时图文效果
Nov 17 #Javascript
javaScript实现游戏倒计时功能
Nov 17 #Javascript
You might like
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
vue二级路由设置方法
2018/02/09 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python实现购物车购物小程序
2018/04/18 Python
解决python 输出是省略号的问题
2018/04/19 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
本科生详细的自我评价
2013/09/19 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
普宁寺导游词
2015/02/04 职场文书
签字仪式主持词
2015/07/03 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技