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
MySQL 8.0.25 installation and configuration tutorial under Linux
The latest tutorial for installing MySQL 8.0.25 o...
Basic usage tutorial of IPTABLES firewall in LINUX
Preface For production VPS with public IP, only t...
Complete steps to install MySQL 5.5 on CentOS
Table of contents 1. Preparation before installat...
Summary of some efficient magic operators in JS
JavaScript now releases a new version every year,...
Summary of various methods of MySQL data recovery
Table of contents 1. Introduction 2. Direct recov...
Complete MySQL Learning Notes
Table of contents MyISAM and InnoDB Reasons for p...
Solve the problem of case sensitivity of Linux+Apache server URL
I encountered a problem today. When entering the ...
HTML thead tag definition and usage detailed introduction
Copy code The code is as follows: <thead> &...
Docker enables seamless calling of shell commands between container and host
As shown below: nsenter -t 1 -m -u -n -i sh -c &q...
XHTML Getting Started Tutorial: What is XHTML?
What is HTML? To put it simply: HTML is used to m...
Virtual Box tutorial diagram of duplicating virtual machines
After getting used to VM, switching to BOX is a l...
Discussion on default margin and padding values of common elements
Today we discussed the issue of what the margin v...
Detailed explanation of Vue form binding and components
Table of contents 1. What is two-way data binding...
Web Design Tutorial (8): Web Page Hierarchy and Space Design
<br />Previous article: Web Design Tutorial ...
MySQL FAQ series: How to avoid a sudden increase in the size of the ibdata1 file
0. Introduction What is the ibdata1 file? ibdata1...