系列 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制作 之 移动消灭
发布评论