用JavaScript实现的小游戏

最新推荐文章于 2025-06-09 16:30:43 发布

最新推荐文章于 2025-06-09 16:30:43 发布 · 938 阅读

文章标签：

#游戏 #JavaScript #prototype #Flash #ViewUI

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一款使用JavaScript开发的2D平台游戏。通过模拟Flash游戏的方式，作者创建了游戏地图，并实现了游戏角色的基本移动和跳跃功能。文章详细展示了游戏的实现代码，包括角色控制、碰撞检测等关键部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前在做Flash游戏的时候，想看看Javascript下的效果。就用JavaScript仿Flash做了两个小游戏，可以看到在Javascript下的运行效果还是很不错的。

图片加载延迟的问题没有处理，所以在第一次打开的时候会有点问题，按F5再刷一次就行了。

myMap = [
    [1, 1, 1, 1, 1,  1, 1, 1, 1, 1,  1, 1, 1, 1, 1,  1, 1, 1, 1, 1,  1, 1, 1, 1, 1,  1, 1, 1, 1, 1],
    [1, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  1, 0, 0, 0, 0,  0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  1, 1, 0, 0, 0,  0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0,  1, 1, 0, 0, 1,  1, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 1],
    [1, 0, 1, 0, 0,  0, 0, 0, 0, 0,  1, 1, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 1],

    [1, 0, 0, 0, 0,  0, 0, 0, 1, 1,  0, 0, 1, 1, 1,  0, 0, 0, 0, 0,  0, 0, 1, 1, 0,  0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 1, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 1, 1, 1,  0, 0, 0, 0, 0,  0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0,  0, 0, 0, 0, 0,  1, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  1, 1, 1, 0, 1],
    [1, 0, 0, 0, 0,  0, 0, 0, 0, 0,  1, 1, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 1],

    [1, 0, 0, 0, 0,  0, 0, 1, 1, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 1, 1, 0,  1, 0, 0, 0, 1],
    [1, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  1, 1, 0, 0, 0,  0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  1, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 1],
    [1, 0, 1, 1, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  1, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0,  1, 0, 1, 1, 0,  1, 1, 0, 0, 0,  0, 1, 1, 1, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 1],

    [1, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  0, 0, 0, 0, 1],
    [1, 1, 1, 1, 1,  1, 1, 1, 1, 1,  1, 1, 1, 1, 1,  1, 1, 1, 1, 1,  1, 1, 1, 1, 1,  1, 1, 1, 1, 1]
    ];
game = {tileW:30, tileH:30};
game.Tile0 = function () { };
game.Tile0.prototype.walkable = true;
game.Tile0.prototype.frame = 0;
game.Tile1 = function () { };
game.Tile1.prototype.walkable = false;
game.Tile1.prototype.frame = 1;

var hero = {xtile: 2, ytile: 2, speed: 4, jumpstart:-15, gravity: 1.0, jump: false};

function main(){
    buildMap(myMap);
    document.onkeydown = keyDown;
    document.onkeyup = keyUp;
    //document.addEventListener('keydown', detectKeys);
    fall(hero);
    var loop = function(){
        walk();
    }
    setInterval(loop, 12);
}
function walk(){
    if (hero.jump) {
        jump(hero);
    }
    if (39 == hero.dir) { //left
        moveChar(hero, 1, 0);
    } else if (37 == hero.dir) { //right
        moveChar(hero, -1, 0);
    }
    //hero.dir = 0;
}

function buildMap(map) {
    game.clip = document.getElementById('map');
    var mapWidth = map[0].length;
    var mapHeight = map.length;
    for (var i = 0; i<mapHeight; ++i) {
        for (var j = 0; j<mapWidth; ++j) {
            var name = "t_"+i+"_"+j;
            game[name] = new game["Tile"+map[i][j]]();

            var tile = document.createElement('img');
            tile.src = 'imgs/tiles/' + game[name].frame + '.gif';
            tile.style.left = (j * game.tileW) + 'px';
            tile.style.top = (i * game.tileH) + 'px';
            tile.style.position = 'absolute';
            game.clip.appendChild(tile);
        }
    }

    hero.width = 12.5; 
    hero.height = 12.5;
    var h = document.createElement('img');
    hero.x = (hero.xtile * game.tileW) + game.tileW/2 - 12.5;
    //hero.y = (hero.ytile * game.tileW) + game.tileH/2 - 12.5;
    hero.y = ( (hero.ytile + 1) * game.tileW) - 25;
    h.src = 'imgs/hero.gif';
    h.style.position = 'absolute';
    h.style.left = hero.x + 'px';
    h.style.top = hero.y + 'px';

    hero.clip = h;

    game.clip.appendChild(h);
}

