80个HTML5+js小游戏集合

中庸之圣
已于 2024-04-19 11:05:28 修改
阅读量360
点赞数 4
文章标签： html5 javascript 前端
于 2024-04-19 11:01:03 首次发布
本文链接：https://blog.csdn.net/qq_18745063/article/details/137957472
版权
代码列表：
一个都不能死，捕鱼达人，3D魔方，蜘蛛纸牌，双人五子棋，罗盘时钟，黑客模拟器。。。。。。
有点多直接上图
代码：
<!DOCTYPE HTML>
<html>
<head>
   <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../css/sptx.css">
        <section class="main">
                <div class="box">
<a target="right" href="../yxmb/2/index.html">
<div class="item"><div class="logo">
<img src="../images/y2.png" alt=" Coding"> 一个都不能死</div>
<div class="desc">分为4个模式，看看你的反应能力和手速怎么样吧</div></div></a>

<div><a target="right" href="../yxmb/3/index.html">
<div class="item"><div class="logo">
<img src="../images/y3.png" alt=" Coding"> 捕鱼达人</div>
<div class="desc">一共有七档，界面还原，赶快试试吧</div></div></a>

<div><a target="right" href="../yxmb/4/index.html">
<div class="item"><div class="logo">
<img src="../images/y4.png" alt=" Coding"> 植物大战僵尸</div>
<div class="desc">经典游戏还原，有两种模式选择</div></div></a>

<div><a target="right" href="../yxmb/5/index.html">
<div class="item"><div class="logo">
<img src="../images/y5.png" alt=" Coding"> 3D魔方</div>
<div class="desc">鼠标点击操作，三阶魔方形状通常是正方体</div></div></a>

<div><a target="right" href="../yxmb/6/index.html">
<div class="item"><div class="logo">
<img src="../images/y6.png" alt=" Coding"> 青蛙吃苍蝇</div>
<div class="desc">兼容PC端和移动端，背景音乐开关功能，白天晚上两种背景</div></div></a>

<div><a target="right" href="../yxmb/7/index.html">
<div class="item"><div class="logo">
<img src="../images/y7.png" alt=" Coding"> 蜘蛛纸牌</div>
<div class="desc">游戏的目标以最少的移动次数将牌面中的十叠牌及待发的五组</div></div></a>

<div><a target="right" href="../yxmb/8/index.html">
<div class="item"><div class="logo">
<img src="../images/y8.png" alt=" Coding"> 贪吃蛇</div>
<div class="desc">贪吃蛇游戏是一款经典的益智游戏</div></div></a>

<div><a target="right" href="../yxmb/9/index.html">
<div class="item"><div class="logo">
<img src="../images/y9.png" alt=" Coding"> 水果消除</div>
<div class="desc">jQuery水果消除基于jquery.1.10.2.min.js制作（小星美化）</div></div></a>

<div><a target="right" href="../yxmb/10/index.html">
<div class="item"><div class="logo">
<img src="../images/y10.png" alt=" Coding"> 2048中文版</div>
<div class="desc">2048中文版小游戏基于jquery.1.10.2.min.js制作</div></div></a>
<a target="right" href="../yxmb/12/index.html">
<div class="item"><div class="logo">
<img src="../images/y12.png" alt=" Coding"> 飞机大战</div>
<div class="desc">JS飞机大战网页版小游戏，鼠标控制战机攻击敌人</div></div></a>

<div><a target="right" href="../yxmb/13/index.html">
<div class="item"><div class="logo">
<img src="../images/y13.png" alt=" Coding"> 跑酷小游戏</div>
<div class="desc">HTML5跑酷小游戏，按键盘空格键跳跃</div></div></a>

<div><a target="right" href="../yxmb/14/index.html">
<div class="item"><div class="logo">
<img src="../images/y14.png" alt=" Coding"> 贪吃蛇2.0</div>
<div class="desc">JS网页版贪吃蛇小游戏，原生JS</div></div></a>

<div>

<div><a target="right" href="../yxmb/16/index.html">
<div class="item"><div class="logo">
<img src="../images/y16.png" alt=" Coding"> 激流勇进</div>
<div class="desc">HTML5 canvas激流勇进小游戏代码，迷宫逃生小游戏</div></div></a>

<div><a target="right" href="../yxmb/17/index.html">
<div class="item"><div class="logo">
<img src="../images/y17.png" alt=" Coding"> 天天消消乐</div>
<div class="desc">让三个及以上的同色小动物横竖相连即可消除</div></div></a>

