源码拿来就用用 JavaScript 实现简单拼图游戏
Posted 诗一样的代码
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了源码拿来就用用 JavaScript 实现简单拼图游戏相关的知识,希望对你有一定的参考价值。
用 javascript 实现简单拼图游戏 本篇主要讲解,用原生的js来实现一个简单的拼图小游戏。
线上体验地址:拼图
一、游戏的基础逻辑
想用一门语言来开发游戏,必须先了解如何使用这门语言来实现一些基础逻辑,比如图像的绘制、交互的处理、定时器等。
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 方法可以绘制图片,这里进行了相应的封装:
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]);
2、事件处理
有了图形的绘制后,我们还需要处理玩家的输入事件,然后根据输入事件,来决定什么时候刷新视图。输入事件可以分为 3 种:在手机上有触屏事件;在 PC 上,有鼠标和键盘事件。
JavaScript 中对触屏和鼠标点击的监听是一样的,都是通过 canvas 的 onclick 事件进行回调,具体如下:
// 屏幕点击
background.onclick = function(e)
;
键盘的按键点击则是通过 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
二、拼图的基础逻辑
因为不是任意序列都可以通过平移的方式来还原,所以我们不能简单地生成一个随机序列。比如 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;
3、实现方块移动
方块移动的实现很简单,先将旧位置的图形清除,然后在新的位置绘制。
var refreshImagePositions = function(origin, target)
var originRect = rectForPosition(origin);
context.clearRect(originRect[0], originRect[1], originRect[2], originRect[3]);
drawImageItem(imageIndexForPosition[target], target);
领取完整源码,请关注公众号:“诗一样的代码”
以上是关于源码拿来就用用 JavaScript 实现简单拼图游戏的主要内容,如果未能解决你的问题,请参考以下文章