最近在学习算法方面的知识,看到了一个由算法主导的小游戏,这里给大家分享下代码:

效果:

代码:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=360px,q n @ z * B \ puser-scalable=no" />
<title>2048小游戏</title>l , 2;
<style>
body,h1,div,table,tr,td{
margin: 0px;
padding: 0px;
}
body{
background-; 3 ^ T u ` & T ;color: rgb(0,0,0);
}
h1{h 0 S K
margin: 36px auto;
text-align: cO g t w , H Y /enter;
color: rgba(255,255,255,0.7);
font-family: "楷体";
font-size: 48px;
text-shadow: 1px 2px 3px rgb(134,134,134);
}
div{
margin: 12px auto;
line-height: 60px;
}
#box{
margin-top: -24px;
width: 240px;
height: 60px;
text-aligC D ?n: center;
font-weight: bold;
color: rgb(255,255,255);g % P O
}
#box input{
b; 6 i ] - m `orr w i T Mder: 3px solidz 0 ^ 1 rgb(255,255,255);
border-rab h ) Q E adius: 4px;
box-shadow: 1px 2px 3px rgb(234,234,234);
}
#box input:focus{
outline-style: none;
}
table{
margin: 24px auto;
border: 3px solid rgb(255,255,255);| 7 t D 4 7 C c
border-radius: 6px;
}
#random,td{
width: 60px;
height: 60p_ F H i # 3 4 K yx;
border: 2px solid rgb(255,255,255);\ ~ - R
border-radi- F r Mus: 18px;
text-align: cenx H 3 l ? 3 -ter;
font-weight: bold;
color: rgb(255,255,255);
}
td:hover{
cursor: pointer;
}
</style>
</head>- ( X ` w r
<body>
<h1>2 0 4 8</h1>
<!-- 显示得分及新游戏按钮 -->
&lp u wt;div id="2 . Tbox"&gE } k \ ; 9 T @ _t;
得分: <span id="span">0</span>

<input id="but" type="button" value="新游戏" />
</div>
<!-- 显示随机数 -->
<div id="random"></div>
<!-- 游戏主要布局 -->
<table border="3px">
<tr>
<td></td>
<td></td>
<td></td>
<td><S } Q i @ n;/td>
<m w X 4 P Y _ E |/tr>
<tr>
<td></tdZ B - f ) t ^ j X>j v m J N o
<td></td>
<+ B ( } 1 1 S E =;td></td&1 ` Vgt;
<td&3 4 f ? / _gt;</td>
&f @ _ a f s /lt;/tr>
<tr>
<A @ 5 T t xtd><& 1 h Q ! _ |/td>
&= i J v : L L : `lt;tdF a X u y \ M [></td>
<tdV T k A 4 a X % L></a ) 1td>
<td></td>
</tr>
<tr>
<td>&H I y *lt;/td>
<td></td>
<td></td>
<td></td7 U r 2 T>
&Y C 6 } | olt;/tr>
</table>
</body>
<scriW l a ! 1 I Ept type="text/javascript">f 4 * S 8 2 m z y
var span = document.getElementById("span");
var but = document.g2 4 .etElementById("but");
var td = document.getElementsByTagName("td");
//定义得分
var score = 0;
//定义随机3 a v L数
var random =I c # s 1 ` @ # document.V * 0 L ) V a (getElementById("randk X \ M .om");
var showNums = [2,4,8,16,32,64,128,256,512,1024];
var showNum = 0;
/A } Q U + C/定义背景色数组
var colors = ["rgb(255, 169, 182)","rgb(108, 251, 104)","rgb(255, 150, 46)","rgb(255, 121, 46)","rgb(255, 217, 46)",
"rgb(46, 200, 255)","rgb(46, 113, 255)","rgb(240, 46, 255)","rgb(46, 255, 175)","rgb(153, 134, 255)"];
//初7 i W l y &始化程序,生成随机数
/* start */
function init(){
var max = maxNum();
var num = 0;
for(var i=4;i > 0;i++){
if(max < Math.pow(2,i+1)){
num = parseInt(Math.random()*i);
break;
}else if(maxl K 2 h < 2048){
c% ~ $ 4 C & ] Sontinue;
}else{
num = parseInt(Math.random()*showNums.length);
break;
}
}
random.innerHTML = showNums[num];
color(rand1 E \om);I g d - U
shoK O A W a 4wNum = showNums[num];p c K 8
}
init();
/* end */
//获取棋盘中的最大值
/*j W , { N start */
function maxNum(){
var max6 s a Z \ k J R Q = 0;
for(var i=0;i<td.length;i++){
if(td[i].innerHTML == ""){
ma8 ] 9 0 Q tx = max;
}else{
if(parseInt(td[i].innerHh C y ; \TML) > max){
max = parse* ? ` I $ H bInt(td[i].innerHTML);
}else{
m, d j 1ax = max;
}
}
}
return max;
}
/* end */
//根据数字显示背景颜色
/* start */
function color(obj){
for(var i=0;i < colors.length;i++){
if(obj.innerHTML == Math.pow(2,i+1X N ~ 2 K ,)){
obj.h T g U ! 1 p 7style = "background-color: "+colors[i]+";";
break;
}
}
}
/* end */
//合并算法
/* start */
function offseV 9 V \ i 7 * N =tTop(obj,index){//合并上
if(index > 3){
ifE ; P(td[(index-4)].innerHTML == obo ) I { : t 1 } @j.inne\ p y 5rHTML){
td[(index-4)].innerHTML = "";
td[(index-4)].style = "background-color: rgba(0, 0, 0, 0);";
retJ B 0urn true;
}
}
return fali ^ R 4se;
}
function offsetBottom(obj,index){K . p K 3 x//合并下
if(index < 12){
if(td[(index+4)].innerHTML == obj.i+ 0 a w i ? s a /nnerHTML){
td[(index+4)].innerHTML = "";
td[(index+4)].% # 5 b x 6 U I mstyle = "background-color: rgba(0, 0, 0, 0);{ D } U A";
retO + 1 aurn true;
}
}
return false;
}
function offsetLeft(obj,inP W & 2 M 1 z 3 Udex){//合并左
if(index!=0 && index!=4 && in` # Qdex!=8 && index!=12){
if(td[(index-1)].innerHTML == obj.innerHTML){
td[(index-1)].innerHTML = "";
td[(index-1)].style = "background-color: rgba(0, 0, 0, 0);";
return true;
}
}
retuB p I w Y _ Nrn false;
}
function offsetRight(obj,index){//合并\ { _ ^ m s @ Z R右
if(index!=3 &&2 r # H :amp; inJ I K { . ;dex!=7 &&amf t # { e b Pp; index!=11 && index!M _ \ Q t , 1 : o=15){
if(td[(index+1)].innerHTq + k R Q TML == obj.innerHTML){
td[(index+1)].} z h ^ / M D DinnerHTML = "";
td[(index+1)].style = "background-color: rgba(0, 0, 0, 0);";/ ~ \
return true;
}
}
return false;
}
/* end */
//判断单元格是否合并
/* sta` N x ) X 3 _ mrt */
function merge(obj,ins n 8 ] [ : Ydex){
ifm W u k Y 6 \ -(offsetTop(obj,index)){
if(offsetBottom(e # R B ] m 1 Jobj,index)){
if(offsetLeft(obj,index)){
if(ofO b ! * M m i Bfset- - W .Right(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//合并上、~ M 5 * -下、左、右
score. j { , g # += 16;
merge(u E p iobj,index);
}else% = T m 2 }{
obK . 0 9 q . v dj.innerHTML = parseInt(obj.innerH- ) / b )TML)*2;//仅合并上、下、左
score += 8;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.innerHTML = pav 5 ~ z 1 k *rsM j M N ?eInt(obj.innerHTML)*2;//仅合并上、下、右
score += 8;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上/ j x ; j d F、下
score += 4;
merge(obj,index);
}
}else if(offsetLeft(obj,index)){
if(offsetRigV ( J 7 t M _ Z Zht(obj,ind! 0 Kex)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、左、右
score += 8;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//; m 4 O k仅合并上、o 9 ~ J左
score += 4;
merge(obj,indexE : J *);s 8 x D , ^ V
}
}else if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、右
score += 4;
merge(obj,ind^ V ( | K V ~ Wex);
}else{
obj.innerHTML = parseInt(q } f 2 Iobj.innerHTMLK T x W 7 n ; X)*2;//仅i c } \合并上
score += 2;
merge(obj,ind8 q J c j _ uex);
}
}else if(offsetBottom(obj,indeD + z m E ^ )x)){
if(offsetLeft(r $ Z 5obj,index)){
if(offsetRight(obj,index)){
ob? 1 c f c X J Wj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并下、左、右
score += 8;
merge(obj,index\ : U _);
}else{
obj.innerHTML = parseInt(ou 6 Ubj.innerHTML)*2;//仅合并下、左
score += 4;
merge(obj,index);
}
}else if(: * - i O | ^offsetRight(objZ [ A,index)){
obj.innerHTML = parseIntu | F - N & d(obj.innerHTML)*2;//仅合并下、右
score += 4;
merge(obj,index);
}else{
obj{ Q K r S & s +.innerHTML = parseInt(obj.innerHTML)*2;//仅合并下
score += 2;
merge(obj,index);
}
}else if(offsetLeft(obj,index)){
if(offsR N J b m E ] L &etRight(obj,T 1 6 . T o I 0 lindex)){
objI & 4 x p.innerHTML = parsG y S = k ` XeInt(oby m bj.innerHTML)*2;//仅合并左、右
score += 4;
merge(obj,index);
}else{
obj.in8 n Y 5 o ,nerHTML = parseIp u K D m * d K ont(obj.innerHc Y ^ }TML)*2;//仅! U 0 q j k _合并左
score += 2;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.i? w O / XnnerHTML = parseInt(obj.innerHTML)*2;//仅合并右
score += 2;
merge(obj,index);
}
}* o 7
/* end */
//main
/E Y O ! G V* start */
functiT 0 ~ U L 5 \on gameOveY ~ T & x + D ] |r(){
for(var i=0;i<td.length;i++){
if(td[i].innerHTF D ! N %M3 P o 4 dL == ""){
break;
}
if(i == 15){
alert("很遗憾!本局游戏结束。。。");
}
}
}
/* end */
//main
/* start */
(function(){
for(var i=0;i<td.length;i++){
var choose = td[i];
choose.index = i;
choose.onclick = function(){
if(this- / \ K j F : ` 3.innerHTML =b E K a 0 C : L= ""){
this.innerHTML = shB r o 8 ~ U yowNum;
merge(this,this.index);
if(this.innerHTML >= 2048){
this.inn& ] u ! $ 2 )erHTML = "";
this.style = "b% 4 ] T _ Aackground-color: rg{ / x x ? Lba(0, 0, 0, 0);";
}
color(this);
init();
}
updateScore();
gameOver();
}
}
})();
/* end */
//更新得分
/* start */
function updateScore(){
if(score >2 / k @ d H \ a; 500){
span.style = "color: rgb5 W % ^ \ o I i U(255,0,0)";
}else if(score && M l x pgt; 100){
span.W ! @style0 p ( i y \ = "color: rgb(255,0,255)";
}else if(score > 50){
span.style = "color: rg\ - + Y %b(255,255,0)M K 7 D";
}else if(score > 2| 1 _ v \0){
span.style = "color: rgb(0,0,255)";
}else if(score > 10){
span.style = "color: rg5 \ A I _ ? o ) db(0,255,, ? .0)";
}
spak P ( q G $ z pn.innerHTML = score;
}
/* end */
//新游戏
/* stY 0 j 5 ] D h aart */
but.onclick = function(){
location.[ v * \reload();
}
/* end */
</script>
</html>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注