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
Solve the problem of margin merging
1. Merge the margins of sibling elements The effe...
In-depth analysis of the Tomcat server of Centos 7 system
Table of contents 1. The origin of tomcat 1. Tomc...
JS realizes the scrolling effect of announcement online
This article shares the specific code of JS to ac...
Docker container connection implementation steps analysis
Generally speaking, after the container is starte...
How MySQL handles implicit default values
Some students said that they encountered the prob...
MySQL data loss troubleshooting case
Table of contents Preface On-site investigation C...
How to set up swap partition SWAP in Linux 7.7
The Swap partition of the Linux system, that is, ...
The homepage design best reflects the level of the web designer
In the many projects I have worked on, there is b...
Implementation example of Nginx+Tomcat load balancing cluster
Table of contents introduction 1. Case Overview 2...
How to use a field in one table to update a field in another table in MySQL
1. Modify 1 column update student s, city c set s...
MySQL performance comprehensive optimization method reference, from CPU, file system selection to mysql.cnf parameter optimization
This article summarizes some common MySQL optimiz...
Introduction to using data URI scheme to embed images in web pages
The data URI scheme allows us to include data in a...
How to use JavaScript and CSS correctly in XHTML documents
In more and more websites, the use of XHTML is rep...
How to inherit CSS line-height
How is Line-height inherited?Write a specific val...
Java uses Apache.POI to export HSSFWorkbook to Excel
Use HSSFWorkbook in Apache.POI to export to Excel...