지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > JavaScript 2048 게임 예제 코드(간단하고 이해하기 쉬움)_javascript 기술

JavaScript 2048 게임 예제 코드(간단하고 이해하기 쉬움)_javascript 기술

WBOY
풀어 주다： 2016-05-16 15:08:24
원래의
1714명이 탐색했습니다.

더 이상 고민하지 않고 모두를 위해 코드를 직접 게시하겠습니다. 마음에 드시면 그냥 가져가세요. 

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>无标题文档</title>
<style>
header{display:block; margin: auto; width:%; text-align:center;}
header h{font-size:px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
header #newgamebutton{display:block; margin:px auto; width:px; padding:px px; background-color:#fa; font-family:Arial; color:white; border-radius:px; text-decoration:none;}
header #newgamebutton:hover{background-color:#fb;}
header p{font-family:Arial; font-size:px; margin:px auto;}
#grid-container{width:px; height:px; padding:px; margin:px auto; background-color:#bbada; border-radius:px; position:relative;}
.grid-cell{width:px; height:px; border-radius:px; color:white; background-color:#cccb; position:absolute; font-family:Arial; font-weight:bold; font-size:px; line-height:px; text-align:center;}
.gameover{display:block; margin: auto; width:px; text-align:center; vertical-align:middle; position:absolute;}
.gameover p {
font-family: Arial;
font-size: px;
color: white;
margin: px auto;
margin-top: px;
}
.gameover span {
font-family: Arial;
font-size: px;
color: white;
margin: px auto;
}
#restartgamebutton {
display: block;
margin: px auto;
width: px;
padding: px px;
background-color: #fa;
font-family: Arial;
font-size: px;
color: white;
border-radius: px;
text-decoration: none;
}
#restartgamebutton:hover {
background-color: #fb;
}
#showGameover{width:px; padding:px px; background-color:#fa; font-family:Arial; color:white; border-radius:px; text-decoration:none; font-size:px; position:absolute;}
</style>
<script>
window.onload = function (){
//newgame();
var showScore = document.getElementById('score');
score = ;
init();
generateOneNumber();
generateOneNumber();
window.onkeydown = function (e){
var e = e || window.event;
switch(e.keyCode){
case :
if(canMoveLeft(board)){
moveLeft();
generateOneNumber();
isgameover();
}
break;
case :
if(canMoveUp(board)){
moveUp();
generateOneNumber();
isgameover();
}
break;
case :
if(canMoveRight(board)){
moveRight();
generateOneNumber();
isgameover();
}
break;
case :
if(canMoveDown(board)){
moveDown();
generateOneNumber();
isgameover();
}
break;
default :
break;
}
};
};
function generateOneNumber() {
if(!nospace(board)){
var randx = parseInt(Math.floor(Math.random() * ));
var randy = parseInt(Math.floor(Math.random() * ));
while (true) {
if (board[randx][randy] == ) {
break;
}
var randx = parseInt(Math.floor(Math.random() * ));
var randy = parseInt(Math.floor(Math.random() * ));
}
var randNumber = Math.random() < . &#63; : ;
board[randx][randy] = randNumber;
var gridCell = document.getElementById('grid-cell-'+randx+'-'+randy);
gridCell.innerHTML = randNumber;
//
}
else {
gameover();
}
}
function newgame() {
window.location.reload();
}
var board = new Array();
function init(){
for(var i=;i<;i++){
board[i] = new Array();
for(var j=;j<;j++){
board[i][j] = ;
var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.style.top = (+i*)+'px';
gridCell.style.left = (+j*)+'px';
}
}
}
function getNumberBackgroundColor(number) {
switch (number) {
case :return "#eeeda";break;
case :return "#edec";break;
case :return "#fb";break;
case :return "#f";break;
case :return "#fcf";break;
case :return "#feb";break;
case :return "#edcf";break;
case :return "#edcc";break;
case :return "#c";break;
case :return "#be";break;
case :return "#c";break;
case :return "#ac";break;
case :return "#c";break;
}
}
function getNumberColor(number) {
if (number <= ) {
return "#e"
}
return "white";
}
function nospace(board) {
for (var i = ; i < ; i++) {
for (var j = ; j < ; j++) {
if (board[i][j] == ) {
return false;
}
}
}
return true;
}
function canMoveLeft(board) {
for (var i = ; i < ; i++) {
for (var j = ; j < ; j++) {
if (board[i][j] != ) {
if (board[i][j - ] == || board[i][j - ] == board[i][j]) {return true; }
}
}
}
return false;
}
function moveLeft() {
for (var i = ; i < ; i++) {
for (var j = ; j < ; j++) {
if (board[i][j] != ) {
for (var k = j-; k > -; k--) {
if(board[i][k] == || board[i][k] == board[i][j]){
board[i][k] = board[i][k] + board[i][j];
board[i][j] = ;
var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.innerHTML = '';
var gridCellk = document.getElementById('grid-cell-'+i+'-'+k);
gridCellk.innerHTML = board[i][k];
gridCellk.style.backgroundColor = getNumberBackgroundColor(board[i][k]);
gridCell.style.backgroundColor = '#cccb';
gridCellk.style.color = getNumberColor(board[i][k]);
gridCell.style.color = 'white';
score += board[i][k];
var showScore = document.getElementById('score');
showScore.innerHTML = score;
j = k;
//
}
else {
break; //跳出 var k 的for循环
}
}
}
}
}
}
function canMoveUp(board) {
for (var j = ; j < ; j++) {
for (var i = ; i < ; i++) {
if (board[i][j] != ) {
if (board[i - ][j] == || board[i - ][j] == board[i][j]) {return true; }
}
}
}
return false;
}
function moveUp() {
for (var j = ; j < ; j++) {
for (var i = ; i < ; i++) {
if (board[i][j] != ) {
for (var k = i-; k > -; k--) {
if(board[k][j] == || board[k][j] == board[i][j]){
board[k][j] = board[k][j] + board[i][j];
board[i][j] = ;
var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.innerHTML = '';
var gridCellk = document.getElementById('grid-cell-'+k+'-'+j);
gridCellk.innerHTML = board[k][j];
gridCellk.style.backgroundColor = getNumberBackgroundColor(board[k][j]);
gridCell.style.backgroundColor = '#cccb';
gridCellk.style.color = getNumberColor(board[i][k]);
gridCell.style.color = 'white';
score += board[k][j];
var showScore = document.getElementById('score');
showScore.innerHTML = score;
i = k;
//
}
else {
break; //跳出 var k 的for循环
}
}
}
}
}
}
function canMoveRight(board) {
for (var i = ; i < ; i++) {
for (var j = ; j > -; j--) {
if (board[i][j] != ) {
if (board[i][j + ] == || board[i][j + ] == board[i][j]) {return true; }
}
}
}
return false;
}
function moveRight() {
for (var i = ; i < ; i++) {
for (var j = ; j > -; j--) {
if (board[i][j] != ) {
for (var k = j+; k < ; k++) {
if(board[i][k] == || board[i][k] == board[i][j]){
board[i][k] = board[i][k] + board[i][j];
board[i][j] = ;
var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.innerHTML = '';
var gridCellk = document.getElementById('grid-cell-'+i+'-'+k);
gridCellk.innerHTML = board[i][k];
gridCellk.style.backgroundColor = getNumberBackgroundColor(board[i][k]);
gridCell.style.backgroundColor = '#cccb';
gridCellk.style.color = getNumberColor(board[i][k]);
gridCell.style.color = 'white';
score += board[i][k];
var showScore = document.getElementById('score');
showScore.innerHTML = score;
j = k;
//
}
else {
break; //跳出 var k 的for循环
}
}
}
}
}
}
function canMoveDown(board) {
for (var j = ; j < ; j++) {
for (var i = ; i > -; i--) {
if (board[i][j] != ) {
if (board[i + ][j] == || board[i + ][j] == board[i][j]) {return true; }
}
}
}
return false;
}
function moveDown() {
for (var j = ; j < ; j++) {
for (var i = ; i > -; i--) {
if (board[i][j] != ) {
for (var k = i+; k < ; k++) {
if(board[k][j] == || board[k][j] == board[i][j]){
board[k][j] = board[k][j] + board[i][j];
board[i][j] = ;
var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.innerHTML = '';
var gridCellk = document.getElementById('grid-cell-'+k+'-'+j);
gridCellk.innerHTML = board[k][j];
gridCellk.style.backgroundColor = getNumberBackgroundColor(board[k][j]);
gridCell.style.backgroundColor = '#cccb';
gridCellk.style.color = getNumberColor(board[i][k]);
gridCell.style.color = 'white';
score += board[k][j];
var showScore = document.getElementById('score');
showScore.innerHTML = score;
i = k;
//
}
else {
break; //跳出 var k 的for循环
}
}
}
}
}
}
function isgameover() {
if (nospace(board) && nomove(board)) {
gameover();
}
}
function nomove(board) {
if (canMoveDown(board) || 
canMoveLeft(board) || 
canMoveRight(board) || 
canMoveUp(board)) {
return false;
}
return true;
}
function bounce(obj,top){
clearInterval(obj.timer);
var nSpeed = ;
var acceleration = ;
var Flag = ;
obj.timer = setInterval(function (){
nSpeed += acceleration;
nSpeed *= .;
if(obj.offsetTop + nSpeed >= top){
obj.style.top = top + 'px';
nSpeed *= -;
}else{
if(Math.abs(nSpeed) < && Math.abs(top-obj.offsetTop)<){
clearInterval(obj.timer);
}
else{
obj.style.top = obj.offsetTop + nSpeed + 'px';
}
}
},);
}
function gameover() {
//alert("gameover!");
var gameover = document.createElement('div');
gameover.id = 'showGameover';
gameover.innerHTML = 'GAME OVER';
var gridContainer = document.getElementById('grid-container');
gridContainer.appendChild(gameover);
var showGameover = document.getElementById('showGameover');
showGameover.style.left = (gridContainer.offsetWidth - showGameover.offsetWidth ) / + 'px';
bounce(showGameover,);
}
</script>
</head>
<body>
<header>
<!--<h> </h>-->
<a href="javascript:newgame();" id="newgamebutton"> New Game </a>
<p> score: <span id="score"></span></p>
<div id="grid-container">
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
<div class="grid-cell" id="grid-cell--"></div>
</div>
</header>
</body>
</html>
로그인 후 복사

위의 코드는 div+css 지식에 관한 내용이므로 매우 만족합니다. 코드에 문제가 있으면 귀중한 의견을 제공하는 동시에 함께 배우고 발전해 나가시기 바랍니다. 또한 Script House 웹사이트에 대한 귀하의 지원에 매우 감사드립니다.

관련 라벨：
javascript2048 javascript制作2048 2048游戏
원천：php.cn
이전 기사：JavaScript는 웹 페이지를 제어합니다 - CSS 및 DOM_javascript 기술 다음 기사：JavaScript는 웹페이지를 제어합니다 - DOM_javascript 기술
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2204
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2349
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1967
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1857
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1915
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