一个基于HTML,Javascript的消除游戏

简介: 一个基于HTML,Javascript的消除游戏

view online demo

screenshot:

20210104173750743.png20210104173813930.png2021010417382942.png


usage:

<div class="game-container">
    <canvas id="js-game" width="300" height="250" class="gamecanvas"></canvas>
</div>
<script src="res/zepto.min.1.1.6.js"></script>
<script src="res/easeljs-0.8.2.min.js"></script>
<script src="res/tweenjs-0.6.2.min.js"></script>
<script src="res/hammer.min.js"></script>
<script src="xiaoxiaole.js"></script>
<script>
    var xxl = new XiaoXiaoLe("js-game", "img" ,{
            col:6,  //6 columns
            row:5,  //5 rows
        },
        function (score) {  //score changed calback
            $("#js-score-num").text(score)
        }, 
        function (score) {   //game end calback
            alert("gameover!!,You get " + score + " points");
        }, 
        function (time) {
            $("#js-time-down").text(time)
        }
    );
    xxl.start();
    // hint 
    xxl.hint();
</script>
目录
相关文章
|
6天前
|
JavaScript 前端开发 算法
在JavaScript中实现的基本AABB矩形碰撞检测用于2D游戏
【5月更文挑战第14天】在JavaScript中实现的基本AABB矩形碰撞检测用于2D游戏,涉及Rectangle类,包含x,y,width和height属性,以及一个检测碰撞的collidesWith方法。该方法通过比较矩形边界来判断是否相交,返回布尔结果。示例代码展示了如何检测两个Rectangle实例是否发生碰撞。更复杂的场景可能需使用高级算法或物理引擎库。
12 3
|
6天前
|
移动开发 JavaScript 前端开发
Phaser和Three.js是两个非常流行的JavaScript游戏框架
【5月更文挑战第14天】Phaser是开源的2D游戏引擎,适合HTML5游戏开发,内置物理引擎和强大的图形渲染功能,适用于消消乐等2D游戏。Three.js是基于WebGL的3D库,用于创建3D场景和应用,支持各种3D对象和交互功能,广泛应用于游戏、可视化等领域。选择框架取决于项目需求,2D选Phaser,3D选Three.js。
15 4
|
6天前
|
缓存 编解码 JavaScript
提升JavaScript游戏性能的关键点
【5月更文挑战第14天】提升JavaScript游戏性能的关键点包括:使用requestAnimationFrame优化动画流畅度;减少DOM操作,利用DocumentFragment或虚拟DOM;使用Canvas/WebGL高效渲染;优化图像资源,压缩图片并使用雪碧图;分层渲染和视口裁剪降低无效计算;借助Web Workers进行后台计算;缓存不变的计算结果;合理使用事件监听器并采用事件委托;定期进行性能分析以发现和解决问题。不断测试与调整,以实现最佳性能。
11 2
|
6天前
|
JavaScript 前端开发 算法
设计一个JavaScript版的“俄罗斯方块”游戏
【5月更文挑战第14天】设计一个JavaScript版的“俄罗斯方块”游戏,涉及的主要逻辑包括:初始化游戏环境(创建容器,设定变量,加载音效)、生成及控制方块、处理方块碰撞与消除、游戏结束判断以及游戏循环与状态管理。伪代码展示了游戏循环中的关键步骤,如生成方块、移动、锁定、碰撞检测、行消除和游戏结束条件。实际实现需考虑更多细节,如方块形状、移动逻辑、碰撞算法、分数计算,以及动画和音效等。
12 1
|
6天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
6天前
|
前端开发 JavaScript
使用html+css+javaScript 完成计算器
使用html+css+javaScript 完成计算器
|
6天前
|
JavaScript 前端开发 数据处理
JavaScript 游戏规则:setTimeout和setInterval的对决
JavaScript 游戏规则:setTimeout和setInterval的对决
16 1
|
6天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
30 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
6天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
39 0
|
6天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
23 1