HTML5 + css3 + js 网页设计作业 网页小游戏

本文介绍了一位学生利用HTML5、CSS3和JavaScript制作的一款翻转图片网页小游戏。游戏包含三个难度等级,玩家需将图片配对成功以赢得游戏。作者提供了游戏界面截图及源码链接,感兴趣的读者可以下载体验或进行二次开发。
摘要由CSDN通过智能技术生成

用HTML5 + css3 + js 做的一个翻图片的网页小游戏,挺有意思的吧!

因为上网页课要交一个个人的网页设计作业,时间挺紧的,记得以前玩游戏偶尔看到一个翻转图片的小游戏,就想模仿着做一个!

1、界面展示

游戏界面截图:
翻图片小游戏

排版可能会有一些小问题,但并不影响游戏的运行

左上角可以选择关卡
翻图片小游戏
一共分为三个关卡:
1、简单是6 * 6
2、一般是8 * 8
3、困难是16*16

点击下面的开始按钮就可以开始游戏了

下面是简单模式的游戏界面。

翻图片小游戏

右下角可以查看当前的游戏进度,
就是 配对成功数 以及 操作总步数
全部配对即游戏胜利!

因为图片比较少所以可能会看着图片都是挨着的,有兴趣的同学可以多加点图片

在这里插入图片描述

2、源码

相关资源
阿里云盘
https://www.aliyundrive.com/s/U5nM2qoBXA7

评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值