<div><a target="right" href="../yxmb/18/index.html">
<div class="item"><div class="logo">
<img src="../images/y18.png" alt=" Coding"> 别踩白块</div>
<div class="desc">只要不是白块，一个个点吧，游戏速度随着时间增加而加快</div></div></a>

<div><a target="right" href="../yxmb/19/index.html">
<div class="item"><div class="logo">
<img src="../images/y19.png" alt=" Coding"> 线条生存</div>
<div class="desc">线条生存躲避游戏，移动鼠标，拖动线条，躲避白点，获得积分</div></div></a>

<div><a target="right" href="../yxmb/20/index.html">
<div class="item"><div class="logo">
<img src="../images/y20.png" alt=" Coding"> 打砖块射击</div>
<div class="desc">HTML5 canvas打砖块射击小游戏，颜色爆炸射击游戏</div></div></a>

<div><a target="right" href="../yxmb/21/index.html">
<div class="item"><div class="logo">
<img src="../images/y21.png" alt=" Coding"> 保卫星球射击</div>
<div class="desc">星球防御游戏，太空战机为阻止星球遭遇小行星撞击</div></div></a>

<div><a target="right" href="../yxmb/22/index.html">
<div class="item"><div class="logo">
<img src="../images/y22.png" alt=" Coding"> 吃豆人</div>
<div class="desc">按［空格］开始或暂停、继续，键盘方向键进行游戏</div></div></a>

<div><a target="right" href="../yxmb/23/index.html">
<div class="item"><div class="logo">
<img src="../images/y23.jpg" alt=" Coding"> 开心消消乐</div>
<div class="desc">支持PC端和移动端，一款三消游戏，游戏画面精美</div></div></a>

<div><a target="right" href="../yxmb/24/index.html">
<div class="item"><div class="logo">
<img src="../images/y24.png" alt=" Coding"> 俄罗斯方块</div>
<div class="desc">界面简洁，难度可选：简单、一般、困难，键盘操作</div></div></a>

<div><a target="right" href="../yxmb/25/index.html">
<div class="item"><div class="logo">
<img src="../images/y25.png" alt=" Coding"> 2048方块版</div>
<div class="desc">HTML5数字方块2048小游戏，兼容PC端和移动端</div></div></a>

<div><a target="right" href="../yxmb/26/index.html">
<div class="item"><div class="logo">
<img src="../images/y26.png" alt=" Coding"> 看图猜词</div>
<div class="desc">【不兼容PC端】更好体验请使用手机，多个关卡小游戏</div></div></a>

<div><a target="right" href="../yxmb/27/index.html">
<div class="item"><div class="logo">
<img src="../images/y27.png" alt=" Coding"> 弹球打砖块</div>
<div class="desc">弹球打砖块，左、右箭头键或移动鼠标，控制小球打砖块</div></div></a>

<div><a target="right" href="../yxmb/28/index.html">
<div class="item"><div class="logo">
<img src="../images/y28.png" alt=" Coding"> 小方块回家</div>
<div class="desc">基于jQuery.1.10.2.min.js制作，可以选关，共30关</div></div></a>

<div><a target="right" href="../yxmb/29/index.html">
<div class="item"><div class="logo">
<img src="../images/y29.png" alt=" Coding"> 双人五子棋</div>
<div class="desc">自适应分辨率，可随意调整棋盘大小，可设定棋盘规格（双人游戏）</div></div></a>

<div><a target="right" href="../yxmb/30/index.html">
<div class="item"><div class="logo">
<img src="../images/y30.png" alt=" Coding"> 射箭小游戏</div>
<div class="desc">TweenMax.min.js制作，鼠标控制射箭游戏，画一个箭头并发射它</div></div></a>

<div><a target="right" href="../yxmb/31/index.html">
<div class="item"><div class="logo">
<img src="../images/y31.png" alt=" Coding"> 飞机大战2.0</div>
<div class="desc">飞机大战小游戏，电脑和手机都可以玩，飞机自动发射子弹</div></div></a>

<div><a target="right" href="../yxmb/32/index.html">
<div class="item"><div class="logo">
<img src="../images/y32.png" alt=" Coding"> 简单闯关游戏</div>
<div class="desc">简单JS闯关小游戏，4个关卡，键盘上下左右操作闯关小游戏</div></div></a>

<div><a target="right" href="../yxmb/33/index.html">
<div class="item"><div class="logo">
<img src="../images/y33.png" alt=" Coding"> 重力球滚动</div>
<div class="desc">重力球滚动，用鼠标倾斜屏幕，将球体移动到正方形，当心地下的洞</div></div></a>

