javascript实现2048游戏示例

原生javascript代码写的2048游戏。建议在谷歌浏览器下跑。

2048.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>

2048.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;
}

2048.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);
 }
}

赞 (0)

相关推荐

  • 使用Javascript写的2048小游戏

    最近心血来潮,项目结束了,使用javascript写个小游戏,练练收吧,写的不好还请各位大侠给出批评建议. HTML代码如下 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="2048.css"/> <scri

  • 原生js编写2048小游戏

    原生js编写2048小游戏

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <title> 2048-game </title> <meta charset="utf-8" /> <style media="screen"> #game { display: none; position: absolute; left: 0px; top: 0px; right: 0px; b

  • Javascript编写2048小游戏

    Javascript编写2048小游戏

    去年2048很火, 本来我也没玩过, 同事说如果用JS写2048 只要100多行代码: 今天试了一下, 逻辑也不复杂, 主要是数据构造函数上的数据的各种操作, 然后通过重新渲染DOM实现界面的更新, 整体不复杂, JS,css,和HTML合起来就300多行: 界面的生成使用了underscore.js的template方法, 使用了jQuery,主要是DOM的选择和操作以及动画效果,事件的绑定只做了PC端的兼容,只绑定了keydown事件: 把代码放到github-page上, 通过点击这里查看

  • JavaScript 2048 游戏实例代码(简单易懂)

    JavaScript 2048 游戏实例代码(简单易懂)

    废话不多说了,直接给大家贴代码了,觉得很满意直接拿去. <!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-equ

  • javascript版2048小游戏

    没有技术含量,只是用来练习代码逻辑的.为了代码结构清晰,我把逻辑控制部分写在全局变量里,用户界面操作封装在UI对象里,大概就这样了.仅供参考.工作时候,我的编码风格有人吐槽太乱了,所以我想试着写一个不是那么乱的东西出来.. 复制代码 代码如下: <HTML> <head> <title>2048 DEMO</title> <meta charset='utf-8' /> <!--  708616 javascript present  ht

  • javascript制作2048游戏

    2048.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="styleshe

  • javascript实现2048游戏示例

    原生javascript代码写的2048游戏.建议在谷歌浏览器下跑. 2048.html 复制代码 代码如下: <!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>2048

  • win32 api实现2048游戏示例

    win32 api实现2048游戏示例

    自学的win32编程,写了一个win32 API版2048,自己摸索着写的,按上下左右箭头开始游戏 复制代码 代码如下: #include <windows.h>#include <stdlib.h>#include <stdio.h>#include <ctime>LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);//全局操作数组int arr[4][4] = { { 0, 0, 0, 0 }, {

  • C++ 实现2048游戏示例

    C++ 实现2048游戏示例

    这游戏前一段时间传的很火,前几天早上实在太无聊了,就决定把这游戏自己也写一个. 前后写了一个多小时吧,大概300行左右,没什么复杂算法,不过实在懒得去优化了,但估计优化完能控制在200行以下,有兴趣的朋友可以自己优化一下. 说明:我一开始玩的是IOS APP版的TRHEES,后来才玩的2048,两者在滑动的规则上有些区别,本人这个版本是这两者的结合. 最后,祝试玩愉快! 界面丑陋,求不笑. 以下是源代码: 复制代码 代码如下: /*By Reason*/#include<iostream>#i

  • linux下实现的2048游戏示例分享

    my2048.c 复制代码 代码如下: #include"my_getch.h"#include"math.h"#include"time.h" #define SPACE() printf("    ")#define RED_NUM(n) printf("\033[;31m%4d",(n))#define GREEN_NUM(n) printf("\033[;32m%4d",(n))

  • Java实现经典游戏2048的示例代码

    Java实现经典游戏2048的示例代码

    目录 前言 主要设计 功能截图 代码实现 界面布局类 业务逻辑类 总结 前言 2014年Gabriele Cirulli利用周末的时间写2048这个游戏的程序,仅仅只是好玩而已.他想用一种不同的视觉展现效果和更快速的动画来创造属于自己的游戏版本. 游戏是用java语言实现,采用了swing技术进行了界面化处理,设计思路用了面向对象思想. 主要需求 每次控制所有方块向同一个方向运动,两个相同数字的方块撞在一起之后合并成为他们的和,每次操作之后会在空白的方格处随机生成一个2或者4,最终得到一个“20

  • 通过JavaScript实现扑克牌游戏的示例代码

    通过JavaScript实现扑克牌游戏的示例代码

    首先,我们知道一副牌里有54张牌,然后牌里的数字是从 3 - 2 的里面总共有13张牌,然后 4 中花色 分别是 ♠️ ♥️ ♣️ ♦️ 另外加上2个大小王!第一步:我们肯定需要有一个数组来装牌吧? 然后再书写一个函数,我们知道有多少张牌,然后牌里有多少花色是不是应该用一个双重循环将 number 里面的内容 和 flower 里面的内容 进行一个循环嵌入?最后在用 push 生成一个对象放到数组的后面?再到最后放入 大小王 . const number = ['3', '4', '5', '6

  • Java实现的简单掷骰子游戏示例

    Java实现的简单掷骰子游戏示例

    本文实例讲述了Java实现的简单掷骰子游戏.分享给大家供大家参考,具体如下: 要求: 掷两个骰子,每个骰子有六面, 分别为1.2.3.4.5.6.检查这两个骰子的和. 如果为2.3或12你就输了:如果和是7或者11你就赢了. 但如果和是其他数字(例如4.5.6.8.9或者10), 就确定了一个点.继续掷骰子直至抛出一个7或者 掷出和刚才相同的点数.如果掷出的是7,你就输了. 如果掷出的点数和你前一次掷出的点数相同, 你就赢了. java实现代码: enum Status { Win, Lose,

  • 通过javascript实现扫雷游戏代码实例

    这篇文章主要介绍了通过javascript实现扫雷游戏代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 html代码: <div id="mine"> <div class="level"> <button type="button">初级</button> <button type="button">中级&l

  • java实现2048游戏源代码

    本文实例为大家分享了java实现2048游戏源代码,供大家参考,具体内容如下 一.主要功能: 1.游戏初始化:新建游戏4×4的16宫格画布,随机格子上生成2或者4两个数字 2.格子的移动:先判断能否移动,移动后判断能否合并,合并后改变格子颜色和数字 3.新格子的生成:移动一次,就在剩余的空格子中随机生成一个2或者4 4.判赢:16宫格中合并出了"2048"则为游戏胜利 5.判输:16宫格中没有剩余空格子且不能再向任何方向移动则为游戏失败 二.项目的主要结构: 在项目2018游戏中,有4

随机推荐