系列 HTML+JS GAME制作 之 移动消灭"/>
系列 HTML+JS GAME制作 之 移动消灭
系列 HTML+JS GAME制作
`
文章目录
- 系列 HTML+JS GAME制作
- 前言
- 一、原形描述
- 二、编码
- 1.棋盘制作
- 2.消灭
- 2.消灭事件绑定
- 总结
前言
`通过直接实战，练习所有编力，^ _ ^
一、原形描述
利用hover事件，制造鼠标经过一个40*40的宫格，消灭目标方块
二、编码
1.棋盘制作
思路：
利用for循环，形成40*40宫格，采用div+浮动布局，每40个div用一个父级div包裹
同时制造宫格对应的方块信息
细节：
父级 div 标签头需要循环变量 i 被40整除，并且最后一个子级div出现时不添加父级div头
父级div标签尾需要循环变量 i 被39整除，并且最后 i 等于0时不添加父级div尾
代码如下（示例）：
<script>
div=''; //创建棋盘存入变量字符串
boom=[]; //创建方块信息储存变量数组
for(i=0;i<40*40;i++) //0开始for循环40*40次
{if(i%40 == 0 & i !== 40*40-1 ){ //父级标签头细节div+='<div class="pre">'; //添加类名}div+='<div id="'+i+'"></div>'; //添加子集div，并添加id，方便绑定事件if( ( (i+1) %40 == 0) & i!==0 ){ //父级div标签尾细节div+='</div>'; }boom[i]=false; //方块信息，默认false，键名默认0开始}div+='<div id="start">开始</div>'; //加入开始按钮
$('body').html(div); //给body写入div棋盘标签
</script>
2.消灭
思路：
利用 Math.random() 函数生成随机数，范围0-4040之间，对应4040宫格方块信息，不允许重复，需要递归函数做判断
细节：
利用Math.random()需要Math.floor（向下取整）修正
递归时，调用自身函数直至条件选择结束
代码如下（示例）：
function getNum()
{num=Math.floor(Math.random() * 40*40); //目标方块，暂存变量，全局变量无需return if(boom[num]){ //若存在则递归getNum();}else{boom[num] = true;return num;}
}2.消灭事件绑定
思路：
根据方块id修改对应信息方块变量，并修改方块标识（颜色）
细节：
hover事件绑定必须使用局部变量，不然绑定事件标识会被修改
function start(){var boomNum= getNum();$('#'+boomNum).css('background-color','red'); //修改颜色css样式$('#'+boomNum).hover(function() //给目标方块绑定事件{$('#'+boomNum).css('background-color','black'); //若悬浮则修改方块信息变量，修改目标标识$('#'+boomNum).off('hover') //消除成功，关闭事件boom[boomNum]= false; //若悬浮则修改方块信息变量，修改目标标识}, function() { //可做消除动画，积分系统 });}$('#start').click(function() //打开开始按钮，触发目标生成，可写入sleep（）函数，调整出现事件
{start();
});总结
自行测试发现bug
随意修改规则 ^ = ^
css样式
<head><script src="./jquery.js"></script><title></title><style type="text/css" media="screen">div div{display:inline-block;width:10px;height:10px;margin:1px;background:black;}.pre{height:12px;margin:auto;width:530px;}#start{margin:20px auto;width:80px;height:20px;text-align:center;}}</style>
</head>更多推荐
系列 HTML+JS GAME制作 之 移动消灭
发布评论