html5初学者小游戏源代码,html5 一个“一笔画”小游戏源码(通关)
【实例简介】一个基于html5设计的小游戏
【实例截图】
【核心代码】
H5小游戏100例: 一笔画
let onestroke = new OneStroke(
{
// 默认的线段颜色与端点颜色
lineColor: 0xe2e2e2,
vertexColor: 0x6dc6c0,
strokeColor: 0x416275,
activeVertexColor: 0x6dc6c0,
levels: [
{
name: "第一关",
lineColor: 0xe2e2e2,
vertexColor: 0x90b34f,
strokeColor: 0x445624,
activeVertexColor: 0x90b34f,
lines: [
{"x1": 375, "y1": 366, "x2": 200, "y2": 916},
{"x1": 200, "y1": 916, "x2": 664, "y2": 576},
{"x1": 664, "y1": 576, "x2": 88, "y2": 576},
{"x1": 88, "y1": 576, "x2": 556, "y2": 916},
{"x1": 556, "y1": 916, "x2": 375, "y2": 366}
]
},
{
name: "第二关",
lineColor: 0xe2e2e2,
vertexColor: 0x6dc6c0,
strokeColor: 0x416275,
activeVertexColor: 0x6dc6c0,
lines: [
{"x1": 240, "y1": 460, "x2": 654, "y2": 875},
{"x1": 654, "y1": 875, "x2": 100, "y2": 740},
{"x1": 100, "y1": 740, "x2": 240, "y2": 460},
{"x1": 240, "y1": 460, "x2": 515, "y2": 460},
{"x1": 515, "y1": 460, "x2": 654, "y2": 740},
{"x1": 654, "y1": 740, "x2": 100, "y2": 875},
{"x1": 100, "y1": 875, "x2": 515, "y2": 460}
]
},
{
name: "第三关",
lineColor: 0xe2e2e2,
vertexColor: 0xec6a74,
strokeColor: 0x914748,
activeVertexColor: 0xec6a74,
lines: [
{"x1": 177, "y1": 367, "x2": 177, "y2": 961},
{"x1": 177, "y1": 961, "x2": 673, "y2": 861},
{"x1": 673, "y1": 861, "x2": 177, "y2": 367},
{"x1": 177, "y1": 367, "x2": 572, "y2": 367},
{"x1": 572, "y1": 367, "x2": 78, "y2": 861},
{"x1": 78, "y1": 861, "x2": 572, "y2": 961},
{"x1": 572, "y1": 961, "x2": 572, "y2": 367}
]
},
{
name: "第四关",
src: "images/049.jpeg"
},
{
name: "第五关",
src: "images/053.jpeg"
},
{
name: "第六关",
src: "images/059.jpeg"
},
{
name: "第七关",
src: "images/401.jpeg"
}
]
}
);
// 兼容大屏幕适配
function fitEaselInfo() {
onestroke.viewLeft = document.querySelector(".wrapper").getBoundingClientRect().left;
onestroke.ratio = 375 / Math.min(document.body.clientWidth, 540);
}
window.addEventListener("resize", fitEaselInfo);
fitEaselInfo();
// 通关
onestroke.event.on("pass", function() {
console.log("通关");
// 进入下一关
onestroke.next();
});
// 进入新的一关
onestroke.event.on("start", function(curLevel) {
gameBack.innerHTML = curLevel.name;
});
// gameover
onestroke.event.on("gameover", function() {
alert("GAMEOVER");
});
// 关卡加载中
onestroke.event.on("level-loading", function() {
console.log("关卡" onestroke.curLevel " 加载中...")
});
onestroke.event.on("level-loaded", function() {
console.log("关卡" onestroke.curLevel " 加载成功")
});
// showOneStroke
let showOneStroke = function() {
levels.style.transform = game.style.transform = "translate(-100%, 0)";
}
// hideOneStroke
let hideOneStroke = function() {
levels.style.transform = game.style.transform = "translate(0, 0)";
}
// 进入对应的关卡
let enter = function(index) {
showOneStroke();
onestroke.enter(index);
}
// 关卡列表初始化
let initLevels = function() {
let str = '';
onestroke.config.levels.forEach(
function(level, index) {
str = '
\
' (index 1) '\
' level.name '\
'
}
);
levels.innerHTML = str;
// 返回事件
gameBack.addEventListener("click", function() {hideOneStroke()});
// 重新开始
document.querySelector(".game-control-reset").addEventListener("click", function() {onestroke.restart()});
// 回退
document.querySelector(".game-control-rollback").addEventListener("click", function() { onestroke.rollback()});
}
// 调用初始化列表
initLevels();
html5初学者小游戏源代码,html5 一个“一笔画”小游戏源码(通关)相关推荐
- HTML5期末大作业:艺术品商城网站设计——艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页 使用html+css实现一个静态页面(含源码)
HTML5期末大作业:艺术品商城网站设计--艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有 个 ...
- HTML5期末大作业:化妆品电商网站设计——化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码)
HTML5期末大作业:化妆品电商网站设计--化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有 个人. 美食. 公司 ...
- HTML5期末大作业:餐饮美食网站设计——餐饮美食-武昌鱼(8页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码)
HTML5期末大作业:餐饮美食网站设计--餐饮美食-武昌鱼(8页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有 个人. 美食. 公司 ...
- Python版基于pygame的玛丽快跑小游戏源代码,玛丽冒险小游戏代码,支持双人模式
基于pygame的玛丽快跑小游戏源代码,玛丽冒险小游戏代码,支持双人模式 按空格进入单人模式,按't'进入双人模式,双人模式下玛丽1采用空格键上跳,玛丽2采用方向上键上跳. 完整代码下载地址:Pyth ...
- HTML趣味钢琴小游戏源代码,钢琴琴谱练习小游戏源代码
HTML趣味钢琴小游戏源代码,钢琴琴谱练习小游戏源代码 完整代码下载地址:HTML趣味钢琴小游戏源代码,钢琴琴谱练习小游戏源代码 index.html <!DOCTYPE html> &l ...
- 【实战HTML5与CSS3】免费制作威客页面啦(附源码)
[实战HTML5与CSS3]免费制作威客页面啦(附源码) 原文 http://www.cnblogs.com/yexiaochai/archive/2013/05/05/3060770.html 前言 ...
- [转载]腾讯云大学大咖分享 |小游戏联机对战引擎实践(含源码)
一个高效率的学习安排,应该是:10%时间,了解行业和技术的发展动态:40%的时间,看教程和慕课:30%的时间,看别人写的代码样例.这三件事做完,最后20%时间再动手编程.看资料和教程,占多数时间.资料 ...
- JAVA毕业设计HTML5“忆红楼梦之味”网站设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计HTML5"忆红楼梦之味"网站设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计HTML5"忆红楼梦之味"网站设计与实现计 ...
- 13.在一个数组中,每一个数左边比当前数小的数累加起来,叫做这个数组的小和。求一个数组的小和。(左神算法基础班源码)
package basic_class_01; /*** *小和问题在一个数组中,每一个数左边比当前数小的数累加起来,叫做这个数组的小和.求一个数组的小和.例子:[1,3,4,2,5]1左边比1小的数 ...
- 微信小程序|基于小程序+C#制作一个考试答题小程序
基于小程序+C#制作一个考试答题小程序打破传统线下考试答题的边界线问题,使考试不用再局限与某个统一的场所,只要有设备,哪里都能考试. 一.小程序
最新文章
- 写入访问权限冲突_全面介绍 Linux 权限
- golang go build 报错 import cycle not allowed
- “科研女神”颜宁当选美国科学院外籍院士
- windows 技术篇 - uispy 工具获取和使用,windows窗口属性快捷查看工具
- python打地鼠游戏代码100行_PythonStudy_打地鼠游戏代码
- 数据结构二:排序(快速排序和堆排序)
- 两个条件一个为false就运行_设置一个自动运行网格条件单
- Android之CheckBox复选框控件使用inelayout.xml Xml代码
- dnf强化卷代码_这行代码告诉你!为什么你地下城与勇士(DNF)的装备强化老是失败?...
- HTTPS是对称加密还是非对称加密?
- git bash here 找不到应用程序_git 简单命令
- 面向对象之封装的成本价值
- 用Python玩转微信(一)
- 【优化调度】基于matlab粒子群算法求解水火电系统经济、环境运行单目标调度优化问题【含Matlab源码 1138期】
- 一个人的生命周期,就是人的一生
- HbuilderX导入项目运行到微信小程序代码杂乱问题
- mp4转换m3u8格式php,【过程】第一次将m3u8文件转换为MP4文件经验分享
- java开发微信公众号图片上传功能,不吃透都对不起自己
- 计算机报税流程,河南地税电子税务局电脑版纳税申报操作流程(图文)
- 全球及中国ICP-OES光谱仪行业产销需求与投资前景预测报告2022~2027年