最少javascript代码完成一个2048游戏
原生javascript代码写的2048游戏。建议在谷歌浏览器下跑。'WASD'控制方向。
演示地址请移步：http://runjs.cn/detail/bp8baf8b
直接贴代码~
html:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2048</title>
<link rel="stylesheet" type="text/css" href="css/2048.css" />
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> -->
<script type="text/javascript" src="js/2048.js"></script>
</head> <body>
<div id="div2048">
<a id="start">tap to start :-)</a>
</div>
</body>
</html>
css:
@charset "utf-8"; #div2048
{
width: 500px;
height: 500px;
background-color: #b8af9e;
margin: 0 auto;
position: relative;
}
#start
{
width: 500px;
height: 500px;
line-height: 500px;
display: block;
text-align: center;
font-size: 30px;
background: #f2b179;
color: #FFFFFF;
}
#div2048 div.tile
{
margin: 20px 0px 0px 20px;
width: 100px;
height: 40px;
padding: 30px 0;
font-size: 40px;
line-height: 40px;
text-align: center;
float: left;
}
#div2048 div.tile0{
background: #ccc0b2;
}
#div2048 div.tile2
{
color: #7c736a;
background: #eee4da;
}
#div2048 div.tile4
{
color: #7c736a;
background: #ece0c8;
}
#div2048 div.tile8
{
color: #fff7eb;
background: #f2b179;
}
#div2048 div.tile16
{
color:#fff7eb;
background:#f59563;
}
#div2048 div.tile32
{
color:#fff7eb;
background:#f57c5f;
}
#div2048 div.tile64
{
color:#fff7eb;
background:#f65d3b;
}
#div2048 div.tile128
{
color:#fff7eb;
background:#edce71;
}
#div2048 div.tile256
{
color:#fff7eb;
background:#edcc61;
}
#div2048 div.tile512
{
color:#fff7eb;
background:#ecc850;
}
#div2048 div.tile1024
{
color:#fff7eb;
background:#edc53f;
}
#div2048 div.tile2048
{
color:#fff7eb;
background:#eec22e;
}
js:
function game2048(container)
{
this.container = container;
this.tiles = new Array(16);
} game2048.prototype = {
init: function(){
for(var i = 0, len = this.tiles.length; i < len; i++){
var tile = this.newTile(0);
tile.setAttribute('index', i);
this.container.appendChild(tile);
this.tiles[i] = tile;
}
this.randomTile();
this.randomTile();
},
newTile: function(val){
var tile = document.createElement('div');
this.setTileVal(tile, val)
return tile;
},
setTileVal: function(tile, val){
tile.className = 'tile tile' + val;
tile.setAttribute('val', val);
tile.innerHTML = val > 0 ? val : '';
},
randomTile: function(){
var zeroTiles = [];
for(var i = 0, len = this.tiles.length; i < len; i++){
if(this.tiles[i].getAttribute('val') == 0){
zeroTiles.push(this.tiles[i]);
}
}
var rTile = zeroTiles[Math.floor(Math.random() * zeroTiles.length)];
this.setTileVal(rTile, Math.random() < 0.8 ? 2 : 4);
},
move:function(direction){
var j;
switch(direction){
case 'W':
for(var i = 4, len = this.tiles.length; i < len; i++){
j = i;
while(j >= 4){
this.merge(this.tiles[j - 4], this.tiles[j]);
j -= 4;
}
}
break;
case 'S':
for(var i = 11; i >= 0; i--){
j = i;
while(j <= 11){
this.merge(this.tiles[j + 4], this.tiles[j]);
j += 4;
}
}
break;
case 'A':
for(var i = 1, len = this.tiles.length; i < len; i++){
j = i;
while(j % 4 != 0){
this.merge(this.tiles[j - 1], this.tiles[j]);
j -= 1;
}
}
break;
case 'D':
for(var i = 14; i >= 0; i--){
j = i;
while(j % 4 != 3){
this.merge(this.tiles[j + 1], this.tiles[j]);
j += 1;
}
}
break;
}
this.randomTile();
},
merge: function(prevTile, currTile){
var prevVal = prevTile.getAttribute('val');
var currVal = currTile.getAttribute('val');
if(currVal != 0){
if(prevVal == 0){
this.setTileVal(prevTile, currVal);
this.setTileVal(currTile, 0);
}
else if(prevVal == currVal){
this.setTileVal(prevTile, prevVal * 2);
this.setTileVal(currTile, 0);
}
}
},
equal: function(tile1, tile2){
return tile1.getAttribute('val') == tile2.getAttribute('val');
},
max: function(){
for(var i = 0, len = this.tiles.length; i < len; i++){
if(this.tiles[i].getAttribute('val') == 2048){
return true;
}
}
},
over: function(){
for(var i = 0, len = this.tiles.length; i < len; i++){
if(this.tiles[i].getAttribute('val') == 0){
return false;
}
if(i % 4 != 3){
if(this.equal(this.tiles[i], this.tiles[i + 1])){
return false;
}
}
if(i < 12){
if(this.equal(this.tiles[i], this.tiles[i + 4])){
return false;
}
}
}
return true;
},
clean: function(){
for(var i = 0, len = this.tiles.length; i < len; i++){
this.container.removeChild(this.tiles[i]);
}
this.tiles = new Array(16);
}
} var game, startBtn; window.onload = function(){
var container = document.getElementById('div2048');
startBtn = document.getElementById('start');
startBtn.onclick = function(){
this.style.display = 'none';
game = game || new game2048(container);
game.init();
}
} window.onkeydown = function(e){
var keynum, keychar;
if(window.event){ // IE
keynum = e.keyCode;
}
else if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
keychar = String.fromCharCode(keynum);
if(['W', 'S', 'A', 'D'].indexOf(keychar) > -1){
if(game.over()){
game.clean();
startBtn.style.display = 'block';
startBtn.innerHTML = 'game over, replay?';
return;
}
game.move(keychar);
}
}
最少javascript代码完成一个2048游戏的更多相关文章
- 用javascript实现一个2048游戏
早就想自己写一个2048游戏了,昨晚闲着没事,终于写了一个 如下图,按方向键开始玩吧. 如果觉得操作不方便,请直接打开链接玩吧: http://gujianbo.1kapp.com/2048/2048 ...
- 65行 JavaScript 代码实现 Flappy Bird 游戏
飞扬的小鸟(Flappy Bird)无疑是2014年全世界最受关注的一款游戏.这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发,形式简易但难度极高的休闲游戏,很容易让人上瘾. 这里给大家分享一篇这 ...
- 30行JavaScript代码实现一个比特币量化策略
精简极致的均线策略 30行打造一个正向收益系统 原帖地址:https://www.fmz.com/bbs-topic-new/262 没错!你听的没错是30行代码!仅仅30行小编我习惯先通篇来看看 代 ...
- 【编程教室】PONG - 100行代码写一个弹球游戏
大家好,欢迎来到 Crossin的编程教室 ! 今天跟大家讲一讲:如何做游戏 游戏的主题是弹球游戏<PONG>,它是史上第一款街机游戏.因此选它作为我这个游戏开发系列的第一期主题. 游戏引 ...
- Javascript写了一个2048的游戏
去年2048很火, 本来我也没玩过, 同事说如果用JS写 只要100多行代码: PS(iWeb峰会暨攻城师嘉年华2015嘉年华要来啦, 在文章结尾有具体的地址和时间): 今天试了一下, 逻辑也不复杂, ...
- Egret的第一个2048游戏
http://bbs.egret-labs.org/thread-242-1-1.html 对于AS3的开发者来说,可以直接过渡到的HTML5框架就是Egret了,基本上是了解了TypeSprite的 ...
- 新书《编写可测试的JavaScript代码 》出版，感谢支持
本书介绍 JavaScript专业开发人员必须具备的一个技能是能够编写可测试的代码.不管是创建新应用程序,还是重写遗留代码,本书都将向你展示如何为客户端和服务器编写和维护可测试的JavaScript代 ...
- 如果让莎士比亚、海明威编写JavaScript代码
本文作者Angus Croll是Twitter工程师.JavaScript迷.文学迷,并且非常喜欢作家海明威.他在梦中"梦见"一些名人编写JavaScript代码,不同的作家呈现出 ...
- 引爆你的Javascript代码进化
转自:http://www.hicss.net/evolve-your-javascript-code/ 方才在程序里看到一段JS代码,写法极为高明,私心想着若是其按照规范来写,定可培养对这门语言的理 ...
随机推荐
- Strider安装(Ubuntu)
安装: git clone https://github.com/Strider-CD/strider.git && cd strider nam install 然而还是出现一大波错 ...
- mysql基础知识（5）－－视图
视图 单词:view 什么是视图: 视图可以看作是一个“临时存储的数据所构成的表”(非真实表),其实本质上只是一个select语句.只是将该select语句(通常比较复杂)进行一个“包装”,并设定了一 ...
- windows平台下，快速删除所有.svn文件夹
新建一个注册表文件名为:DELSVN.reg编辑其内容如下: Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Cla ...
- Supports BorlandIDEServices
Delphi: procedure SetKeystrokeDebugging(Debugging: Boolean); var Dialog: IOTAKeyboardDiagnostics beg ...
- cocos2d-x在android中响应返回键编译报错的bug分析
先看一段代码如何在Android中加入返回按键的响应 <span style="font-size:18px;">自己派生CCKeypadDelegate的子类,然后注 ...
- C# 获取某月的第一天和最后一天
/// <summary> /// 取得某月的第一天 /// </summary> /// <param name=" ...
- MSSQL手札三 MSSQL存储过程
--存储过程完成一段sql代码的封装 create proc trim --参数列表,多个间用逗号分隔 ) as --自定义代码段 ) set @str1=LTRIM(RTRIM(@str)) pri ...
- MVC个人认为的终极分页
//传入要查询的字段,查询条件(例如根据姓名查看数据的数据筛选),按照什么排序,页码,信息条数 //T:要操作的类型 //Tkey:根据什么类型来排,ID的话返回的是int类型,但是name的话又会返 ...
- “IPSec 共享密钥”丢失。
“IPSec 共享密钥”丢失.请验证您的设置并尝试重新连接. 但是这个vpn原来使用时不需要配置 共享的密钥,而且我也没有这个共享的密钥, 搜了下Mac OSX可以修改配置来绕过它. 在/etc/pp ...
- HDU 1712 ACboy needs your help (分组背包模版题)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1712 有n门课,和m天时间.每门课上不同的天数有不同的价值,但是上过这门课后不能再上了,求m天里的最大 ...