javascript 2048游戏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
header{display:block; margin:0 auto; width:100%; text-align:center;}
header h1{font-size:40px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
header #newgamebutton{display:block; margin:10px auto; width:100px; padding:10px 10px; background-color:#8f7a66; font-family:Arial; color:white; border-radius:10px; text-decoration:none;}
header #newgamebutton:hover{background-color:#9f8b77;}
header p{font-family:Arial; font-size:25px; margin:10px auto;} #grid-container{width:460px; height:460px; padding:20px; margin:20px auto; background-color:#bbada0; border-radius:10px; position:relative;}
.grid-cell{width:100px; height:100px; border-radius:6px; color:white; background-color:#ccc0b3; position:absolute; font-family:Arial; font-weight:bold; font-size:60px; line-height:100px; text-align:center;} .gameover{display:block; margin:0 auto; width:500px; text-align:center; vertical-align:middle; position:absolute;} .gameover p {
font-family: Arial;
font-size: 50px;
color: white;
margin: 20px auto; margin-top: 150px;
} .gameover span {
font-family: Arial;
font-size: 50px;
color: white;
margin: 20px auto;
} #restartgamebutton {
display: block;
margin: 20px auto; width: 180px;
padding: 10px 10px;
background-color: #8f7a66; font-family: Arial;
font-size: 30px;
color: white; border-radius: 10px; text-decoration: none;
} #restartgamebutton:hover {
background-color: #9f8b77;
} #showGameover{width:100px; padding:10px 10px; background-color:#8f7a66; font-family:Arial; color:white; border-radius:10px; text-decoration:none; font-size:36px; position:absolute;} </style> <script> window.onload = function (){
//newgame();
var showScore = document.getElementById('score');
score = 0;
init();
generateOneNumber();
generateOneNumber(); window.onkeydown = function (e){
var e = e || window.event; switch(e.keyCode){
case 37:
if(canMoveLeft(board)){
moveLeft();
generateOneNumber();
isgameover();
}
break;
case 38:
if(canMoveUp(board)){
moveUp();
generateOneNumber();
isgameover();
}
break;
case 39:
if(canMoveRight(board)){
moveRight();
generateOneNumber();
isgameover();
}
break;
case 40:
if(canMoveDown(board)){
moveDown();
generateOneNumber();
isgameover();
}
break;
default :
break;
}
};
}; function generateOneNumber() {
if(!nospace(board)){
var randx = parseInt(Math.floor(Math.random() * 4));
var randy = parseInt(Math.floor(Math.random() * 4));
while (true) {
if (board[randx][randy] == 0) {
break;
}
var randx = parseInt(Math.floor(Math.random() * 4));
var randy = parseInt(Math.floor(Math.random() * 4));
}
var randNumber = Math.random() < 0.5 ? 2 : 4;
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=0;i<4;i++){
board[i] = new Array();
for(var j=0;j<4;j++){
board[i][j] = 0; var gridCell = document.getElementById('grid-cell-'+i+'-'+j);
gridCell.style.top = (20+i*120)+'px';
gridCell.style.left = (20+j*120)+'px';
}
}
} function getNumberBackgroundColor(number) {
switch (number) {
case 2:return "#eee4da";break;
case 4:return "#ede0c8";break;
case 8:return "#f2b179";break;
case 16:return "#f59563";break;
case 32:return "#f67c5f";break;
case 64:return "#f65e3b";break;
case 128:return "#edcf72";break;
case 256:return "#edcc61";break;
case 512:return "#9c0";break;
case 1024:return "#33b5e5";break;
case 2048:return "#09c";break;
case 4096:return "#a6c";break;
case 8192:return "#93c";break;
}
} function getNumberColor(number) {
if (number <= 4) {
return "#776e65"
}
return "white";
} function nospace(board) {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
if (board[i][j] == 0) {
return false;
}
}
}
return true;
} function canMoveLeft(board) {
for (var i = 0; i < 4; i++) {
for (var j = 1; j < 4; j++) {
if (board[i][j] != 0) {
if (board[i][j - 1] == 0 || board[i][j - 1] == board[i][j]) {return true; }
}
}
}
return false;
} function moveLeft() {
for (var i = 0; i < 4; i++) {
for (var j = 1; j < 4; j++) {
if (board[i][j] != 0) {
for (var k = j-1; k > -1; k--) {
if(board[i][k] == 0 || board[i][k] == board[i][j]){
board[i][k] = board[i][k] + board[i][j];
board[i][j] = 0;
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 = '#ccc0b3';
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 = 0; j < 4; j++) {
for (var i = 1; i < 4; i++) {
if (board[i][j] != 0) {
if (board[i - 1][j] == 0 || board[i - 1][j] == board[i][j]) {return true; }
}
}
}
return false;
} function moveUp() {
for (var j = 0; j < 4; j++) {
for (var i = 1; i < 4; i++) {
if (board[i][j] != 0) {
for (var k = i-1; k > -1; k--) {
if(board[k][j] == 0 || board[k][j] == board[i][j]){
board[k][j] = board[k][j] + board[i][j];
board[i][j] = 0;
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 = '#ccc0b3';
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 = 0; i < 4; i++) {
for (var j = 2; j > -1; j--) {
if (board[i][j] != 0) {
if (board[i][j + 1] == 0 || board[i][j + 1] == board[i][j]) {return true; }
}
}
}
return false;
} function moveRight() {
for (var i = 0; i < 4; i++) {
for (var j = 2; j > -1; j--) {
if (board[i][j] != 0) {
for (var k = j+1; k < 4; k++) {
if(board[i][k] == 0 || board[i][k] == board[i][j]){
board[i][k] = board[i][k] + board[i][j];
board[i][j] = 0;
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 = '#ccc0b3';
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 = 0; j < 4; j++) {
for (var i = 2; i > -1; i--) {
if (board[i][j] != 0) {
if (board[i + 1][j] == 0 || board[i + 1][j] == board[i][j]) {return true; }
}
}
}
return false;
} function moveDown() {
for (var j = 0; j < 4; j++) {
for (var i = 2; i > -1; i--) {
if (board[i][j] != 0) {
for (var k = i+1; k < 4; k++) {
if(board[k][j] == 0 || board[k][j] == board[i][j]){
board[k][j] = board[k][j] + board[i][j];
board[i][j] = 0;
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 = '#ccc0b3';
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 = 0;
var acceleration = 9;
var Flag = 0; obj.timer = setInterval(function (){
nSpeed += acceleration;
nSpeed *= 0.93; if(obj.offsetTop + nSpeed >= top){
obj.style.top = top + 'px';
nSpeed *= -1;
}else{
if(Math.abs(nSpeed) < 4 && Math.abs(top-obj.offsetTop)<1){
clearInterval(obj.timer);
}
else{
obj.style.top = obj.offsetTop + nSpeed + 'px';
}
} },30);
} 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 ) / 2 + 'px'; bounce(showGameover,200);
} </script> </head> <body>
<header>
<!--<h1> 2048 </h1>-->
<a href="javascript:newgame();" id="newgamebutton"> New Game </a> <p> score: <span id="score">0</span></p> <div id="grid-container">
<div class="grid-cell" id="grid-cell-0-0"></div>
<div class="grid-cell" id="grid-cell-0-1"></div>
<div class="grid-cell" id="grid-cell-0-2"></div>
<div class="grid-cell" id="grid-cell-0-3"></div>
<div class="grid-cell" id="grid-cell-1-0"></div>
<div class="grid-cell" id="grid-cell-1-1"></div>
<div class="grid-cell" id="grid-cell-1-2"></div>
<div class="grid-cell" id="grid-cell-1-3"></div>
<div class="grid-cell" id="grid-cell-2-0"></div>
<div class="grid-cell" id="grid-cell-2-1"></div>
<div class="grid-cell" id="grid-cell-2-2"></div>
<div class="grid-cell" id="grid-cell-2-3"></div>
<div class="grid-cell" id="grid-cell-3-0"></div>
<div class="grid-cell" id="grid-cell-3-1"></div>
<div class="grid-cell" id="grid-cell-3-2"></div>
<div class="grid-cell" id="grid-cell-3-3"></div>
</div>
</header>
</body>
</html>
javascript 2048游戏的更多相关文章
- 最少javascript代码完成一个2048游戏
原生javascript代码写的2048游戏.建议在谷歌浏览器下跑.'WASD'控制方向.演示地址请移步:http://runjs.cn/detail/bp8baf8b 直接贴代码~ html: &l ...
- 用javascript制作2048游戏的思路（原创若 转载请附上本链接）
一.项目已上传至github,地址:https://github.com/forjuan/2048game 二.学习了javascript基础后,想要捣鼓点东西做,做了一个自己以前很爱玩的2048游戏 ...
- 用javascript实现一个2048游戏
早就想自己写一个2048游戏了,昨晚闲着没事,终于写了一个 如下图,按方向键开始玩吧. 如果觉得操作不方便,请直接打开链接玩吧: http://gujianbo.1kapp.com/2048/2048 ...
- 对弈类游戏的人工智能(5)--2048游戏AI的解读
前言: 闲得没事, 网上搜"游戏AI", 看到一篇<<2048游戏的最佳算法是?来看看AI版作者的回答>>的文章. 而这篇文章刚好和之前讲的对弈类游戏AI对 ...
- Cocos2d-html5入门之2048游戏
一.介绍 Cocos2d-JS是Cocos2d-x的Javascript版本,它的前身是Cocos2d-html5.在3.0版本以前叫做Cocos2d-html5,从3.0版本开始叫做Cocos2d- ...
- powershell字符界面的，powershell加WPF界面的，2048游戏
------[序言]------ 1 2048游戏,有段时间很火,我在地铁上看有人玩过.没错,坐地铁很无聊,人家玩我就一直盯着看. 2 我在电脑上找了一个,试玩了以下,没几次格子就满了.我就气呼呼的放 ...
- [python] python实现2048游戏，及代码解析。
我初学python,有不对之处望大家指教.转载请征得同意. 我在网络上也找了一些2048游戏代码的讲解,但都不是特别详细.所以我希望能够尽量详细的讲解.同时,有的地方我也不懂,希望大家能帮助补充.我会 ...
- 经典 HTML5 & Javascript 俄罗斯方块游戏
Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...
- Android项目开发实战-2048游戏
<2048>是一款比较流行的数字游戏,最早于2014年3月20日发行.原版2048首先在GitHub上发布,原作者是Gabriele Cirulli,后被移植到各个平台.这款游戏是基于&l ...
随机推荐
- Java中使用JDBC
JDBC简介 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言 ...
- Visual Studio原生开发的10个调试技巧
这篇文章只介绍了一些有关Visual Studio的基本调试技巧,但是还有其他一些同样有用的技巧.我整理了一些Visual Studio(至少在VS 2008下)原生开发的调试技巧.(如果你是工作在托 ...
- chrome使用技巧
chrome使用技巧 chrome对于开发人员来说,绝对是一个神器.下面,介绍关于它的一些小技巧: 1.利用chrome快速定位source中的资源. 我之前一般如果查找每个文件,都是打开控制台,在s ...
- boolean 和 Boolean 类型数据的差别
工作中遇到页面传递布尔类型的数据问题,需要在代码中判断不能为null,就此思考一下,boolean和Boolean之间的区别?boolean是基本数据类型Boolean是它的封装类,和其他类一样,有属 ...
- hibernate实现有两种配置，xml配置与注释配置。
(1):xml配置:hibernate.cfg.xml (放到src目录下)和实体配置类:xxx.hbm.xml(与实体为同一目录中) <?xml version='1.0' encoding= ...
- ubuntu下eclipse遇到The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
JSP页面顶端出现“红色”的报错信息:The superclass "javax.servlet.http.HttpServlet" was not found on the Ja ...
- JSP 自定义标签
0 标签技术的API继承体系 1 作用 jsp自定义标签用于移除页面中的java代码 2 实现 2.1 标签处理类ViewIPTag.java package com.zsm.util; import ...
- 11 Clever Methods of Overfitting and how to avoid them
11 Clever Methods of Overfitting and how to avoid them Overfitting is the bane of Data Science in th ...
- js搜索输入关键词
function getInput(val,a){ var id = 'ser-key'; if(a=='focus'){ document.getElementById(id).value=''; ...
- js数组操作【转载】
用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一下狠心,我学!呵 ...