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 中常用缓存Cache机制的实现
所谓缓存,就是将程序或系统经常要调用的对象存在内存中,一遍其使用时可以快速调用,不必再去创建新的重复的实例.这样做可以减少系统开销,提高系统效率. 所谓缓存,就是将程序或系统经常要调用的对象存在内存中 ...
- 加州大学伯克利分校Stat2.2x Probability 概率初步学习笔记: Section 5 The accuracy of simple random samples
Stat2.2x Probability(概率)课程由加州大学伯克利分校(University of California, Berkeley)于2014年在edX平台讲授. PDF笔记下载(Acad ...
- HDU 4757 Tree
传送门 Tree Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 102400/102400 K (Java/Others) Prob ...
- hihocoder #1327
传送门 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个只包含小写字母'a'-'z'的字符串 S ,你需要将 S 中的字符重新排序,使得任意两个相同的字符不连在一 ...
- CSS3系列四（Media Queries移动设备样式）
viewport设置适应移动设备屏幕大小 viewport:允许开发者创建一个虚拟窗口并自定义其窗口的大小或缩放功能 <meta name="viewport" conten ...
- RMQ模板
RMQ:范围最小值问题.给出一个n个元素的数组A1,A2,...,An,设计一个数据结构支持查询操作Query(L,R):计算min{AL,AL+1,...,AR}. 每次用一个循环来求最小值显然不够 ...
- Docker入门教程（九）10个镜像相关的API
Docker入门教程(九)10个镜像相关的API [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第九篇,重点介绍了镜像相关的Docker Remote ...
- CSS3-border-radius的兼容写法大全
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- 结合Hadoop，简单理解SSH
在启动dfs和yarn时,需要多次输入密码,不但启动本机进程还有辅服务器启动那些节点也需要相应密码,主与辅服务器之间是通过SSH连接的,并发送操作指令 一.ssh密码远程登录 1.使用ssh连接另一台 ...
- 9月23日JavaScript作业----日期时间选择
作业二:日期时间选择 <div style="width:600px; height:100px;"> <select id="year"&g ...