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编写2048小游戏

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

  • 原生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小游戏

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

  • 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游戏示例

    原生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

  • 使用Javascript写的2048小游戏

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

  • 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制作经典传统的拼图游戏

    基于javascript制作经典传统的拼图游戏

    本文实例为大家分享了javascript制作经典传统的拼图游戏的关键代码,供大家参考,具体内容如下 效果图: 拼出你喜欢的白雪公主和七个小矮人 实现代码: <!DOCTYPE html> <html> <head> <title>pingtu.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

  • 原生javascript制作的拼图游戏实现方法详解

    本文实例讲述了原生javascript制作的拼图游戏实现方法.分享给大家供大家参考,具体如下: 实现方法 //1.让所有的li(在ul里)可以拖拽 //2.交换li的位置  计算背景图位置 //1.让所有的li(在ul里)可以拖拽 //根据鼠标的位置,计算目标li的序号 //根据行号和列号计算下标 //行号*3+列号 //2.归位 此处没有背景图  请自行添加 css样式 <!DOCTYPE html> <html> <head> <meta charset=&q

  • 原生javascript制作贪吃蛇小游戏的方法分析

    本文实例讲述了原生javascript制作贪吃蛇小游戏的方法.分享给大家供大家参考,具体如下: <!--1. 创建场景 --> <!-- 2.定义初始数据  以及随机食物 --> <!-- 3.控制贪吃蛇方向 --> <!-- 4.判断位置以及和随机食物的位置 增加贪吃蛇长度 --> HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta char

  • python基于tkinter制作图形界面的2048游戏

    python基于tkinter制作图形界面的2048游戏

    2048游戏输出 项目先决条件 前提条件如下: 1. Python 2. Tkinter 创建main.py 代码: from tkinter import * from tkinter import messagebox import random class Board: bg_color={ '2': '#eee4da', '4': '#ede0c8', '8': '#edc850', '16': '#edc53f', '32': '#f67c5f', '64': '#f65e3b', '

  • 基于JavaScript制作一个骰子游戏

    基于JavaScript制作一个骰子游戏

    目录 知识点 HTML 部分 CSS 部分 JavaScript 部分 总结 游戏可以通过这个链接进入 完整源码我已经放在GitHub上了 这节实验我们将使用 HTML.CSS 和 JavaScript 构建一个骰子游戏.设置两名玩家(一个人玩也行)然后掷骰子,获得更高点数的玩家将赢得游戏. 知识点 :hover 选择器 querySelector() 方法 setAttribute() 方法 骰子 1-6 点的图片都放在这里了,大家可以将这些图片保存在本地的文件夹中然后用相对地址引用,或者也可

  • 一文教你用JavaScript制作个简单的大转盘游戏

    目录 背景 一.开始前的准备 二.画出大转盘 三.把奖励放上去 四.让大转盘滚起来 个人总结 背景 日常生活中,我们经常会见到形形色色的抽奖活动,例如九宫格.大转盘等等……以前都没去深入考虑过,如果让我去做这些小游戏,有哪些需要注意的事项,不试不知道,一试全是坑.正好最近有需求让我做一个大转盘游戏,那我也总结一下我的一些感想和经验. 一.开始前的准备 首先就是确定产品需求,仔细一看,emmm,就是正常的一个大转盘该有的东西,也没啥特殊要求,唯一需要注意的是大转盘的转盘个数需要动态变化,即用户设置

  • javascript制作游戏开发碰撞检测的封装代码

    javascript制作游戏开发碰撞检测的封装代码

    在JavaScript开发Web游戏时,需要使用到碰撞检测时,为了方便开发,封装了矩形和圆形的两个碰撞检测方式. [附带案例操作捕获一枚] [注意:代码上未做优化处理] 演示图 角色攻击区域碰撞检测.gif 塔防案例.gif 矩形区域碰撞检测 /** * 矩形区域碰撞检测 * Created by Administrator on 14-4-7. * author: marker */ function Rectangle(x, y, _width, _height){ this.x = x;

  • lua+love2d制作的2048游戏

    使用lua和love2d编写的pc版2048游戏,适用于linux和windows平台.依赖love2d游戏引擎,love2d需0.9及以上版本. core.lua 复制代码 代码如下: core = {} core.block = {} core.score = 0 core.best = 0 love.filesystem.setIdentity("2048") local function get_best()     if not love.filesystem.exists(

随机推荐