- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- 用H5怎样写一个简单的2048游戏
用H5怎样写一个简单的2048游戏
Admin 2022-11-29 群英技术资讯 288 次浏览
今天小编跟大家讲解下有关“用H5怎样写一个简单的2048游戏”的内容 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。一、游戏介绍
相信大多数读者都玩过一款小游戏 2048，这款数字小游戏在几年前很是流行。2048是2014年由Gabriele Cirulli利用周末的时间写出的，果然大佬就是大佬，一个周末就写出了这么经典的游戏。游戏的玩法非常简单，利用上、下、左、右移动的方式拼出2048即算赢得游戏，因为游戏上手简单同时赢得游戏又存在一定难度，所以游戏的可玩性很高，本人当时也是十分喜爱这款游戏，下面讲解下如何用H5去实现这款游戏。
二、游戏界面
游戏界面十分简单，我截图了进行中的几个场景，基本由一块矩形游戏区，一个按钮及一个分数展示区域组成。
三、代码设计
H5代码：
H5代码十分简单，主要用16个div代表16个数字方块，再加上另外restart按钮区，还有一个分值展示区域。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>2048</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" language="javascript" src="js/jquery-3.6.0.min.js">
document.addEventListener('plusready', function(){
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
});
</script>
<script type="text/javascript" language="javascript" src="js/gamerun.js"></script>
</head>
<body onload="init()">
<div class="authorized" >
<p>2048</p></div>
<div class="restart" ontouchstart="restart()">Restart </div>
<div class="score">
<p class="maxnum" id="num_p">最高值</p>
<p class="maxnum" id="num_v">0</p>
</div>
<article class="game">
<div class="square" id="f1"> </div>
<div class="square" id="f2"> </div>
<div class="square" id="f3"> </div>
<div class="square" id="f4"> </div>
<div class="square" id="f5"> </div>
<div class="square" id="f6"> </div>
<div class="square" id="f7"> </div>
<div class="square" id="f8"> </div>
<div class="square" id="f9"> </div>
<div class="square" id="f10"></div>
<div class="square" id="f11"> </div>
<div class="square" id="f12"></div>
<div class="square" id="f13"> </div>
<div class="square" id="f14"></div>
<div class="square" id="f15"> </div>
<div class="square" id="f16"> </div>
</article>
<audio id="yin" src="media/anniu.mp3"autoplay="autoplay"> </audio>
<footer></footer>
</body>
</html>js代码：
js代码相对复杂一些，游戏处理逻辑主要可以分成以下两块：
（1）移动处理逻辑，游戏玩法是通过上下左右移动进行数字的相加变换。那么首先就会有上滑、下滑、左滑、右滑四个处理函数。上下滑动的时候，将相邻两行相同的数值进行相加；左右滑动的时候，将相邻两列相同的数值进行相加。
（2）移动判断逻辑。
首先第一类判断逻辑是判断是否可以移动。整个游戏区是 4X4的格局分布，那么在上下左右移动的时候我们会通过相邻的两行或者两列是否存在相同的数值去判断，如果有则可以继续移动，如果没有，则不可以继续移动。
其次，我们需要判断游戏是否可以继续，如果整个游戏区的数值方块已经被占满，上下左右都没有移动空间了，那么游戏就是结束了，game over。
（3）其余逻辑
其余的还剩一些比较简单的逻辑，颜色分配函数、重新开始函数、最大分值记录函数等。
// JavaScript Document
var flag=[false,false,false,false,false,false,false,false,
false,false,false,false,false,false,false,false];
var ds=document.getElementsByClassName("square");
var color=["#FF9966","#FFCCCC","#CC9966","#99CCCC","#99CC99","#99CCFF","#CCCCFF","#FFCC00","#333399","#CC9999","#009999","#996666","#CCCCCC","#CCCCFF","#99CC99"];
var max_num=parseInt("2");
var lose_view=false;
function init() //初始化界面，生成2个数字方块
{
var i=Math.round(Math.random()*16);
var j=Math.round(Math.random()*16);
while(i==j)
{ j=Math.round(Math.random()*16);
}
ds[i].style.backgroundColor="#FF7578";
ds[j].style.backgroundColor="#FF7578";
ds[i].innerHTML="2";
ds[j].innerHTML="2";
flag[i]=true;
flag[j]=true;
document.body.addEventListener('load',load(event),false);
//var msg=parseInt(document.getElementsByClassName("authorized")[0].innerText);
//alert(msg);
}
function max_score() //记录取得的最大分数
{
for (var i=0;i<ds.length;i++){
var c_num = parseInt(ds[i].innerText);
if( c_num > max_num )
{
max_num=c_num;
}
}
document.getElementById("num_v").innerHTML= max_num;
}
function restart() //重新开始游戏，重新回到初始化页面
{
if(lose_view==true)
{
var $h2=document.getElementById("reset1");
// var $bu2=document.getElementById("reset2");
var $par2=$("body");
$par2[0].removeChild($h2);
// $par2[0].removeChild($bu2);
lose_view=false;
}
for (var i=0;i<ds.length;i++)
{
ds[i].innerHTML="";
flag[i]=false;
ds[i].removeAttribute("style");
}
init();
}
function voice() //设置移动时产生的音效
{
var vs=document.getElementById("yin");
vs.play();
}
function load(event) // 捕捉屏幕滑动事件
{
$("body").on("touchstart", function(e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchend", function(e)
{
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = Math.floor(moveEndX - startX),
Y = Math.floor(moveEndY - startY);
if ( Math.abs(X)> Math.abs(Y))
{
if (Math.abs(X)>20)
{
if( X > 0)
{
rightgo();
voice();
}
else
{
leftgo();
voice();
}
}
}
else if(Math.abs(X)< Math.abs(Y))
{
if (Math.abs(Y)>20)
{
if(Y > 0)
{
bottomgo();
voice();
}
else
{
topgo();
voice();
}
}
}
}
);
}
function addcolor() //设置方块颜色
{ for(var i=0;i<ds.length;i++)
{
var ss=parseInt(ds[i].innerHTML);
switch(ss)
{
case 2:
ds[i].style.backgroundColor=color[0];
break;
case 4:
ds[i].style.backgroundColor=color[1];
break;
case 8:
ds[i].style.backgroundColor=color[2];
break;
case 16:
ds[i].style.backgroundColor=color[3];
break;
case 32:
ds[i].style.backgroundColor=color[4];
break;
case 64:
ds[i].style.backgroundColor=color[5];
break;
case 128:
ds[i].style.backgroundColor=color[6];
break;
case 256:
ds[i].style.backgroundColor=color[7];
break;
case 512:
ds[i].style.backgroundColor=color[8];
break;
case 1024:
ds[i].style.backgroundColor=color[9];
break;
case 2048:
ds[i].style.backgroundColor=color[10];
break;
case 4096:
ds[i].style.backgroundColor=color[11];
break;
case 8192:
ds[i].style.backgroundColor=color[12];
break;
case 16384:
ds[i].style.backgroundColor=color[13];
break;
default:
break;
}
}
}
function istop()
{ //判断是否可以继续上移，true则表示可以
var istop=false;
for(var i1=4;i1<16;i1++)
{
if(flag[i1]==true)
{
if(flag[i1-4]==true)
{
if( ds[i1].innerHTML==ds[i1-4].innerHTML )
{
istop=true;
}
}
else
{
istop=true;
}
}
}
return istop;
}
function isbottom() //判断是否可以继续下移，true则表示可以
{
var isbottom=false;
for(var i2=11;i2>=0;i2--)
{
if(flag[i2]==true)
{
if(flag[i2+4]==true)
{
if( ds[i2].innerHTML==ds[i2+4].innerHTML )
{
isbottom=true;
}
}
else
{
isbottom=true;
}
}
}
return isbottom;
}
function isleft(){ //判断是否可以继续左移，true则表示可以
var isleft=false;
for(var i3=0;i3<4;i3++)
{
for(var j3=0;j3<3;j3++)
{
if(flag[j3+4*i3+1]==true)
{
if(flag[j3+4*i3]==true)
{
if( ds[j3+4*i3].innerHTML==ds[j3+4*i3+1].innerHTML )
{
isleft=true;
}
}
else
{
isleft=true;
}
}
}
}
return isleft;
}
function isright(){ //判断是否可以继续右移，true则表示可以
var isright=false;
for(var i4=3;i4>=0;i4--)
{
for(var j4=2;j4>=0;j4--)
{
if(flag[j4+4*i4]==true)
{
if(flag[j4+4*i4+1]==true)
{
if( ds[j4+4*i4].innerHTML==ds[j4+4*i4+1].innerHTML )
{
isright=true;
}
}
else
{
isright=true;
}
}
}
}
return isright;
}
function islose()
{ //判断是否输掉游戏
if (lose_view==false) {
var los=0;
for(var i5=0;i5<16;i5++)
{ if(flag[i5]==true)
{
los++;
}
}
if(los==16)
{
var left=isleft();
var right=isright();
var top=istop();
var bottom=isbottom();
if((left||right||top||bottom)==false)
{
max_score();
var $h1=$('<div>');
//var $bu1=$('<button>');
var $par=$("body");
$h1.attr("id","reset1");
$h1.text('Game Over !');
//$bu1.text('重新开始');
//$bu1.attr("id","reset2");
$par.append($h1);
//$par.append($bu1);
var sleep = function(time) {
var startTime = new Date().getTime() + parseInt(time, 10);
while(new Date().getTime() < startTime) {}
};
lose_view=true;
//跳出失败提醒界面
//$bu1.click(restart());
//$("body").on("touchend",restart());
//$("body").on("touchstart",function (){
// $par[0].removeChild($h1[0]);
// $par[0].removeChild($bu1[0]);
// restart();
// });
}
}
}
}
function topgo(){
//上移
var top1=istop();
for(var ss6=0;ss6<3;ss6++)
{
for(var i6=4;i6<16;i6++)
{
if(flag[i6]==true)
{
if(flag[i6-4]==true)
{
if( ds[i6].innerHTML==ds[i6-4].innerHTML )
{ var sum=parseInt(ds[i6].innerHTML)*2;
ds[i6-4].innerHTML=sum;
flag[i6]=false;
ds[i6].removeAttribute("style");
ds[i6].innerHTML="";
}
}
else
{
ds[i6-4].innerHTML=ds[i6].innerHTML;
ds[i6-4].style.backgroundColor="#FF9E3E";
flag[i6-4]=true;
ds[i6].innerHTML="";
ds[i6].removeAttribute("style");
flag[i6]=false;
}
}
}
}
if(top1==true)
{
var kk1=Math.round(Math.random()*15);
while(flag[kk1]==true)
{
var kk1=Math.round(Math.random()*15);
}
ds[kk1].innerHTML="2";
flag[kk1]=true;
addcolor();
}
else
{
islose();
}
}
function leftgo(){ //左移
var left1=isleft();
for(var ss7=0;ss7<3;ss7++)
{
for(var i7=0;i7<4;i7++)
{
for(var j7=0;j7<3;j7++)
{
if(flag[j7+4*i7+1]==true)
{
if(flag[j7+4*i7]==true)
{
if( ds[j7+4*i7].innerHTML==ds[j7+4*i7+1].innerHTML )
{ var sum=parseInt(ds[j7+4*i7+1].innerHTML)*2;
ds[j7+4*i7].innerHTML=sum;
flag[j7+4*i7+1]=false;
ds[j7+4*i7+1].removeAttribute("style");
ds[j7+4*i7+1].innerHTML="";
}
}
else
{
ds[j7+4*i7].innerHTML=ds[j7+4*i7+1].innerHTML;
ds[j7+4*i7].style.backgroundColor="#FF9E3E";
flag[j7+4*i7]=true;
ds[j7+4*i7+1].innerHTML="";
ds[j7+4*i7+1].removeAttribute("style");
flag[j7+4*i7+1]=false;
}
}
}
}
}
if(left1==true){
var kk2=Math.round(Math.random()*15);
while(flag[kk2]==true)
{
var kk2=Math.round(Math.random()*15);
}
ds[kk2].style.backgroundColor="#FF9E3E";
ds[kk2].innerHTML="2";
flag[kk2]=true;
addcolor();
}
else
{
islose();
}
}
function rightgo(){ //右移
var right1=isright();
for(var ss8=0;ss8<3;ss8++)
{
for(var i8=3;i8>=0;i8--)
{
for(var j8=2;j8>=0;j8--)
{
if(flag[j8+4*i8]==true)
{
if(flag[j8+4*i8+1]==true)
{
if( ds[j8+4*i8].innerHTML==ds[j8+4*i8+1].innerHTML )
{ var sum=parseInt(ds[j8+4*i8+1].innerHTML)*2;
ds[j8+4*i8+1].innerHTML=sum;
flag[j8+4*i8]=false;
ds[j8+4*i8].removeAttribute("style");
ds[j8+4*i8].innerHTML="";
}
}
else
{
ds[j8+4*i8+1].innerHTML=ds[j8+4*i8].innerHTML;
ds[j8+4*i8+1].style.backgroundColor="#FF9E3E";
flag[j8+4*i8+1]=true;
ds[j8+4*i8].innerHTML="";
ds[j8+4*i8].removeAttribute("style");
flag[j8+4*i8]=false;
}
}
}
}}
if(right1==true){
var kk3=Math.round(Math.random()*15);
while(flag[kk3]==true)
{
var kk3=Math.round(Math.random()*15);
}
ds[kk3].style.backgroundColor="#FF9E3E";
ds[kk3].innerHTML="2";
flag[kk3]=true;
addcolor();
}
else
{
islose();
}
// var ss=max_score();
//alert(ss);
}
function bottomgo(){ //下移
var bottom1=isbottom();
for(var ss9=0;ss9<3;ss9++)
{
for(var i9=11;i9>=0;i9--)
{
if(flag[i9]==true)
{
if(flag[i9+4]==true)
{
if( ds[i9].innerHTML==ds[i9+4].innerHTML )
{ var sum=parseInt(ds[i9].innerHTML)*2;
ds[i9+4].innerHTML=sum;
flag[i9]=false;
ds[i9].removeAttribute("style");
ds[i9].innerHTML="";
}
}
else
{
ds[i9+4].innerHTML=ds[i9].innerHTML;
ds[i9+4].style.backgroundColor="#FF9E3E";
flag[i9+4]=true;
ds[i9].innerHTML="";
ds[i9].removeAttribute("style");
flag[i9]=false;
}
}
}
}
if(bottom1==true){
var kk4=Math.round(Math.random()*15);
while(flag[kk4]==true)
{
var kk4=Math.round(Math.random()*15);
}
ds[kk4].style.backgroundColor="#FF9E3E";
ds[kk4].innerHTML="2";
flag[kk4]=true;
addcolor()
}
else
{
islose();
}
}css代码：
@charset "utf-8";
/* CSS Document */
body,html{
height:100vw;
width: 100vw;
padding: 0;
margin: 0;
background:fixed;
background-color: papayawhip;
}
.authorized {
color: grey;
margin-left: 2%;
text-align:center;
font-style: normal;
font-size:210%;
margin-top:10%;
width: 30%;
}
.restart {
position: absolute;
margin-left: 5%;
width: 25vw;
height: 10vw;
padding-top:5%;
text-align:center;
font-size: 22px;
background-color:#99CCCC;
color: white;
border-radius: 5% 5% 5% 5%;
}
.score {
position: absolute;
margin-left: 50%;
padding-top: 2%;
width:45vw ;
background-color:#99CCCC;
color: white;
border-radius:5% 5% 5% 5%;
}
.maxnum {
position: relative;
float:left;
margin-left: 3%;
font-size: 120%;
text-align: center;
color: white;
width: 40%;
height: 4vw;
}
#num_p {
margin-top: 5%;
margin-left: 5%;
}
#num_v {
margin-top: 5%;
color:#ffd700;
font-size: 25px;}
.game{
position:absolute;
top:30% ;
left:2.5%;
width:95vw;
height:95vw;
background-color:#AAAA;
border-radius:5% 5% 5% 5%;
}
#reset1{
position:absolute;
top:30% ;
left:2.5%;
width:95vw;
height:60vw;
font-size: 40px;
background: rgba(250,250,250,0.5);
text-align: center;
padding-top: 35%;
color: grey;
border-radius:5% 5% 5% 5%;}
#reset2 {
position:absolute;
width: 30vw;
height: 13vw;
margin:70% 20% 30% 35%;
font-size: 20px;
padding-left: 0.125rem;
background-color: lightsalmon;
font-weight: bold;
color: white;
border-radius:5% 5% 5% 5%;
}
.square{
position:relative;
width:23%;
height:23%;
line-height: 180%; /*行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度 */
float:left;
background-color:#DDDDDD;
border-radius:15% 15% 15% 15%;
margin:1% 1% 1% 1%;
color:white;
text-align:center;
font-size:12vw;
}四、源码及APK
可以利用Hbuilder将H5代码打包成移动端应用，这样我们就可以在手机端安装APP愉快的玩耍了。下面是我打包的安卓包，点击自取：2048-touch_jb51.rar
关于“用H5怎样写一个简单的2048游戏”的内容今天就到这，感谢各位的阅读，大家可以动手实际看看，对大家加深理解更有帮助哦。如果想了解更多相关内容的文章，关注我们，群英网络小编每天都会为大家更新不同的知识。
标签：
H5实现2048
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
CSS的line-clamp属性限制文本的行数有什么要求
这篇文章主要介绍了CSS3属性 line-clamp控制文本行数的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
-
CSS中子元素相对父元素定位用什么方法
这篇文章主要介绍了css子元素相对父元素进行定位的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
-
CSS中给行元素背景添加颜色的方法是什么
设置方法：1、利用“background-color”属性设置，只需要给行元素添加“background-color:颜色值;”样式即可；2、利用background属性设置，只需要给行元素添加“background:颜色值;”样式即可。
-
使用纯CSS3做轮播图的方法是什么？
在各种网站上我们都能看到轮播图的应用，轮播图的设计和实现方法也有很多，之前我们也了解过不少，这篇继续给大家分享轮播图的实现方法，这里主要是使用使用纯CSS3实现轮播图。感兴趣的朋友就继续往下看吧。
-
CSS怎样实现带边框三角形，方法是什么？
这篇文章给大家分享的是CSS怎样实现带边框的三角形效果。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
