网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 javascript制作2048游戏
内容
    这几天玩儿着2048这个游戏，突然心血来潮想练习下写程序的思路，于是乎就模仿做了一个，到目前位置还没有实现动态移动，不是很好看，不过玩儿着自己模仿的小游戏还是蛮爽的，哈哈
    2048.html
    <!DOCTYPE>
    <html xmlns="">
    <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="> -->
    <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);
    }
    }
    以上所诉就是本文的全部内容了，希望大家能够喜欢。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/18 23:34:59