浏览 4403 次
|
锁定老帖子 主题：用JavaScript实现的小游戏
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-04-03
以前在做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();
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-04-03
补上一张截图
|
| 返回顶楼 | |
|
发表时间：2008-04-03
佩服LZ技术，更佩服LZ闲情逸致~~~
|
| 返回顶楼 | |
|
发表时间：2008-04-03
我看过一个js做的星际争霸，太强了。
|
| 返回顶楼 | |
|
发表时间：2008-04-04
一个游戏下来，精通了~~
|
| 返回顶楼 | |
