See these days js tutorial to see dizziness, I feel this approach is not for me, inefficient thief. I still have a foundation java has Diudiu, so want to do a little something to improve themselves and confirms what they have learned about this a few weeks.
So write a 2048 game. Internet seen a lot of great God code, a little thought, finally succeeded it!
GitHub connection: https://github.com/514870106/hjc
Specific aspects of the use of html table idea is to create a matrix of 4 * 4 to create a two-dimensional array in js-one correspondence with the matrix, the matrix write a function to change the drawing style and content by content-dimensional array.
Specific comments were made:
html：
<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset = "UTF-. 8">
<title> 2048 Games </ title>
<Link the rel = "this stylesheet" type = "text / CSS" the href = "Games style .css "/>
</ head>
<body the onload =" Read () ">
<div ID =" Game ">
<h1 of class =" h1 of "> Boy Next Door ♂ </ h1 of>
<P ID =" P1 "> use the arrow keys ↑ ↓ ← → to control, there is the victory of 2048 </ the p->
<the p-the above mentioned id =" P2 "> once you've tried 0 </ the p->
<the button of the type =" the button "the above mentioned id =" the button " onclick = "read ()"> restart </ Button>
<Table border = ". 1"id="table">
<tr><td id="00" style=""></td><td id="01" style=""></td><td id="02" style=""></td><td id="03" style=""></td></tr>
<tr><td id="10" style=""></td><td id="11" style=""></td><td id="12" style=""></td><td id="13" style=""></td></tr>
<tr><td id="20" style=""></td><td id="21" style=""></td><td id="22" style=""></td><td id="23" style=""></td></tr>
<tr><td id="30" style=""></td><td id="31" style=""></td><td id="32" style=""></td><td id="33" style=""></td></tr>
</table>
</div>
<script src="算法部分.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
CSS：
#game{
border: 5px solid black;
height: 600px;
width: 500px;
margin:0 auto;
}
.h1{
text-align: center;
}
#p1{
text-align: center;
}
#p2{
text-align: center;
}
#button{
float: right;
margin-right: 200px;
width: 100px;
height: 60px;
}
#table{
width: 300px;
height: 300px;
text-align:center;
margin:0 auto;
}
tr,td{
width: 18%;
height: 18%;
}
js：
x var;
var C = 0;
function Read () {
// create a two-dimensional array of 4 x 4 * all assigned 0
x = new new the Array (4);
for (I = 0; I <x.length; I ++ ) {
x [I] = [0,0,0,0];
}
// get a random coordinates, the number of the corresponding coordinates of the array to x 2
var a, B, A1, B1;
a = Math.round ( math.random () *. 3);
B = Math.round (Math.random () *. 3);
x [A] [B] = 2;
// get a random coordinates, whether the coordinates are not repeated, the array corresponding coordinates x the number of changed. 4
the while (. 1) {
A1 = Math.round (Math.random () *. 3);
B1 = Math.round (Math.random () *. 3);
! IF (A1 B2 = a || ! = B) {
X [A1] [B1] =. 4;
BREAK;
}
}
// call the function of writing the digital image and
font ();
Color ();
// Change <p> have been attempts in the
document.getElementById ( "p2") innerHTML = ( " you have tried" + c + "views").
C = +. 1;
}
// successively filled into a digital array x table corresponding td, if is 0, fill empty;
function font () {
for (I = 0; I <x.length; I ++) {
for (J = 0; J <x.length; J ++) {
document.getElementById TD = var (I + "" + J);
IF (! X [I] [J] = 0)
{
td.innerHTML X = [I] [J];
}
the else
{
td.innerHTML = "";
}
}
}
}
// iterate x array table to obtain the corresponding td, td again to change the background color corresponding to a value
function color () {
for (I = 0; I <x.length;i++) {
for (j=0;j<x.length;j++) {
var td = document.getElementById(i+""+j);
var num = x[i][j];
switch(num){
case 2:
td.style="
break;
case 4:
td.style="background-color:#FFEFD1";
break;
case 8:
td.style="
break;
case 16:
td.style="background-color:#FFDEAD";
break;
case 32:
td.style="
break;
case 64:
= td.style "background-Color: # F08080";
BREAK;
Case 128:
td.style = "
BREAK;
Case 256:
td.style =" background-Color: # FF69B4 ";
BREAK;
Case 512:
td.style = "
BREAK;
Case 1024:
td.style =" background-Color: # FF4500 ";
BREAK;
default:
td.style ="
BREAK;
}
IF (NUM == 1024) {
Alert ( "Congratulations on your success clearance, king obtained banana friendship ");
return;
}
}
}
}
// monitor keyboard button is pressed, the return value is determined according keyCode which key was pressed, and the function is executed and then re-drawing (Call font (), Color ())
window.onkeydown = function () {
var = event.keyCode Boy;
Switch (Boy) {
Case 37 [: // left
onleft ();
font ();
Color ();
BREAK;
Case 38 is: // on
ontop of ();
font ();
Color ();
BREAK ;
case 39: // Right
onright ();
font ();
Color ();
BREAK;
case 40: // the
onbelow ();
font ();
Color ();
BREAK;
}
}
// user presses the left
function onleft () {
for (I = 0; I <x.length; I ++) {
var new new X1 = the Array (0,0,0,0); // create a temporary array X1
var = 0 ACE;
for (J = 0; J <x.length; J ++) {// x1 x arrays be assigned to the current active line array
(! X [I] [J] = 0) {IF
X1 [ACE] X = [I] [J];
ACE = +. 1;
}
}
for (J = 0; J <-x1.length. 1; J ++) {
IF (X1 [J] == X1 [J +. 1]) {// determining whether the same number of adjacent, if the number is equal to the left of doubling
X1 [J] * = 2;
var = J + K. 1; // number of records equal to the number of the subscript of the right
while (k <x1.length-1 ) {// move to the left to the right of all numbers
X1 [K] = X1 [K +. 1];
K + =. 1;
}
x1 [3] = 0; // assign the last bit is 0, no end to a table full immediately.
}
}
X [I] = X1; // updated array x a
}
newNum (); // occur randomly within the array 2 or 4
}
// user pressed the
function ontop of () {
for (I = 0; I < x.length; I ++) {
var new new X1 = the Array (0,0,0,0);
var ACE = 0;
for (J = 0; J <x.length; J ++) {
IF (X [J] [I !] = 0) {
X1 [ACE] = X [J] [I];
ACE = +. 1;
}
}
for (J = 0; J <-x1.length. 1; J ++) {
IF (X1 [J] == X1 [J +. 1]) {
X1 [J] * = 2;
var = J + K. 1;
the while (K <-x1.length. 1) {
x1[k] = x1[k+1];
k+=1;
}
x1[3]=0;
}
}
for(j=0;j<x.length;j++){
x[j][i]=x1[j];
}
}
newnum();
}
//用户按了右
function onright(){
for (i = 0;i < x.length; i++){
var x1 = new Array(0,0,0,0);
var ace=3;
for(j = 3;j >= 0; j--){
if(x[i][j] != 0){
x1[ace] = x[i][j];
ace-=1;
}
}
for(j=3;j>0;j--){
if(x1[j-1] == x1[j]){
x1[j]*=2;
var k=j-1;
while(k>0){
x1[k] = x1[k-1];
k-=1;
}
x1[0]=0;
}
}
x[i]=x1;
}
newnum();
}
// 用户按了下
function onbelow(){
for (i = 0;i < x.length; i++){
var x1 = new Array(0,0,0,0);
var ace=3;
for(j = 3;j >=0 ; j--){
if(x[j][i] != 0){
x1[ace] = x[j][i];
ace-=1;
}
}
for(j=3; j>0 ;j--){
IF (X1 [J-. 1] == X1 [J]) {
X1 [J] * = 2;
var = K-J. 1;
the while (K <0) {
X1 [K] = X1 [K-. 1];
. 1 = - K-;
}
X1 [0] = 0;
}
}
for (J = 0; J <x.length; J ++) {
X [J] [I] = X1 [J];
}
}
newNum ();
}
newNum function () {
.. // iterate x is equal to if not an element of 0, the game is over lost
var = in Flag to false;
for (I = 0; I <x.length; I ++) {
for (J = 0; J <x.length; J ++) {
IF (X [I] [J] == 0) {
In Flag to true =;
BREAK;
}
}
}
IF (== In Flag to false) {
Alert ( "Brother, ah worrying IQ");
return;
}
var A, B, Q;
// get a random coordinate
the while (to true) {
A = Math.round ( math.random () *. 3);
B = Math.round (Math.random () *. 3);
IF (X [a] [B] == 0) {
BREAK;
}
}
// get a 2 or 4, and assigned to the random coordinates obtained
the while (to true) {
Q = Math.round (Math.random () *. 6);
IF (Q == Q == 2 ||. 4) {
BREAK;
}
}
X [a] [B] = Q;
}