-
2017-11-15 00:00
- 11
- 35
- 0
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset='GBK'>
<title></title>
<style>
.grid-content{
width:480px;
height:480px;
padding:20px;
text-align:center;
position:relative;
margin:50px auto;
}
.grid{
width:100px;
height:100px;
margin-right:20px;
border-radius:5px;
background-color:grey;
position:absolute;
}
.contentClassName{
border-radius:5px;
font-family:'微软';
font-size:25px;
font-weight:bold;
text-align:center;
line-height:100px;
position:absolute;
}
</style>
<script>
window.onload=newGame;
var board=new Array();
function newGame(){
init();
generateNumber();
generateNumber();
}
function init(){
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
var grid=document.getElementById('grid-'+i+'-'+j);
console.log(grid);
grid.style.position='absolute';
grid.style.cssText='left:'+(20+120*j)+'px;'+'top:'+(20+120*i)+'px';
console.log(grid.style.left);
}
}
for(var i=0;i<4;i++){
board[i]=new Array();
for(var j=0;j<4;j++){
board[i][j]=0;
console.log('2');
}
}
numberCell();
}
function numberCell(){
var gridContent=document.getElementById('gridContent');
var clear = document.getElementsByClassName('contentClassName');
for (var i = clear.length; i < 0; i--) {
clear[i].parent.removeChild('clear[i]');
}
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
var content=document.createElement('div');
content.id='gridcontent-'+i+'-'+j;
content.className='contentClassName';
gridContent.appendChild(content);
console.log(content.id);
var numbercell=document.getElementById('gridcontent-'+i+'-'+j);
console.log(numbercell);
if(board[i][j]==0){
numbercell.style.height='0px';
numbercell.style.width='0px';
numbercell.style.top=(20+120*i)+'px';
numbercell.style.left=(60+120*j)+'px';
}else{
numbercell.style.width='100px';
numbercell.style.height='100px';
numbercell.style.top=(20+120*i)+'px';
numbercell.style.left=(20+120*j)+'px';
numbercell.style.backgroundColor=getBackground(board[i][j]);
numbercell.style.color=getColor(board[i][j]);
numbercell.innerText=board[i][j];
}
}
}
}
function getColor(number){
if(number<=4){
return 'black';
return 'white';
}
}
function getBackground(number){
switch(number){
case 2:return 'blue';break;
case 4:return 'grey';break;
case 8:return 'pink';break;
case 16:return 'red';break;
}
return black;
}
function generateNumber(){
if(nospace(board))
return false;
ranX=parseInt(Math.floor(Math.random()*4));
ranY=parseInt(Math.floor(Math.random()*4));
while(true){
if(board[ranX][ranY]==0)
break;
ranX=parseInt(Math.floor(Math.random()*4));
ranY=parseInt(Math.floor(Math.random()*4));
}
var ranNum=Math.random()<0.5?2:4;
board[ranX][ranY]=ranNum;
showAnimate(ranX,ranY,ranNum);
return true;
}
function showAnimate(x,y,num){
var numberCell=document.getElementById('gridcontent-'+x+'-'+y);
numberCell.style.backgroundColor=getBackground(num);
numberCell.style.color=getColor(num);
numberCell.innerText=num;
numberCell.style.width='100px';
numberCell.style.height='100px';
numberCell.style.top=(20+120*x)+'px';
numberCell.style.left=(20+120*y)+'px';
}
function nospace(board){
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
if(board[i][j]==0)
return false;
return true;
}
}
}
document.onkeydown=function(e){
e=e||window.event;
switch(e.keyCode){
case 37:
if(moveLeft()){
console.log(e.keyCode);
generateNumber();
}
break;
case 38:
if(moveUp()){
generateNumber();
isgameover();
}
break;
case 39:
if(moveRight){
generateNumber();
isgameover();
}
break;
case 40:
if(moveDown){
generateNumber();
isgameover();
}
break;
}
}
function moveLeft(){
if(!canMoveleft(board)){
return false;
}
for(var i=0;i<4;i++){
for(var j=1;j<4;j++){
if(board[i][j]!=0){
for(var k=0;k<j;k++){
if(board[i][k]==board[i][j]&&noBlock(i,k,j,board)){
showNumberWithAnimate(i,j,i,k);
board[i][k]=board[i][k]+board[i][j];
board[i][j]=0;
console.log('33');
continue;
}
else if(board[i][k]==0&&noBlock(i,k,j,board)){
showNumberWithAnimate(i,j,i,k);
board[i][k]=board[i][j];
board[i][j]=0;
console.log('44');
continue;
}
}
}
}
}
numberCell();
return true;
console.log(board);
}
function canMoveleft(board){
for(var i=0;i<4;i++){
for(var j=1;j<4;j++){
if(board[i][j]!=0){
if(board[i][j-1]==0||board[i][j-1]==board[i][j]){
return true;
}
return false;
}
}
}
}
function noBlock(row,col1,col2,board){
for(var i=col1;i<col2;i++){
if(board[row][i]!=0){
return false;
}
return true;
}
}
function showNumberWithAnimate(fromx,fromy,toyx,toyy){
var cell=document.getElementById('gridcontent-'+fromx+'-'+fromy);
cell.style.top=(20+120*toyx)+'px';
cell.style.left=(20+100*toyy)+'px';
}
</script>
</head>
<body>
<div class='wrap'>
<div class='grid-content' id='gridContent'>
<div class='grid' id='grid-0-0'>
</div>
<div class='grid' id='grid-0-1'>
</div>
<div class='grid' id='grid-0-2'>
</div>
<div class='grid' id='grid-0-3'>
</div>
<div class='grid' id='grid-1-0'>
</div>
<div class='grid' id='grid-1-1'>
</div>
<div class='grid' id='grid-1-2'>
</div>
<div class='grid' id='grid-1-3'>
</div>
<div class='grid' id='grid-2-0'>
</div>
<div class='grid' id='grid-2-1'>
</div>
<div class='grid' id='grid-2-2'>
</div>
<div class='grid' id='grid-2-3'>
</div>
<div class='grid' id='grid-3-0'>
</div>
<div class='grid' id='grid-3-1'>
</div>
<div class='grid' id='grid-3-2'>
</div>
<div class='grid' id='grid-3-3'>
</div>
<div class='grid' id='grid-4-0'>
</div>
<div class='grid' id='grid-4-1'>
</div>
<div class='grid' id='grid-4-2'>
</div>
<div class='grid' id='grid-4-3'>
</div>
</div>
</div>
</body>
</html>
0
打赏
收藏
点击回答
您的回答被采纳后将获得：提问者悬赏的 11 元积分
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部