<div><a target="right" href="../yxmb/34/index.html">
<div class="item"><div class="logo">
<img src="../images/y34.png" alt=" Coding"> 头像迷阵消除</div>
<div class="desc">人物头像迷阵消除游戏，类似《宝石迷阵》类的方块消除类型小游戏</div></div></a>

<div><a target="right" href="../yxmb/35/index.html">
<div class="item"><div class="logo">
<img src="../images/y35.png" alt=" Coding"> 变色弹球跳台阶</div>
<div class="desc">HTML5变色弹球跳台阶小游戏，点击台阶可变换红，黄，紫等颜色台阶</div></div></a>

<div><a target="right" href="../yxmb/36/index.html">
<div class="item"><div class="logo">
<img src="../images/y36.png" alt=" Coding"> 最强眼力</div>
<div class="desc">很经典的猜谜小游戏，有三个杯子，猜猜金币在哪个杯子里</div></div></a>

<div><a target="right" href="../yxmb/37/index.html">
<div class="item"><div class="logo">
<img src="../images/y37.png" alt=" Coding"> 俄罗斯方块2.0</div>
<div class="desc">俄罗斯方块2.0面向对象方式写的，彩色俄罗斯方块游戏</div></div></a>

<div><a target="right" href="../yxmb/38/index.html">
<div class="item"><div class="logo">
<img src="../images/y38.png" alt=" Coding"> 双人五子棋2.0</div>
<div class="desc">自适应分辨率，原生js和canvas实现五子棋小游戏（双人游戏）</div></div></a>

<div><a target="right" href="../yxmb/39/index.html">
<div class="item"><div class="logo">
<img src="../images/y39.png" alt=" Coding"> 小人推箱子</div>
<div class="desc">原生JS编写，移动小人，把箱子全部推到小球的位置即可过关</div></div></a>

<div><a target="right" href="../yxmb/40/index.html">
<div class="item"><div class="logo">
<img src="../images/y40.jpg" alt=" Coding"> 经典扫雷</div>
<div class="desc">扫雷基于jquery.1.10.2.min.js制作，计时，有十面红旗标注雷区</div></div></a>

<div><a target="right" href="../yxmb/41/index.html">
<div class="item"><div class="logo">
<img src="../images/y41.png" alt=" Coding"> 英雄宝石块消消乐</div>
<div class="desc">上手简单，只需让三个及以上的同色人物横竖相连即可消除</div></div></a>

<div><a target="right" href="../yxmb/42/index.html">
<div class="item"><div class="logo">
<img src="../images/y42.png" alt=" Coding"> 赛车游戏</div>
<div class="desc">HTML5 Canvas赛车游戏动画，赛车游戏动画演示</div></div></a>

<div><a target="right" href="../yxmb/43/index.html">
<div class="item"><div class="logo">
<img src="../images/y43.png" alt=" Coding"> 大家来找茬</div>
<div class="desc">一款经典的游戏，在限定时间内，找出两幅图的不同之处</div></div></a>

<div><a target="right" href="../yxmb/44/index.html">
<div class="item"><div class="logo">
<img src="../images/y44.png" alt=" Coding"> 经典扫雷2.0</div>
<div class="desc">最短的时间内点击格子出现的数字找出所有非雷格子，同时避免踩雷</div></div></a>

<div><a target="right" href="../yxmb/45/index.html">
<div class="item"><div class="logo">
<img src="../images/y45.png" alt=" Coding"> 锅打灰太狼</div>
<div class="desc">游戏时间:60s，拼手速，殴打灰太狼+10分，殴打小灰灰-10分</div></div></a>



<a target="right" href="../yxmb/47/index.html">
<div class="item"><div class="logo">
<img src="../images/y47.png" alt=" Coding"> 兔子吃月饼</div>
<div class="desc">HTML5兔子吃月饼小游戏，适应手机端，用鼠标操控进行游戏</div></div></a>

<div><a target="right" href="../yxmb/48/index.html">
<div class="item"><div class="logo">
<img src="../images/y48.png" alt=" Coding"> 接金币</div>
<div class="desc">HTML5接金币小游戏，鼠标控制人物左右移动进行操作</div></div></a>

<div><a target="right" href="../yxmb/49/index.html">
<div class="item"><div class="logo">
<img src="../images/y49.png" alt=" Coding"> 灌篮高手</div>
<div class="desc">樱木花道的篮球主场30秒投篮，按住屏幕，力度条在红色区域时松手投篮</div></div></a>

<div><a target="right" href="../yxmb/50/index.html">
<div class="item"><div class="logo">
<img src="../images/y50.png" alt=" Coding"> 疯狂打企鹅</div>
<div class="desc">HTML5疯狂打企鹅手机游戏</div></div></a>