function getMyCorners(x, y, ob) {
    ob.downY = parseInt( (y+ob.height-1) / game.tileH );
    ob.upY = parseInt( (y-ob.height) / game.tileH );
    ob.leftX = parseInt( (x-ob.width) / game.tileW );
    ob.rightX = parseInt( (x+ob.width-1)/game.tileW );

    ob.upleft = game["t_"+ob.upY+"_"+ob.leftX].walkable;
    ob.downleft = game["t_"+ob.downY+"_"+ob.leftX].walkable;
    ob.upright = game["t_"+ob.upY+"_"+ob.rightX].walkable;
    ob.downright = game["t_"+ob.downY+"_"+ob.rightX].walkable;
}


function moveChar(ob, dirx, diry, jump) {
    if (Math.abs(jump) == 1) {
        speed = ob.jumpspeed*jump;
    } else {
        speed = ob.speed;
    }
    getMyCorners(ob.x, ob.y+speed*diry, ob);
    if (diry == -1) {
        if (ob.upleft && ob.upright) {
            ob.y += speed*diry;
        } else {
            ob.y = ob.ytile*game.tileH+ob.height;
            ob.jumpspeed = 0;
        }
    }
    if (diry == 1) {
        if (ob.downleft && ob.downright) {
            ob.y += speed*diry;
        } else {
            ob.y = (ob.ytile+1)*game.tileH-ob.height;
            ob.jump = false;
        }
    }
    getMyCorners(ob.x+speed*dirx, ob.y, ob);
    if (dirx == -1) {
        if (ob.downleft && ob.upleft) {
            ob.x += speed*dirx;
            fall(ob);
        } else {
            ob.x = ob.xtile*game.tileW+ob.width;
        }
    }
    if (dirx == 1) {
        if (ob.upright && ob.downright) {
            ob.x += speed*dirx;
            fall(ob);
        } else {
            ob.x = (ob.xtile+1)*game.tileW-ob.width;
        }
    }

    ob.clip.style.left = ob.x - 12.5 + 'px';
    ob.clip.style.top = ob.y - 12.5 + 'px';

    ob.xtile = parseInt(ob.x / game.tileW);
    ob.ytile = parseInt(ob.y / game.tileH);
    return (true);
}
function jump(ob) {
    ob.jumpspeed = ob.jumpspeed + ob.gravity;
    if (ob.jumpspeed > game.tileH) {
        ob.jumpspeed = game.tileH;
    }
    if (ob.jumpspeed < 0) {
        moveChar(ob, 0, -1, -1);
    } else if (ob.jumpspeed>0) {
        moveChar(ob, 0, 1, 1);
    }
    return (true);
}
function fall(ob) {
    if (!ob.jump) {
        getMyCorners(ob.x, ob.y+1, ob);
        if (ob.downleft && ob.downright) {
            ob.jumpspeed = 0;
            ob.jump = true;
        }
    }
}

function keyUp(e) {
    //var keyCode = e.keyCode || e.which;
    var keyCode;
    if (window.event){
        keyCode = event.keyCode;
    }else{
        keyCode = e.which;
    }
    if (39 == keyCode && 39 == hero.dir) { //left
        hero.dir = 0;
    }else if (37 == keyCode && 37 == hero.dir) { //right
        hero.dir = 0;
    }
}
function keyDown(e) {
    //var keyCode = e.keyCode || e.which;
    var keyCode;
    if (window.event){
        keyCode = event.keyCode;
    }else{
        keyCode = e.which;
    }
    //alert(keyCode);
    var ob = hero;
    if (32 == keyCode &&  !ob.jump) {
        ob.jump = true;
        ob.jumpspeed = ob.jumpstart;
    }

    if (39 == keyCode) { //left
        hero.dir = 39;
        //moveChar(ob, 1, 0);
    } else if (37 == keyCode) { //right
        hero.dir = 37;
        //moveChar(ob, -1, 0);
    }

    /*
    if (!keyPressed) {
            ob.clip.char.gotoAndStop(1);
    } else {
            ob.clip.char.play();
    }
    */
}
main();