JS native 2048 game source code sharing (the latest on the Internet)
|
I have been learning about algorithms recently and have come across a small game driven by algorithms. Here is the code for you: Effect:
Code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=360px,user-scalable=no" />
<title>2048 mini game</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>
<!-- Display score and new game button-->
<div id="box">
Score: <span id="span">0</span>
<input id="but" type="button" value="New Game" />
</div>
<!-- Display random number -->
<div id="random"></div>
<!-- Main layout of the game -->
<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");
//Define score var score = 0;
//Define random number var random = document.getElementById("random");
var showNums = [2,4,8,16,32,64,128,256,512,1024];
var showNum = 0;
//Define background color array 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)"];
// Initialize the program and generate random numbers /* 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 */
//Get the maximum value in the chessboard /* 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 */
//Display the background color according to the number /* 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 */
//Merge algorithm/* start */
function offsetTop(obj,index){//Merge 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){//Merge 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){//Merge leftif(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){//Merge rightif(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 */
//Judge whether the cells are merged/* 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; //Merge top, bottom, left and right score += 16;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2; //Only merge top, bottom, and left score += 8;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2; //Only merge top, bottom and right score += 8;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2; //Only merge the upper and lower scores += 4;
merge(obj,index);
}
}else if(offsetLeft(obj,index)){
if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2; //Only merge top, left and right score += 8;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2; // Only merge the top and left score += 4;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2; //Only merge the top and right score += 4;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2; //Only merge score += 2;
merge(obj,index);
}
}else if(offsetBottom(obj,index)){
if (offsetLeft(obj,index)) {
if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2; //Only merge bottom, left and right score += 8;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2; // Only merge the bottom and left score += 4;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2; // Only merge the bottom and right score += 4;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2; // Only merge score += 2;
merge(obj,index);
}
}else if(offsetLeft(obj,index)){
if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2; // Only merge left and right score += 4;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2; // Only merge the left score += 2;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2; // Only merge the right 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("Unfortunately! This game is over...");
}
}
}
/* 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 */
//Update score /* 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 */
//New game/* start */
but.onclick = function(){
location.reload();
}
/* end */
</script>
</html>This is the end of this article about sharing the source code of JS native 2048 game. For more relevant js 2048 game content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Detailed explanation of ActiveMQ deployment method in Linux environment
>>: Optimize MySQL with 3 simple tweaks
Recommend
The latest virtual machine VMware 14 installation tutorial
First, I will give you the VMware 14 activation c...
How to reasonably use the redundant fields of the database
privot is the intermediate table of many-to-many ...
Use iframe to submit form without refreshing the page
So we introduce an embedding framework to solve th...
Solutions to common problems using Elasticsearch
1. Using it with redis will cause Netty startup c...
Five ways to traverse objects in javascript Example code
Table of contents Prepare Five weapons for…in Obj...
Learn v-model and its modifiers in one article
Table of contents Preface Modifiers of v-model: l...
Implementation of mysql decimal data type conversion
Recently, I encountered a database with the follo...
HTML code example: detailed explanation of hyperlinks
Hyperlinks are the most frequently used HTML elem...
js simple and crude publish and subscribe sample code
What is Publish/Subscribe? Let me give you an exa...
Implementation of Node connection to MySQL query transaction processing
Table of contents Enter the topic mysql add, dele...
Rsync+crontab regular synchronization backup under centos7
Recently, I want to regularly back up important i...
Web Design Tips: Simple Rules for Page Layout
Repetition: Repeat certain page design styles thr...
Some parameter descriptions of text input boxes in web design
In general guestbooks, forums and other places, t...
JavaScript implements div mouse drag effect
This article shares the specific code for JavaScr...
Detailed explanation of how Vue components transfer values to each other
Table of contents Overview 1. Parent component pa...