利用原生的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 ,然后在屏幕点击和键盘按钮响应事件的开始处添加判断,如果已经结束,则不继续走方块移动的逻辑。

总结

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

(0)

相关推荐

  • 基于javascript制作经典传统的拼图游戏

    本文实例为大家分享了javascript制作经典传统的拼图游戏的关键代码,供大家参考,具体内容如下 效果图: 拼出你喜欢的白雪公主和七个小矮人 实现代码: <!DOCTYPE html> <html> <head> <title>pingtu.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

  • jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】

    本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p

  • JS快速实现移动端拼图游戏

    最近做的一个简陋的手机端拼图游戏,代码简单易懂,废话不多说了,让大家证明一切吧! 先看下效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" id="viewport" cont

  • JavaScript实现的拼图算法分析

    本文实例分析了JavaScript实现的拼图算法.分享给大家供大家参考,具体如下: 学了html5的拖拽事件,相信做出一款小小的拼图游戏也不难吧.就来说一下怎么用drag事件完成拼图游戏吧,当然html5的新方法在IE下是不兼容的.这里我把这个拼图游戏封装成一个小插件,感兴趣的话可以直接copy来用,使用方法很简单. HTML,3个div里面什么都不用写,分别是用来放拼图,参照图,拼图面吧的. <div id="selectpanel"></div> <d

  • javascript结合Flexbox简单实现滑动拼图游戏

    滑动拼图就是把一张图片分成几等份,打乱顺序(下图),然后通过滑动拼凑成一张完整的图片. 要实现一个拼图游戏,需要考虑怎样随机的打乱顺序,怎样交换两张图片的位置,等等.但是,使用了Flexbox布局以后,这都不需要你去考虑,浏览器会帮你做,Flexbox就是这么的强大.关于Flexbox的介绍可以点击这里. 这个游戏中要用的是Flexbox布局的order属性,order属性可以用来控制Flex项目的顺序. 这里我用九个canvas元素来把图片分成九等分,也可以用其他方法,比如背景图片定位: <d

  • js+html5实现可在手机上玩的拼图游戏

    本文实例讲述了js+html5实现可在手机上玩的拼图游戏.分享给大家供大家参考.具体如下: 手机版的拼图.pc上用Chrome 或者 Firefox var R=(function(){ /*右边菜单*/ function fa(){ if(mo.style.right!='0px'){ mo.style.right='0px'; mco.rcss('','cmck'); }else{ mo.style.right='-100px'; mco.rcss('cmck',''); } } on(mc

  • JS 拼图游戏 面向对象,注释完整。

    在线演示 http://img.jb51.net/online/pintu/pintu.htm 复制代码 代码如下: <html> <head> <title>JS拼图游戏</title> <style>     body{         font-size:9pt;     } table{ border-collapse: collapse; } input{     width:20px; } </style> </he

  • js实现九宫格拼图小游戏

    效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */ body{ width: 100

  • JS写的数字拼图小游戏代码[学习参考]

    复制代码 代码如下: <html> <head> <title>拼图</title> <style> td.numTd{ width : 20px ; height : 20px ; } div.numDiv{ width : 100% ; height : 100% ; background-color : #000 ; color : #FFF ; text-align : center ; vertical-align : middle ;

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

    前言 本篇主要讲解,如何利用原生的 JavaScript 来实现一个简单的拼图小游戏. 一.游戏的基础逻辑 想用一门语言来开发游戏,必须先了解如何使用这门语言来实现一些基础逻辑,比如图像的绘制.交互的处理.定时器等. 1.图形绘制 图形绘制是一切的基础,这里使用 JavaScript 在 canvas 上进行绘制.即先在 html 中创建 canvas 元素,然后在 JavaScript 中,通过 id 拿到这个元素,并且通过 canvas 拿到对应的上下文环境 context ,为后续的绘图做

  • 原生javascript制作的拼图游戏实现方法详解

    本文实例讲述了原生javascript制作的拼图游戏实现方法.分享给大家供大家参考,具体如下: 实现方法 //1.让所有的li(在ul里)可以拖拽 //2.交换li的位置  计算背景图位置 //1.让所有的li(在ul里)可以拖拽 //根据鼠标的位置,计算目标li的序号 //根据行号和列号计算下标 //行号*3+列号 //2.归位 此处没有背景图  请自行添加 css样式 <!DOCTYPE html> <html> <head> <meta charset=&q

  • 原生JavaScript实现简单五子棋游戏

    本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码,供大家参考,具体内容如下 HTML页面 注释都很明确了,大家好好学习. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=d

  • android实现简单拼图游戏

    本文实例为大家分享了android实现简单拼图游戏的具体代码,供大家参考,具体内容如下 1. 2. //使用回调接口,首先初始化pintuview并绑定,实现回调接口的方法     mPintuLayout = (PintuLayout) findViewById(R.id.mpintu);         mPintuLayout.setOnGamePintuListener(new GamePintuListener() {             @Override            

  • Python加pyGame实现的简单拼图游戏实例

    本文实例讲述了Python加pyGame实现的简单拼图游戏.分享给大家供大家参考.具体实现方法如下: import pygame, sys, random from pygame.locals import * # 一些常量 WINDOWWIDTH = 500 WINDOWHEIGHT = 500 BACKGROUNDCOLOR = (255, 255, 255) BLUE = (0, 0, 255) BLACK = (0, 0, 0) FPS = 40 VHNUMS = 3 CELLNUMS

  • js实现简单拼图游戏

    本文实例为大家分享了js实现简单拼图游戏的具体代码,供大家参考,具体内容如下 HTML仅有一个id为game的div,并且没有编写css样式,只需要在img文件夹中放置一个图片文件就行,此处我放置的是LOL皇子的图片,图片名为'lol.png' <div id="game">  </div> 以下为实现后的效果图 多的不说,直接上js代码 /**  * 游戏配置  */ var gameConfig = {     width: 500,     height:

  • C语言编写简单拼图游戏

    本文为大家分享了使用C语言编写一个简单的拼图游戏,供大家参考,具体内容如下 制作一款拼图小游戏 #include <graphics.h> // 引用图形库头文件 #include <conio.h> #include<stdio.h> typedef enum { UP, DOWN, LEFT, RIGHT, UNKOWN } DRCT; const int level = 5; DRCT getKey() { char key; DRCT ret; key = _g

  • 基于JavaScript实现简单扫雷游戏

    对于10年前的人来说,扫雷肯定是家喻户晓,由于当时的科技并不是很发达,大家对于电脑游戏的了解,可能都是从扫雷开始的,今天就交大家一种用js原生代码写一个简单的扫雷游戏,话不多说,直接上干货: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

  • javascript实现简单打字游戏

    本文实例为大家分享了javascript打字游戏的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>传智打字游戏</title> <style type="text/css"> .label{ position:a

  • JavaScript实现简单打地鼠游戏

    本文实例为大家分享了JavaScript实现打地鼠游戏的具体代码,供大家参考,具体内容如下 效果如下: html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/index.js"></script> <link rel="s

随机推荐