<div><a target="right" href="../yxmb/51/index.html">
<div class="item"><div class="logo">
<img src="../images/y51.png" alt=" Coding"> 吃月饼大赛</div>
<div class="desc">中秋吃月饼大赛游戏，鼠标点击进行游戏，在一定的时间内看谁吃的多</div></div></a>

<div><a target="right" href="../yxmb/52/index.html">
<div class="item"><div class="logo">
<img src="../images/y52.png" alt=" Coding"> 坦克大战</div>
<div class="desc">以坦克战斗及保卫基地为主题，可一人游戏或两人进行游戏</div></div></a>

<div><a target="right" href="../yxmb/53/index.html">
<div class="item"><div class="logo">
<img src="../images/y53.png" alt=" Coding"> 图像之谜拼图</div>
<div class="desc">游戏分为简单、中等、困难，三个难度等级，记录操作步骤，纯html编写</div></div></a>

<div><a target="right" href="../yxmb/54/index.html">
<div class="item"><div class="logo">
<img src="../images/y54.png" alt=" Coding"> 消除QQ表情</div>
<div class="desc">消除QQ表情小游戏，你的手速有多快？</div></div></a>

<div><a target="right" href="../yxmb/55/index.html">
<div class="item"><div class="logo">
<img src="../images/y55.png" alt=" Coding"> 飞机躲避</div>
<div class="desc">HTML5游戏，长按屏幕飞机向上飞行，撞击障碍物游戏失败</div></div></a>

<div><a target="right" href="../yxmb/56/index.html">
<div class="item"><div class="logo">
<img src="../images/y56.png" alt=" Coding"> 3D熊出没</div>
<div class="desc">3D熊出没手机游戏基于HTML5 canvas制作，手机触屏操作更好</div></div></a>

<div><a target="right" href="../yxmb/57/index.html">
<div class="item"><div class="logo">
<img src="../images/y57.png" alt=" Coding"> 3D拼图魔方</div>
<div class="desc">3D拼图魔方游戏基于HTML5 canvas制作，一共12关</div></div></a>

<div><a target="right" href="../yxmb/58/index.html">
<div class="item"><div class="logo">
<img src="../images/y58.png" alt=" Coding"> 3D拳王拳击</div>
<div class="desc">3D拳王拳击游戏基于HTML5 canvas制作，支持鼠标操作</div></div></a>

<div><a target="right" href="../yxmb/59/index.html">
<div class="item"><div class="logo">
<img src="../images/y59.png" alt=" Coding"> 围住神经猫</div>
<div class="desc">基于HTML5 canvas、egret_loader.js和jquery.min.js等技术制作</div></div></a>

<div><a target="right" href="../yxmb/60/index.html">
<div class="item"><div class="logo">
<img src="../images/y60.png" alt=" Coding"> 2048军旗版</div>
<div class="desc">2048军旗版游戏，基于html5+js制作。键盘上下左右按键，开始游戏</div></div></a>

<div><a target="right" href="../yxmb/61/index.html">
<div class="item"><div class="logo">
<img src="../images/y61.png" alt=" Coding"> 打地鼠</div>
<div class="desc">打地鼠小游戏是基于HTML5 Canvas和Audio开发的小游戏</div></div></a>

<div><a target="right" href="../yxmb/62/index.html">
<div class="item"><div class="logo">
<img src="../images/y62.png" alt=" Coding"> 驴子跳跳</div>
<div class="desc">很漂亮的一款HTML5+CSS3游戏，还配有音乐，很酷很刺激</div></div></a>

<div><a target="right" href="../yxmb/63/index.html">
<div class="item"><div class="logo">
<img src="../images/y63.png" alt=" Coding"> 压扁像素小鸟</div>
<div class="desc">你恨flappy bird吗?你每天晚上对着那个愚蠢的鸟做噩梦吗？压扁它们！</div></div></a>

<div><a target="right" href="../yxmb/64/index.html">
<div class="item"><div class="logo">
<img src="../images/y64.png" alt=" Coding"> 像素小鸟飞行</div>
<div class="desc">游戏中玩家必须控制一只胖乎乎的小鸟，跨越由各种不同长度水管组成的障碍</div></div></a>

<div><a target="right" href="../yxmb/65/index.html">
<div class="item"><div class="logo">
<img src="../images/y65.png" alt=" Coding"> 中国象棋</div>
<div class="desc">HTML5+JS编写，效果很逼真，一点也不会出现卡的情况效果相当不错（小星美化）</div></div></a>

