html做2048游戏的代码,原生JS编写的2048小游戏代码

js代码

// 模块化开发思路

var json={

// 创建初始化函数

init:function(){

var otab= document.querySelector('.tab'),

str='',

id=1;//返回文档指定的css元素,并保存

for(var i=0;i<4;i++){

str+='

';

for(var j=0;j<4;j++){

str +='

';

}

str +='

';

}

otab.innerHTML=str;

this.randomNum();

this.randomNum();

this.result();

},

//创建一个任意区间的随机函数

myRandom:function(min , max){

return Math.round(Math.random() * (max-min) + min);

},

//随机在格子上生成一个数字

randomNum : function(){

var num = this.myRandom(1,16);

ogrid=document.getElementById(num);

if(ogrid.innerHTML ==''){

ogrid.innerHTML= this.myRandom(1,2)*2;

}else{

this.randomNum();

}

},

//上键

top:function(){

for(var i=1;i<=4;i++){

for(var j=i;j<=i+12;j+=4){

for(k=j;k>4;k-=4){

this.change(document.getElementById(k -4),

document.getElementById(k));

}

}

}

},

//下键

bottom:function(){

for(var i=1;i<=4;i++){

for(var j = i+12;j>=i;j -=4){

for(var k = j;k < 13;k +=4){

this.change(document.getElementById(k +4),

document.getElementById(k));

}

}

}

},

//左键

left:function(){

for(var i=1;i<=13;i+=4){

for(var j=i; j<= i+3; j++){

for(var k=j; k>i;k--){

this.change(document.getElementById(k -1),

document.getElementById(k));

}

}

}

},

//右键

right:function(){

for(var i=1;i<=13;i +=4){

for(var j = i+4; j>=i;j--){

for(var k=j;k

this.change(document.getElementById(k +1),

document.getElementById(k));

}

}

}

},

//移动合并检测函数

change :function(before,after){

//移动

if(before.innerHTML == '' && after.innerHTML != ''){

before.innerHTML= after.innerHTML;

after.innerHTML='';

}

//合并

if(before.innerHTML != '' && before.innerHTML ==

after.innerHTML){

before.innerHTML *=2;

after.innerHTML='';

}

},

//改变颜色计算结果函数

result:function(){

var color={'':'#fff','2':'#0f0','4':'#00ccff','8':'#ff9900',

'16':'#00cc66','32':'#ffcccc','64':'#ff33ff','128':'#0066cc',

'256':'#6633cc','512':'#ff0099','1024':'#990033','2048':'#6600ff',

'4096':'#cc0066'},

score=0;

for(var i = 1 ; i <= 16 ;i++){

var ogrid=document.getElementById(i);

ogrid.style.backgroundColor=color[ogrid.innerHTML];

score += ogrid.innerHTML * 10;

}

document.querySelector('.score').innerHTML=score;

}

}

window.οnlοad=json.init();//加载完成后调用init

document.οnkeydοwn=function(e){

if(/38/.test(e.keyCode) ) json.top();

if(/40/.test(e.keyCode) ) json.bottom();

if(/37/.test(e.keyCode) ) json.left();

if(/39/.test(e.keyCode) ) json.right();

if(/13/.test(e.keyCode) ) json.init();

json.randomNum();

json.result();

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的微信小程序翻牌游戏项目实例: 1. 在微信开发者工具中创建一个新的小程序项目,选择“小程序开发框架”为“原生框架”,并填写相应的项目信息。 2. 在项目根目录下创建一个名为“pages”的文件夹,用于存放小程序的页面。 3. 在“pages”文件夹下创建一个名为“index”的文件夹,用于存放小程序的首页。 4. 在“index”文件夹下创建一个名为“index.wxml”的文件,用于编写小程序的页面结构。 5. 在“index”文件夹下创建一个名为“index.wxss”的文件,用于编写小程序的页面样式。 6. 在“index”文件夹下创建一个名为“index.js”的文件,用于编写小程序的页面逻辑。 7. 在“index.wxml”文件中编写小程序的页面结构,例如: ```html <view class="container"> <view class="card" bindtap="flipCard" data-index="0"> <image class="front" src="{{cards[0].front}}" /> <image class="back" src="{{cards[0].back}}" /> </view> <view class="card" bindtap="flipCard" data-index="1"> <image class="front" src="{{cards[1].front}}" /> <image class="back" src="{{cards[1].back}}" /> </view> <!-- 其他卡牌 --> </view> ``` 8. 在“index.wxss”文件中编写小程序的页面样式,例如: ```css .container { display: flex; flex-wrap: wrap; justify-content: center; } .card { width: 100px; height: 100px; margin: 10px; position: relative; } .front, .back { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: transform 0.5s ease-in-out; transform-style: preserve-3d; backface-visibility: hidden; } .front { transform: rotateY(0deg); } .back { transform: rotateY(180deg); } ``` 9. 在“index.js”文件中编写小程序的页面逻辑,例如: ```javascript Page({ data: { cards: [ { front: 'front1.png', back: 'back.png', flipped: false }, { front: 'front2.png', back: 'back.png', flipped: false }, // 其他卡牌 ], flippedCards: [] }, flipCard: function (event) { var index = event.currentTarget.dataset.index; var card = this.data.cards[index]; if (!card.flipped && this.data.flippedCards.length < 2) { card.flipped = true; this.data.flippedCards.push(card); this.setData({ cards: this.data.cards }); if (this.data.flippedCards.length == 2) { setTimeout(this.checkMatch, 1000); } } }, checkMatch: function () { var card1 = this.data.flippedCards[0]; var card2 = this.data.flippedCards[1]; if (card1.front == card2.front) { card1.matched = true; card2.matched = true; this.setData({ cards: this.data.cards }); } else { card1.flipped = false; card2.flipped = false; this.setData({ cards: this.data.cards }); } this.data.flippedCards = []; } }); ``` 以上代码实现了一个简单的翻牌游戏,玩家需要翻开两张卡牌,如果两张卡牌的正面图片相同,则这两张卡牌会被消除,否则这两张卡牌会被翻回去。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值