JS原生2048小游戲源碼分享(全網(wǎng)最新)
更新時(shí)間：2021年05月02日 07:45:16 作者：林恒
這篇文章主要介紹了JS原生2048小游戲源碼分享,實(shí)現(xiàn)代碼全部是給予js實(shí)現(xiàn)的，代碼簡單易懂對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
最近在學(xué)習(xí)算法方面的知識(shí)，看到了一個(gè)由算法主導(dǎo)的小游戲，這里給大家分享下代碼：
效果：
代碼：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=360px,user-scalable=no" />
<title>2048小游戲</title>
<style>
body,h1,div,table,tr,td{
margin: 0px;
padding: 0px;
}
body{
background-color: rgb(0,0,0);
}
h1{
margin: 36px auto;
text-align: center;
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-align: center;
font-weight: bold;
color: rgb(255,255,255);
}
#box input{
border: 3px solid rgb(255,255,255);
border-radius: 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);
border-radius: 6px;
}
#random,td{
width: 60px;
height: 60px;
border: 2px solid rgb(255,255,255);
border-radius: 18px;
text-align: center;
font-weight: bold;
color: rgb(255,255,255);
}
td:hover{
cursor: pointer;
}
</style>
</head>
<body>
<h1>2 0 4 8</h1>
<!-- 顯示得分及新游戲按鈕 -->
<div id="box">
得分: <span id="span">0</span>
<input id="but" type="button" value="新游戲" />
</div>
<!-- 顯示隨機(jī)數(shù) -->
<div id="random"></div>
<!-- 游戲主要布局 -->
<table border="3px">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script type="text/javascript">
var span = document.getElementById("span");
var but = document.getElementById("but");
var td = document.getElementsByTagName("td");
//定義得分
var score = 0;
//定義隨機(jī)數(shù)
var random = document.getElementById("random");
var showNums = [2,4,8,16,32,64,128,256,512,1024];
var showNum = 0;
//定義背景色數(shù)組
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)"];
//初始化程序,生成隨機(jī)數(shù)
/* 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(max < 2048){
continue;
}else{
num = parseInt(Math.random()*showNums.length);
break;
}
}
random.innerHTML = showNums[num];
color(random);
showNum = showNums[num];
}
init();
/* end */
//獲取棋盤中的最大值
/* start */
function maxNum(){
var max = 0;
for(var i=0;i<td.length;i++){
if(td[i].innerHTML == ""){
max = max;
}else{
if(parseInt(td[i].innerHTML) > max){
max = parseInt(td[i].innerHTML);
}else{
max = max;
}
}
}
return max;
}
/* end */
//根據(jù)數(shù)字顯示背景顏色
/* start */
function color(obj){
for(var i=0;i < colors.length;i++){
if(obj.innerHTML == Math.pow(2,i+1)){
obj.style = "background-color: "+colors[i]+";";
break;
}
}
}
/* end */
//合并算法
/* start */
function offsetTop(obj,index){//合并上
if(index > 3){
if(td[(index-4)].innerHTML == obj.innerHTML){
td[(index-4)].innerHTML = "";
td[(index-4)].style = "background-color: rgba(0, 0, 0, 0);";
return true;
}
}
return false;
}
function offsetBottom(obj,index){//合并下
if(index < 12){
if(td[(index+4)].innerHTML == obj.innerHTML){
td[(index+4)].innerHTML = "";
td[(index+4)].style = "background-color: rgba(0, 0, 0, 0);";
return true;
}
}
return false;
}
function offsetLeft(obj,index){//合并左
if(index!=0 && index!=4 && index!=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;
}
}
return false;
}
function offsetRight(obj,index){//合并右
if(index!=3 && index!=7 && index!=11 && index!=15){
if(td[(index+1)].innerHTML == obj.innerHTML){
td[(index+1)].innerHTML = "";
td[(index+1)].style = "background-color: rgba(0, 0, 0, 0);";
return true;
}
}
return false;
}
/* end */
//判斷單元格是否合并
/* start */
function merge(obj,index){
if(offsetTop(obj,index)){
if(offsetBottom(obj,index)){
if(offsetLeft(obj,index)){
if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//合并上、下、左、右
score += 16;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并上、下、左
score += 8;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并上、下、右
score += 8;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并上、下
score += 4;
merge(obj,index);
}
}else if(offsetLeft(obj,index)){
if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并上、左、右
score += 8;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并上、左
score += 4;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并上、右
score += 4;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并上
score += 2;
merge(obj,index);
}
}else if(offsetBottom(obj,index)){
if(offsetLeft(obj,index)){
if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并下、左、右
score += 8;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并下、左
score += 4;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并下、右
score += 4;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并下
score += 2;
merge(obj,index);
}
}else if(offsetLeft(obj,index)){
if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并左、右
score += 4;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并左
score += 2;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并右
score += 2;
merge(obj,index);
}
}
/* end */
//main
/* start */
function gameOver(){
for(var i=0;i<td.length;i++){
if(td[i].innerHTML == ""){
break;
}
if(i == 15){
alert("很遺憾！本局游戲結(jié)束。。。");
}
}
}
/* end */
//main
/* start */
(function(){
for(var i=0;i<td.length;i++){
var choose = td[i];
choose.index = i;
choose.onclick = function(){
if(this.innerHTML == ""){
this.innerHTML = showNum;
merge(this,this.index);
if(this.innerHTML >= 2048){
this.innerHTML = "";
this.style = "background-color: rgba(0, 0, 0, 0);";
}
color(this);
init();
}
updateScore();
gameOver();
}
}
})();
/* end */
//更新得分
/* start */
function updateScore(){
if(score > 500){
span.style = "color: rgb(255,0,0)";
}else if(score > 100){
span.style = "color: rgb(255,0,255)";
}else if(score > 50){
span.style = "color: rgb(255,255,0)";
}else if(score > 20){
span.style = "color: rgb(0,0,255)";
}else if(score > 10){
span.style = "color: rgb(0,255,0)";
}
span.innerHTML = score;
}
/* end */
//新游戲
/* start */
but.onclick = function(){
location.reload();
}
/* end */
</script>
</html>
到此這篇關(guān)于JS原生2048小游戲源碼分享的文章就介紹到這了,更多相關(guān)js 2048小游戲內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序WebSocket實(shí)現(xiàn)聊天對(duì)話功能
這篇文章主要為大家詳細(xì)介紹了微信小程序WebSocket實(shí)現(xiàn)聊天對(duì)話功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
今天小編就為大家分享一篇關(guān)于Javascript中parseInt的正確使用方式，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2018-10-10
這篇文章主要介紹了js控制表單不能輸入空格的小例子，有需要的朋友可以參考一下2013-11-11
js實(shí)現(xiàn)限定區(qū)域范圍拖拉拽效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)限定區(qū)域范圍拖拉拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
JS判斷數(shù)組是否包含某元素實(shí)現(xiàn)方法匯總
這篇文章主要介紹了JS判斷數(shù)組是否包含某元素實(shí)現(xiàn)方法匯總,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要向大家介紹了javascript中的作用域和閉包，以及利用js閉包實(shí)現(xiàn)循環(huán)綁定事件，感興趣的小伙伴們可以參考一下2016-01-01
javascript學(xué)習(xí)筆記之10個(gè)原生技巧
首先在這里要非常感謝無私分享作品的網(wǎng)友們，這些代碼片段主要由網(wǎng)友們平時(shí)分享的作品代碼里面和經(jīng)常去逛網(wǎng)站然后查看源文件收集到的。把平時(shí)網(wǎng)站上常用的一些實(shí)用功能代碼片段通通收集起來，方便網(wǎng)友們學(xué)習(xí)使用，利用好的話可以加快網(wǎng)友們的開發(fā)速度，提高工作效率。2014-05-05
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)身份證取景框拍攝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
ajax跨域調(diào)用webservice的實(shí)現(xiàn)代碼
這篇文章主要介紹了 ajax跨域調(diào)用webservice服務(wù)例子和理解，最近ajax訪問webservice遇到跨域的問題，網(wǎng)上搜索資料，總結(jié)如下2016-05-05
JavaScript強(qiáng)制類型轉(zhuǎn)換和隱式類型轉(zhuǎn)換操作示例
這篇文章主要介紹了JavaScript強(qiáng)制類型轉(zhuǎn)換和隱式類型轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了javascript字符串、數(shù)字等顯示類型轉(zhuǎn)換,以及運(yùn)算、判斷等情況下的隱式類型轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下2019-05-05