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 replace & replaceAll
Java字符串中需要对一些字符进行替换,用到最多的是replace和replaceAll两个方法.这两个方法在使用的时候需要注意: replace: public String replace (Ch ...
- jquery的$
<!DOCTYPE HTML> <HTML> <head> <title>aa</title> <script type=" ...
- MVC5-10 从模型验证来说内部那些事
源码解析 模型验证几乎在大部分的项目中都在被使用,这方面的博文教程也很多,关于那些更详细的模型验证这里就不多赘述了,主要讲解内部是如何进行验证的. 在前几篇博文中提到了DefaultModelBind ...
- java 图像灰度化与二值化
转载:http://www.chinasb.org/archives/2013/01/5053.shtml 1: package org.chinasb.client; 2: 3: import ja ...
- UVA 11419SAM I AM（输出 最小覆盖点 ）
参考博客:如何找取 最小覆盖点集合 题意:R*C大小的网格,网格上面放了一些目标.可以再网格外发射子弹,子弹会沿着垂直或者水平方向飞行,并且打掉飞行路径上的所有目标,计算最小多少子弹,各从哪些位置发射 ...
- response压缩响应
思路:1.通过filter向目标页面传递一个自定义的response对象 2..在这个response对象中通过重写getOutputStream方法和getWriter方法使目标资源调用 该方法输出 ...
- BZOJ4527: K-D-Sequence 线段树
别人家的题解. #include<bits/stdc++.h> #define N 200005 #define M (l+r>>1) #define P (k<< ...
- MyEclipse快捷键大全（绝对全）
存盘 Ctrl+s(肯定知道) 注释代码 Ctrl+/ 取消注释 Ctrl+\(Eclipse3已经都合并到Ctrl+/了) 代码辅助 Alt+/ 快速修复 Ctrl+1 代码格式化 Ctrl+Shi ...
- 批处理学习：for语句详解【经典】
大纲 一 前言 二 for语句的基本用法 三 for /f (delims.tokens.skip.eol.userbackq.变量延迟) 四 for /r (递归遍历) 五 for /d (遍历目录 ...
- expect神器安装和使用
安装: mdkir /data/tools cd /data/tools wget http://prdownloads.sourceforge.net/tcl/tcl8.5.19-src.tar.g ...