大背景概要
别踩Chalancon那个格斗游戏坚信他们都玩过，那个是如前所述HTML5打造出的单纯迷你格斗游戏，在PC端和终端端都能运转，适应环境多种不同网络平台，那时他们采用原生植物JS配搭JQuery构筑那个迷你格斗游戏–别踩Chalancon。
一、路子预测
总体网页是两个大的正方形，宽度比率约莫是3：2，接着格斗游戏已经开始，急速有Chalancon迫降，接着带队是4个板，几块白色股，余下四块是紫色股，透过股的点选该事件存取，接着认定是甚么色调，如果是紫色的，格斗游戏完结（Game Over), 不然玩者点数加1；
二、网页构筑
2.1 HTML层
<div class=”wrapper”> <div id=”go”> <a href=”javaScript:void(0)” id=”go”>Game Start</a> </div> <div id=”main”></div> </div>2.2 CSS层
在式样增设前却是先介绍大体内部结构,如下右图:
自上而下增设式样
*{ margin:0; padding:0; }wrapper式样增设式样
.wrapper{ margin:150px auto; width:400px; height:600px; border:1px solid #ccc; position: relative; overflow: hidden; }wrapper上面的go的增设式样
#go{ width:100%; position: absolute; top:0; text-align: center; z-index:99; }已经开始格斗游戏按钮增设式样
#go a{ display:block; height:100px; width:400px; color:cyan; background-color: #000000; text-decoration: none; border-bottom:3px dashed #eee; font-size:60px; font-weight:600; }main(方块)增设式样
#main{ width:400px; height:600px; position: relative; top:-150px; /* border:1px solid black; */ }创建出来的每带队方块增设式样
.row{ width:400px; height:150px; }带队中的四个小方块的增设式样
.row div{ width:99px; height:149px; border-left:1px solid #222; border-bottom:1px solid #222; float: left; cursor: pointer; }在增设好式样之后,得到的大体界面如下表所示右图:
可以看到界面式样比较单纯,他们的想法是点选Start Game 按钮后方块自动迫降,所以屏幕比较空(暂时)。
2.3 JS层
js层主要用来控制网页产生动态效果;比如产生方块,以及方块的终端等等;
= document.getElementById(go); var speed = 5, num = 0, timer, flag = true; // 增设初始变量 var colors = [red, green, black, blue]; // 增设存放色调的数组这里存放色调的数组不需要紫色,每两个初始化出来的方块不增设大背景色调,它默认是紫色;
2.3.1创建每带队div元素
前面他们说过,带队是四个方块,比率和大方块一样(3:2),它的宽度是:{width: 100px ; height: 150px};
function cDiv() { var oDiv = 4); oDiv.setAttribute(class, row); // 增设行class类名 for (var j = 0; j < 4; j++) { // for循环生成一行四个div var iDiv = document.createElement(div); oDiv.appendChild(iDiv); // 将每两个小div插入每带队中 } if (main.childNodes.length == 0) { // 根据父级中是否有子元素 插入新生成的行 main.appendChild(oDiv); // 如果父级为空 直接插入 } else { main.insertBefore(oDiv, main.childNodes[0]); // 如果父级有元素 将新生成的带队插入到已有行数的最前面 } var clickDiv = main.childNodes[0].childNodes[index]; // 根据随机数 增设带队中有色调的div clickDiv.setAttribute(class, i); // 将此元素增设class类名 作为需要点选的标记 clickDiv.style.backgroundColor = colors[index]; // 同时增设上大背景色调 }2.3.2点选该事件函数封装
function bindEvent() { main.addEventListener(click, function (event) { // 给main添加点选该事件 if (flag) { // 根据flag值判断是否可以点选 var tar = event.target; // 获得到点选的源该事件 if (tar.className == i) { // 判断点选的块是否为有色调的 tar.style.backgroundColor = #bbb; // 改变大背景色调 tar.classList.remove(i); // 移除class类名 num++; // 计数++ } else { alert(格斗游戏完结，得分： + num); // 如果点到了紫色的块 格斗游戏完结 clearInterval(timer); flag = false; } if (num % 10 == 0) { // 如果当前分数为10的倍数 速度++ speed++; } } }) }2.3.4 方块终端函数封装
function move() { clearInterval(timer); timer = setInterval(function () { // 增设定时器 var step = parseInt(main.offsetTop) + speed; // 利用top值终端main区域 main.style.top = step + px; if (parseInt(main.offsetTop) >= 0) { // 如果main区域终端到可视区域 创建带队新的元素 cDiv(); main.style.top = -150px; // 同时将main区域终端到可视区域上方 } var len = main.childNodes.length; // 获得mian区域内的行数 if (len == 6) { // 如果main区域内行数为6 即显示区域四行 上面新生成带队 上面带队 for (var i = 0; i < 4; i++) { // 遍历最后带队的每两个div if (main.childNodes[len – 1].children[i].classList.contains(i)) { // 如果其中有两个包含没有被点选的 格斗游戏完结 alert(格斗游戏完结，得分： + num); clearInterval(timer); flag = false; // 格斗游戏完结后不可以继续点选 } } main.removeChild(main.childNodes[len – 1]); // 将展示过后的每带队移除 } }, 20) bindEvent(); // 点选该事件 }在函数里面第一句就是clearInterval(timer);防止定时器多开;
2.3.5 格斗游戏已经开始
// 已经开始按钮点选 已经开始终端 创建每带队元素 function clickStart() { go.addEventListener(click, function () { go.style.display = none; move(); }); } clickStart();大体效果如图右图:
那个是采用到HbuilderX中的内置浏览器的界面,格斗游戏完结效果如上图右图;
三、总结
本文他们采用到原生植物js打造出了单纯触屏格斗游戏——别踩Chalancon，对于格斗游戏有单纯的改动。总体来说首先他们需要增设好格斗游戏界面大体内部结构和式样,接着透过原生植物js控制方块的产生终端,以及点选等等,最终才呈现了两个合适的完整的界面效果;感兴趣的小伙伴可以去试一下。
