您的位置：首页 > Web前端 > JQuery

jquery,2048小游戏粗制版

2015-11-12 18:44 573 查看

写然后知不足，写了一个丑丑的简简单单的2048，代码在下面。

和原版不一样的地方就是原版如果有连续能消去的不会一次消去，我的这个用递归弄得可以一步消去了，比如4个2在一行，方向键按下之后原版会变成2个4，再按一下才会变成一个8，我的就会直接变成1个8。因为是小游戏所以递归带来的性能问题就没那么严重啦~

这个版本只能在电脑上试玩，浏览器兼容性我也没有全部测试。方向键控制上下左右。

<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body{
background-color: #000;
}
#playBar{
margin: 0 auto;
height: 440px;
width: 440px;
background-color: #9900cc;
}
#scoreBar{
margin: 0 auto;
width: 440px;
height: 50px;
line-height: 50px;
background-color: #9900cc;
color: white;
font-size: 50px;
text-align: center;
}
.window{
height: 100px;
width: 100px;
background-color: #ccc;
float: left;
margin: 5px;
color: #000;
text-align: center;
line-height: 100px;
font-size: 50px;
font-weight: bolder;
}
.hasNum2{
background-color: #ffccff;
}
.hasNum4{
background-color: #cc66cc;
}
.hasNum8{
background-color: #ff9900;
}
.hasNum16{
background-color: #ff6600;
}
.hasNum32{
background-color: #ff3333;
}
.hasNum64{
background-color: #ff0000;
}
.hasNum128{
background-color: #cc3399;
}
.hasNum256{
background-color: #660066;
}
.hasNum512{
background-color: #0000ff;
}
.hasNum1024{
background-color: #000099;
}
.hasNum2048{
background-color: #ffff66;
}
.hasNum4096{
background-color: #ffff00;
}
</style>
</head>
<body>
<div id="scoreBar">Score:0</div>
<div id="playBar">
<div id="0" class="window"></div>
<div id="1" class="window"></div>
<div id="2" class="window"></div>
<div id="3" class="window"></div>
<div id="4" class="window"></div>
<div id="5" class="window"></div>
<div id="6" class="window"></div>
<div id="7" class="window"></div>
<div id="8" class="window"></div>
<div id="9" class="window"></div>
<div id="10" class="window"></div>
<div id="11" class="window"></div>
<div id="12" class="window"></div>
<div id="13" class="window"></div>
<div id="14" class="window"></div>
<div id="15" class="window"></div>
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
score = 0;

function noEquals(step,starter,ender){
var hasEqualMembers = 1;
for(var i=starter;i<ender;i+=step){
if($("#"+i).text() == $("#"+(i+step)).text()){
hasEqualMembers = 0;
}
}
return hasEqualMembers;
}
function birthNewDiv(){
var full = windows.every(function(item,index,array){
return (item==1);
})
if(!full){
var numOfNew = Math.floor(Math.random() * 16);
//1代表那个格子里有料~
while(windows[numOfNew] == 1){
//已经有料了，重新找个没料的格子吧~
numOfNew = Math.floor(Math.random() * 16);
}
windows[numOfNew] = 1;
//初始化两个2
//这里如果需要像有的2048那样小几率出现4就加个Math.random() < (你想要的几率)? 4:2 就可以，但是我就一直2着就好了
random$("#"+numOfNew).text(2).addClass("hasNum"+($("#"+numOfNew).text())).hide().fadeIn("slow");
}else{
//如果满了，就判断是否相邻的格子中有相等即可消去的，如果没有，就说明游戏结束了，报分即可。
if(noEquals(1,0,3)&&noEquals(1,4,7)&&noEquals(1,8,11)&&noEquals(1,12,15)&&noEquals(4,0,12)&&noEquals(4,1,13)&&noEquals(4,2,14)&&noEquals(4,3,15)){
//都没有相等的，游戏结束啦
alert("Game Over！Your Score is "+score);
}
}
}
var windows = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
birthNewDiv();
birthNewDiv();

function change(step,starter){
for(var iter = starter + step * 2;iter != starter - step;iter-=step){
if(windows[iter] == 1){
var tempTxt = $("#"+iter).text();
for(var temp = starter + 3 * step;temp != iter;temp -= step){
if(windows[temp] == 0){
windows[temp] = 1;
windows[iter] = 0;
$("#"+temp).addClass("hasNum"+tempTxt).text(tempTxt);
$("#"+iter).removeClass().addClass("window").text("");
break;
}
}
}
}
}
function mulTwo(step,starter){
//位置移动后，接下来就是相邻相等块的合并了
for(var iter = starter + step * 2;iter != starter-step;iter-=step){
var nextOne = iter + step;
if($("#"+iter).text() == $("#"+nextOne).text() && $("#"+iter).text() != ""){
var tempTxt = $("#"+iter).text();
score += 2*tempTxt;
//百度之后知道了html()方法，之前也在书里看过，到用的时候就又忘记了，所以还是得多写。
$("#scoreBar").html("Score:"+score);

$("#"+iter).removeClass().addClass("window").text("");
$("#"+nextOne).text(2*tempTxt).addClass("hasNum"+$("#"+nextOne).text());
windows[iter] = 0;
iter += step;
//出现了无法合并一次之后接着合并的bug,然后就写了下面这两行代码...
change(step,starter);
mulTwo(step,starter);
}
}
}
window.onkeyup = function(){
switch((event||window.event).keyCode){
case 37://左
change(-1,3);
change(-1,7);
change(-1,11);
change(-1,15);
mulTwo(-1,3);
mulTwo(-1,7);
mulTwo(-1,11);
mulTwo(-1,15);
birthNewDiv();
break;
case 38://上
change(-4,12);
change(-4,13);
change(-4,14);
change(-4,15);
mulTwo(-4,12);
mulTwo(-4,13);
mulTwo(-4,14);
mulTwo(-4,15);
birthNewDiv();
break;
case 39://右
change(1,0);
change(1,4);
change(1,8);
change(1,12);
mulTwo(1,0);
mulTwo(1,4);
mulTwo(1,8);
mulTwo(1,12);
birthNewDiv();
break;
case 40://下
change(4,0);
change(4,1);
change(4,2);
change(4,3);
mulTwo(4,0);
mulTwo(4,1);
mulTwo(4,2);
mulTwo(4,3);
birthNewDiv();
break;
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航