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
JS+Canvas draws a lucky draw wheel
This article shares the specific code of JS+Canva...
Graphic tutorial on configuring nginx file server in windows 10 system
Download the Windows version of Nginx from the Ng...
MYSQL replaces the time (year, month, day) field with unchanged hours, minutes, and seconds. Example analysis
Writing method 1: update sas_order_supply_month_p...
Ubuntu 20.04 sets a static IP address (including different versions)
Because Ubuntu 20.04 manages the network through ...
Solve the problem that the element DateTimePicker+vue pop-up box only displays hours
Three knowledge points: 1. CSS descendant selecto...
Front-end implementation of GBK and GB2312 encoding and decoding of strings (summary)
Preface When developing a project, I encountered ...
React implements the addition, deletion, modification and query of todolist
Table of contents Take todolist as an example The...
MySQL series 15 MySQL common configuration and performance stress test
1. Common MySQL configuration All the following c...
How to view mysql binlog (binary log)
For example, when you create a new table or updat...
How to use javascript to do simple algorithms
Table of contents 1 Question 2 Methods 3 Experime...
MySQL index principle and query optimization detailed explanation
Table of contents 1. Introduction 1. What is an i...
How to reduce memory usage and CPU usage of web pages
Some web pages may not look large but may be very...
Use of Docker image storage overlayfs
1. Overview The image in Docker is designed in la...
Solution to the problem of MySQL data delay jump
Today we analyzed another typical problem about d...
The most creative 404 page design in history effectively improves website user experience
We don’t often encounter 404 pages when we browse...