使用Grid布局制作拼图小游戏

在学习grid布局时突发奇想利用这个布局的特性做一个拼图小游戏

先简单实现了一个demo,后期再优化，效果如下图：

先上一下主要的css样式

.container {display: inline-grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-gap: 1px 1px;grid-template-areas:'a b c''d e f''g h i';place-items: center center;place-content: center center;}.container>div {width: 100px;height: 100px;text-align: center;padding: 50px 0;box-sizing: border-box;counter-increment: section1;background-image: url(../images/nkss2.png);background-size: 300% 300%;}

方块的切换是利用的grid布局的grid-area切换实现，简单快捷，至于确定，就是grid-area不支持动画属性，所以没法实现漂亮的滑动效果，主要JS如下：

var AlphaBeta = "abcdefghi";var divs = document.getElementById("content").children;var emptyNode = divs[8];var emptyFlag = 'i';var IsGameOver = false;var startTime = new Date();for (var i = 0; i < divs.length; i++) {divs[i].style["grid-area"] = AlphaBeta[i];divs[i].style["background-position"] = -1 * (i % 3) * 100 + "% " + -1 * Math.floor(i / 3) * 100 + "%";divs[i].addEventListener("click", function(event) {if (getMovePos(emptyFlag).indexOf(this.style.gridRowStart) > -1) {emptyNode.style["grid-area"] = this.style["grid-area"];this.style["grid-area"] = emptyFlag;emptyFlag = emptyNode.style.gridRowStart;if (checkFinished()) {IsGameOver = true;successAnimation();}}})}

另外还有初始时的打乱方法：

// 打乱方法function randomLayut(step) {var pos, ran, node, preNodeFlag;while (step > 0) {pos = getMovePos(emptyFlag);ran = Math.floor((Math.random() * pos.length));while (pos[ran] == undefined || pos[ran] == preNodeFlag) {ran = Math.floor((Math.random() * pos.length));}console.log(pos[ran]);node = [...divs].filter(function(item) {return item.style.gridRowStart == pos[ran];})emptyNode.style["grid-area"] = node[0].style["grid-area"];node[0].style["grid-area"] = emptyFlag;preNodeFlag = emptyFlag;emptyFlag = emptyNode.style.gridRowStart;step--;}}

获取可移动位置的方法：

// 计算可移动的方块位置function getMovePos(empty) {var pos = AlphaBeta.indexOf(empty);if (pos % 3 == 0) {return [AlphaBeta[pos + 1],AlphaBeta[pos + 3],undefined,AlphaBeta[pos - 3]];} else if (pos % 3 == 1) {return [AlphaBeta[pos + 1],AlphaBeta[pos + 3],  AlphaBeta[pos - 1], AlphaBeta[pos - 3]];} else {return [undefined, AlphaBeta[pos + 3], AlphaBeta[pos - 1], AlphaBeta[pos - 3]];}}

以及使用键盘移动的监听方法：

document.onkeydown = function(e){if(IsGameOver)return;var code = e.keyCode || e.which, pos = getMovePos(emptyFlag),node;if (pos[code-37] != undefined) {node = [...divs].filter(function(item) {return item.style.gridRowStart == pos[code-37];})emptyNode.style["grid-area"] = node[0].style["grid-area"];node[0].style["grid-area"] = emptyFlag;emptyFlag = emptyNode.style.gridRowStart;if (checkFinished()) {IsGameOver = true;successAnimation();}}}

完整代码持续更新地址：github地址

使用Grid布局制作拼图小游戏相关推荐

python拼图_利用python制作拼图小游戏的全过程
开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块关注公众号:Python学习指南,回复"拼图"即可获取源码环境搭建安装P ...
matlab GUI制作拼图小游戏
matlab GUI制作拼图小游戏最近帮同学的忙制作一个拼图贴上代码和效果图,以后再详细说明.之前一般找到的拼图游戏都是"推格子"形式的,由于具体的要求,不能应用这种模板. 本人 ...
利用python制作拼图_利用python制作拼图小游戏的全过程
开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块关注公众号:Python学习指南,回复"拼图"即可获取源码环境搭建安装P ...
HTML+Javascript制作拼图小游戏详解（一）
本文章将分享一个来自前端菜鸟突发奇想的拼图游戏制作方法以及实现过程. 话不多说,先上图. 首先我们需要写好网页的基本布局(此处涉及简单的HTML和CSS知识). 网页一共分为三个区域,左侧时间显示区, ...
python制作拼图小游戏
开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块很多人学习python,不知道从何学起. 很多人学习python,掌握了基本语法过后,不知道在哪 ...
利用python制作拼图_python制作拼图小游戏
开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块环境搭建安装Python并添加到环境变量,pip安装需要的相关模块即可. 原理介绍游戏简介: ...
c语言拼图小游戏编程,c语言控制台输出制作拼图小游戏
这就是另外一个小程序了和那个推箱子很像. #include int a[4][4]; void draw_point(int n) { if(n == 15) { printf("| &qu ...
python设计拼图小游戏_教你用Python自制拼图小游戏，轻松搞定熊孩子
摘要:本文主要为大家详细介绍了python实现拼图小游戏,文中还有示例代码介绍,感兴趣的小伙伴们可以参考一下. 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Pyth ...
教你用Python自制拼图小游戏，轻松搞定熊孩子
摘要:本文主要为大家详细介绍了python实现拼图小游戏,文中还有示例代码介绍,感兴趣的小伙伴们可以参考一下. 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Pyth ...

使用Grid布局制作拼图小游戏

使用Grid布局制作拼图小游戏相关推荐

最新文章

热门文章