下一百层游戏

来源：互联网发布：药品网络经营许可证编辑：程序博客网时间：2024/05/17 06:46

canvas，lufy原版

http://www.hui12.com/nbin/game/down100/index.html

https://nbin2008.github.io/demo/down100/index.html

div版，推举chrome查看，css3全支持。

http://www.hui12.com/nbin/game/down100/index2.html

https://nbin2008.github.io/demo/down100/index2.html

div版源码

<!DOCTYPE html><html><head><meta charset="utf-8"><title>是男人就下100层 div版</title><link rel="stylesheet" type="text/css" href="css/index2.css"/><script src="js/jquery-2.1.0.js"></script><script src="js/index2.js"></script></head><body><div class="box"><div class="bgLayer"></div><div class="floorLayer"></div><div class="hero"></div><div class="topHit"></div><div class="blood"></div><div class="txt"></div><div class="btn">开始游戏</div></div></body></html>

*{ margin: 0; padding: 0; }.box{width: 320px; height: 480px; left: calc(50% - 160px); top: calc(50% - 240px); position: absolute; overflow: hidden;}.box *{position: absolute; box-sizing: border-box;}/* 背景层 */.bgLayer{width: 320px; height: 960px; left: 0; top: 0; background: url(../images/bg.jpg) repeat-y; }.floor01{width: 100px; height: 20px; background: url(../images/floor01.png) no-repeat;}.floor02{width: 100px; height: 20px; background: url(../images/floor1.png) no-repeat 0 0;}.floor02.state{background-position: -100px 0;}.floor03{width: 100px; height: 20px; background: url(../images/floor2.png) no-repeat 0 0;}.floor03.state{background-position: -100px 0;}.floor04{width: 100px; height: 20px; background: url(../images/floor3.png) no-repeat;}.floor05, .floor06{width: 80px; height: 20px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}.floor05:before, .floor06:before{content: ''; display: block; width: 20px; height: 20px; background: url(../images/wheel.png) no-repeat; left: -10px; top: -1px; position: absolute;}.floor05:after, .floor06:after{content: ''; display: block; width: 20px; height: 20px; background: url(../images/wheel.png) no-repeat; right: -10px; top: -1px; position: absolute;}.floor05:before, .floor05:after{animation: rotateLeft 3s linear 0s infinite normal;}.floor06:before, .floor06:after{animation: rotateRight 3s linear 0s infinite normal;}/* 顶部扣血层 */.topHit{width: 320px; height: 20px; left: 0; top: 0; background: url(../images/floor3.png) repeat-x; transform: rotate(180deg);}/* 地板层 */.floorLayer{width: 320px; height: 480px; left: 0; top: 0;}/* 游戏按钮 */.btn{width: 100px; height: 40px; background-color: #fff; left: calc(50% - 50px); top: calc(50% - 20px); text-align: center; line-height: 40px; cursor: pointer; font-weight: bold;}/* 英雄层 */.hero{width: 40px; height: 50px; background: url(../images/hero.png) no-repeat 0 0; display: none;}.up{background-position: -40px 0;}.left{animation: left 1s step-start 0s infinite normal;}.right{animation: right 1s step-start 0s infinite normal;}/* * 血量 */.blood{color: #fff; left: 5px; top: 15px;}.txt{color: #fff; left: 5px; top: 35px; font-size: 12px;}/* * 动画类效果 */@keyframes rotateLeft{from{ transform: rotate(0); }to{ transform: rotate(-360deg); }}@keyframes rotateRight{from{ transform: rotate(0); }to{ transform: rotate(360deg); }}@keyframes left{0% { background-position: -520px 0; }9% { background-position: -560px 0; }18% { background-position: -600px 0; }27% { background-position: -640px 0; }36% { background-position: -680px 0; }45% { background-position: -720px 0; }54% { background-position: -760px 0; }63% { background-position: -800px 0; }72% { background-position: -840px 0; }81% { background-position: -880px 0; }90% { background-position: -920px 0; }100% { background-position: -520px 0; }}@keyframes right{0% { background-position: -80px 0; }9% { background-position: -120px 0; }18% { background-position: -160px 0; }27% { background-position: -200px 0; }36% { background-position: -240px 0; }45% { background-position: -280px 0; }54% { background-position: -320px 0; }63% { background-position: -360px 0; }72% { background-position: -400px 0; }81% { background-position: -440px 0; }90% { background-position: -480px 0; }100% { background-position: -80px 0; }}

$(document).ready(function(){var $bgLayer = $(".bgLayer"),$floorLayer = $(".floorLayer"),$hero = $(".hero"),//40*50$blood = $(".blood"),$txt = $(".txt"),$btn = $(".btn"),height = $(".box").height();function Game(){this.init();};var proto = {init: function(){var This = this;$btn.show();$btn.one("click",function(){$btn.text("Game Over").hide();This.before();This.start();This.keyBoardEvent();});},before: function(){var nb = this.nb = {};nb.stageSpeed = 1;//背景和地板速度nb.g = 0.6;//重力加速度nb.v = 0;//英雄下落速nb.timer = null;//总定时器nb.bgIndex = 0;//背景移动时间nb.floorIndex = 0;//地板出现间隔时间nb.cache = [];nb.keyCode = null;nb.moveSpeed = 4;nb.blood = 3;nb.count = 0;$hero.fadeIn();$txt.text("第0层");$hero.x = 140;$hero.oldY = $hero.y = 100;},gameOver: function(){var nb = this.nb;clearInterval(nb.timer);$floorLayer.html("");this.init();},bloodEvent: function(){var nb = this.nb;if( nb.blood>3 ) nb.blood = 3;var x = nb.blood == 3 ? "★★★" :nb.blood == 2 ? "★★☆" :nb.blood ==1 ? "★☆☆" : "☆☆☆";$blood.text(x);if( nb.blood <=0 ){this.gameOver();}},keyBoardEvent: function(){var nb = this.nb;$(document).off();$(document).on("keydown",function(e){if( e.keyCode == 37 ){nb.keyCode = "left";}else if( e.keyCode == 39 ){nb.keyCode = "right";};});$(document).on("keyup", function(){nb.keyCode = null;});},bgEvent: function(){var nb = this.nb;nb.bgIndex -= nb.stageSpeed;if( nb.bgIndex <= -320 ) nb.bgIndex = 0;$bgLayer.css("transform","translate3d(0,"+ nb.bgIndex +"px,0)");},floorEvent: function(){var This = this;nb = this.nb;nb.floorIndex++;if( nb.floorIndex > 140 ){nb.floorIndex = 0;var ran = Math.ceil(Math.random()*6);var f = ran == 1 ? new Floor01() :ran == 2 ? new Floor02() :ran == 3 ? new Floor03() :ran == 4 ? new Floor04() :ran == 5 ? new Floor05() :ran == 6 ? new Floor06() : "";nb.cache.push(f);};$(nb.cache).each(function(i,v){if( v.run(nb) || v.check(nb) ){v.f.remove();nb.cache.splice(i,1);nb.count++;This.countEvent();};v.hit(nb);});},countEvent: function(){var nb = this.nb;var t = $txt.text();$txt.text( "第"+Math.floor(nb.count/5)+"层" );if( t != $txt.text() ) nb.blood++;},heroEvent: function(){var This = this,nb = this.nb;nb.isJump = true;//在空中为truefor( var i=0; i<nb.cache.length; i++ ){var f= nb.cache[i];if( nb.v>=0 && $hero.y+50>=f.y+f.hy && $hero.oldY+40<=f.y+f.hy+1 && $hero.x + 30 >= f.x && $hero.x <= f.x + 90 ){nb.isJump = false;f.child = true;nb.v = 0;}else{f.child = false;};if( $hero.y <= 20 ){nb.blood--;$hero.y = 100;nb.isJump = true;f.child = false;};};$hero.oldY = $hero.y;if( nb.isJump ){$hero.removeClass("left right").addClass("up");nb.v += nb.g;nb.v = nb.v>=10 ? 10 : nb.v;$hero.y += nb.v;}else{if( nb.keyCode == "left" ){$hero.removeClass("up right").addClass("left");}else if( nb.keyCode == "right" ){$hero.removeClass("left up").addClass("right");}else{$hero.removeClass("left right up");};}if( nb.keyCode == "left" ){$hero.x -= nb.moveSpeed;}else if( nb.keyCode == "right" ){$hero.x += nb.moveSpeed;};heroPosition(nb);},start: function(){var This = this,nb = this.nb;nb.timer = setInterval(gg,20);function gg(){This.bgEvent();This.floorEvent();This.heroEvent();This.bloodEvent();};//第一次地板居中setTimeout(function(){var f =  new Floor01(1);nb.cache.push(f);},10)},};Game.prototype = proto;var g = new Game();/* * hero位置 */function heroPosition(nb){$hero.x = $hero.x<=0 ? 0 : $hero.x;$hero.x = $hero.x>=280 ? 280 : $hero.x;if( $hero.y >= 480 ){nb.blood = 0;};$hero.css("transform","translate3d("+ $hero.x +"px,"+ $hero.y +"px,0px)")};/* * 地板类型 */function Floor(){this.hy = 0;};Floor.prototype.create = function(){this.width = 100;this.height = 20;this.x = parseInt(Math.random()*320) - 50;this.y = height;this.f = $('<div class="'+ this.name +'"></div>');$floorLayer.append(this.f);this.f.css({"width": this.width,"height": this.height,"transform": "translate3d("+ this.x +"px,"+ this.y +"px,0)"});};Floor.prototype.run = function(nb){this.y -= nb.stageSpeed;this.f.css("transform","translate3d("+ this.x +"px,"+ this.y +"px,0)");if( this.child ){$hero.y = this.y+this.hy - 49;};if( this.y <= -20 ){//如果超出屏幕，则返回truereturn true;}else{return false;};};Floor.prototype.hit = function(){};Floor.prototype.check = function(){};//地板1普通型function Floor01(one){this.name = "floor01";one ? this.one() : this.create();};Floor01.prototype = new Floor();Floor01.prototype.one = function(){this.width = 100;this.height = 20;this.x = 110;this.y = 450;this.f = $('<div class="'+ this.name +'"></div>');$floorLayer.append(this.f);this.f.css({"width": this.width,"height": this.height,"transform": "translate3d("+ this.x +"px,"+ this.y +"px,0)"});};//地板2会消失function Floor02(){this.sTime = 0;this.name = "floor02";this.create();};Floor02.prototype = new Floor();Floor02.prototype.check = function(){if( !this.child ) return;this.sTime++;if( this.sTime == 20 ){this.f.addClass("state");}else if( this.sTime>=40 ){return true;}};//地板3 有弹簧function Floor03(){this.name = "floor03";this.create();};Floor03.prototype = new Floor();Floor03.prototype.check = function(nb){if( this.child ){this.f.addClass("state");this.child = false;nb.v = -10;}else{this.f.removeClass("state");};};//地板4 扣血function Floor04(){this.name = "floor04";this.hy = 10;this.create();};Floor04.prototype = new Floor();Floor04.prototype.hit = function(nb){if( !this.first && this.child ){this.first = true;nb.blood--;};};//地板5 强制←移动function Floor05(){this.name = "floor05";this.create();};Floor05.prototype = new Floor();Floor05.prototype.hit = function(){if( this.child ){$hero.x -= 1;};};//地板6 强制→移动function Floor06(){this.name = "floor06";this.create();};Floor06.prototype = new Floor();Floor06.prototype.hit = function(){if( this.child ){$hero.x += 1;};};});

0 0