很久没学东西,没什么可写。
将前段时间无聊时写的一个js小游戏拿出来晒一晒。
模仿“是男人就下一百层”写的,只实现了最基本的功能,高手绕道。

js游戏-是男人就下一百层
毕竟不是自己的独立博客,没有FTP,上传文件也有诸多限制,压缩文件都无法上传,无奈~~
jquery.testGame.js
[code lang="javascript"]
(function($){
$.extend($.fn,{
testGame : function(options){
$.fn.testGame.defaults = {
level : 1
};
var opts = $.extend({}, $.fn.testGame.defaults, options);
var box = $(this);
var cloudCreateTimer;
var cloudCreateSpeed = 1000;
var dieHeight = box.height();
var scores = 0;
var h = new Man();
function run()
{
h.init();
//监听左右方向键
$(document).keydown(function(key){
if(key.keyCode == 37){
h.goLeft();
}else if(key.keyCode == 39){
h.goRight();
}
});
h.fallDown();
createCloud();
}
function Man()
{
this.body = $('
H
');
this.timer;
this.fallDownFrequency = 20;
this.fallDownSpeed = 3;
this.manMoveSpeed = 10;
this.stopTop;
this.stopLeft;
this.stopRight;
this.stopSpeed;
if (typeof Man._initialized == "undefined") {
//放置小人
Man.prototype.init = function() {
var box_width = box.width();
var box_height = box.height();
var man_init_w = box_width / 2;
this.body.appendTo(box);
this.body.css('left', man_init_w+'px');
this.body.css('top', '0px');
}
//向左走
Man.prototype.goLeft = function() {
var p = this.body.css('left');
p = p.substring(0, p.length - 2);
var q = parseInt(p) - this.manMoveSpeed;
q = q >= 0 ? q : 0;
this.body.css('left', q+'px');
this.leaveCloud();
}
//向右走
Man.prototype.goRight = function() {
var box_width = parseInt(box.width());
var p = this.body.css('left');
p = p.substring(0, p.length - 2);
var q = parseInt(p) + this.manMoveSpeed;
q = q = dieHeight){
clearInterval(manTimer);
gameOver();
}else{
var q = parseInt(p) + manFallDownSpeed;
manBody.css('top', q+'px');
}
}, this.fallDownFrequency);
this.timer = manTimer;
}
}
//被云朵接住
Man.prototype.stopFall = function(top, left, right, cloudSpeed){
var manTop = this.body.css('top');
var manLeft = this.body.css('left');
manTop = parseInt(manTop.substring(0, manTop.length - 2));
manLeft = parseInt(manLeft.substring(0, manLeft.length - 2));
//人被云朵接住
if
{
this.stopTop = undefined;
this.stopLeft = undefined;
this.stopRight = undefined;
this.stopSpeed = undefined;
this.fallDown();
}
}
Man._initialized = true;
}
}
function Cloud()
{
this.body = $('
_______
');
this.frequency = 20;
this.speed = 3;
this.timer;
if (typeof Cloud._initialized == "undefined") {
//放置云朵
Cloud.prototype.init = function(){
var cloudLeft = Math.random() * 230;
this.body.appendTo(box);
this.body.css('top', dieHeight+'px');
this.body.css('left', cloudLeft+'px');
}
//云朵向上飘
Cloud.prototype.fly = function(){
var cloudBody = this.body;
var cloudTimer = this.timer;
var cloudSpeed = this.speed;
cloudTimer = setInterval(function(){
var p = cloudBody.css('top');
var cloudLeft = cloudBody.css('left');
p = parseInt(p.substring(0, p.length - 2));
cloudLeft = parseInt(cloudLeft.substring(0, cloudLeft.length - 2));
var cloudRight = cloudLeft + parseInt(cloudBody.width());
h.stopFall(p, cloudLeft, cloudRight, cloudSpeed);
if(p <= 0){
clearInterval(cloudTimer);
cloudBody.remove();
}else{
var q = parseInt(p) - cloudSpeed;
cloudBody.css('top', q+'px');
}
}, this.frequency);
}
Cloud._initialized = true;
}
}
//定时产生一片云
function createCloud()
{
cloudCreateTimer = setInterval(function(){
var c = new Cloud();
c.init();
c.fly();
scores++;
}, cloudCreateSpeed);
}
//游戏结束
function gameOver()
{
if(cloudCreateTimer != undefined)
{
clearInterval(cloudCreateTimer);
}
alert('游戏结束,您的得分:'+scores);
$('#man').remove();
$('.cloud').remove();
}
return this.each(function(){
run();
});
}
});
})(jQuery);
[/code]
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| #contrainer{ position: absolute; width:300px; height: 450px; margin: 0px 0 0 2px; border: 2px #CCCCCC solid; overflow: hidden;}
#man{ position: absolute;}
.cloud{ position: absolute;}
<p class="msg"> 使用左右键控制,碰到上边缘或下边缘游戏结束</p>
<div id="contrainer">
</div>
$(document).ready(function(){
$("#contrainer").testGame();
}) |
最新评论