<div><a target="right" href="../yxmb/66/index.html">
<div class="item"><div class="logo">
<img src="../images/y66.png" alt=" Coding"> 经典飞机大战</div>
<div class="desc">经典飞机大战是一款JS模仿微信打飞机游戏</div></div></a>
<!--↑↑↑以上66个小游戏出自【源码之家www.mycodes.net】↑↑↑-->

<!--↓↓↓以下14个小游戏出自【A5源码www.a5xiazai.com】↓↓↓-->
<div><a target="right" href="../yxmb/67/index.html">
<div class="item"><div class="logo">
<img src="../images/y67.png" alt=" Coding"> 简约打地鼠</div>
<div class="desc">一款锻炼反应能力的打地鼠手机小游戏（只适应手机端）</div></div></a>

<div><a target="right" href="../yxmb/68/index.html">
<div class="item"><div class="logo">
<img src="../images/y68.png" alt=" Coding"> 切积木</div>
<div class="desc">切积木益智游戏是一款基于canvas画布制作切换积木立方体游戏</div></div></a>

<div><a target="right" href="../yxmb/69/index.html">
<div class="item"><div class="logo">
<img src="../images/y69.png" alt=" Coding"> 见缝插口红</div>
<div class="desc">见缝插口红手机游戏是一款口红西瓜见缝插针手机游戏（直男福利）</div></div></a>

<div><a target="right" href="../yxmb/70/index.html">
<div class="item"><div class="logo">
<img src="../images/y70.png" alt=" Coding"> 记忆小游戏</div>
<div class="desc">记忆小游戏代码是一款基于svg卡通图标匹配记忆游戏</div></div></a>

<div><a target="right" href="../yxmb/71/index.html">
<div class="item"><div class="logo">
<img src="../images/y71.png" alt=" Coding"> 看图猜词2.0</div>
<div class="desc">给你一张图片，在下列文字里选择组合一个成语，答对进入下一关（手机端更好）</div></div></a>

<div><a target="right" href="../yxmb/72/index.html">
<div class="item"><div class="logo">
<img src="../images/y72.png" alt=" Coding"> 萝卜载兔子飞行</div>
<div class="desc">基于canvas绘制的3D兔子载着胡萝卜飞行穿过云层的游戏，单击鼠标拖动控制方向</div></div></a>

<div><a target="right" href="../yxmb/73/index.html">
<div class="item"><div class="logo">
<img src="../images/y73.png" alt=" Coding"> 16宫格翻牌匹配</div>
<div class="desc">一款16宫格的翻牌图标匹配游戏，翻开两个图标一样，进行匹配小游戏</div></div></a>

<div><a target="right" href="../yxmb/74/index.html">
<div class="item"><div class="logo">
<img src="../images/y74.png" alt=" Coding"> 一笔连珠</div>
<div class="desc">点击每个圆珠来让线段进行连接，不可重复点亮，全部点亮即闯关成功</div></div></a>

<div><a target="_blank" href="../yxmb/75/index.html">
<div class="item"><div class="logo">
<img src="../images/y75.png" alt=" Coding"> 森林协奏曲</div>
<div class="desc">鼠标点击消除箱子等物体使动物们团圆，游戏加载完毕点击开始游戏（50个关卡）</div></div></a>

<div><a target="right" href="../yxmb/76/index.html">
<div class="item"><div class="logo">
<img src="../images/y76.png" alt=" Coding"> 斗地主</div>
<div class="desc">由三人玩，地主是一方，其余两家为另一方，双方对战，先出完的一方胜</div></div></a>

<div><a target="right" href="../yxmb/77/index.html">
<div class="item"><div class="logo">
<img src="../images/y77.png" alt=" Coding"> 飞机加减速</div>
<div class="desc">一款基于HTML5 Canvas实现的小游戏，圆形的加速，方形减速（手机端更好）</div></div></a>

<div><a target="right" href="../yxmb/78/index.html">
<div class="item"><div class="logo">
<img src="../images/y78.png" alt=" Coding"> 响应式翻牌</div>
<div class="desc">一款支持PC端跟手机端的小游戏，选择2个一样的即可抵消</div></div></a>

<div><a target="right" href="../yxmb/79/index.html">
<div class="item"><div class="logo">
<img src="../images/y79.png" alt=" Coding"> 天降红包雨</div>
<div class="desc">疯狂抢红包，天降红包雨，看看你的手速怎么样？抢到手软</div></div></a>


                <div class="box">
                </div>
        </section>
 
</body>
</html>
码云：
www.wouldplay.cn: 纯HTML小游戏，纯js小游戏，3D魔方，一个不能死，五子棋，消消乐，飞机大战，黑客模拟器