博客首页JavaScript分类
Js实现的接水果游戏
发布时间:2016-05-16 14:34:59编辑:Mr.Co阅读(7825)
很久之前写的一个JS小游戏,纯属娱乐,主要靠键盘左右键控制贪吃狗移动,每种水果分数不一样,分数越高等级越高,等级越高速度越快,这就需要靠你的移动技巧了,当然水果中还潜藏着炸弹跟导弹。要小心哦!!
Html代码:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>接水果-科博网-Mr.Co个人博客</title> <meta name="Author" content="Mr.Co" /> <style type='text/css'> * { padding: 0px; margin: 0px; } body { background: black; } .game_container { position: absolute; width: 500px; height: 530px; left: 50%; top: 50%; margin-left: -250px; margin-top: -265px; border: 2px solid #000; } #game_info { left: 0px; top: 0px; position: absolute; width: 98px; height: 530px; background: #ccc; border-right: 1px solid #000; } #game_info dl { list-style: none; margin-top: 10px; } #game_info dl dt { font-weight: bold; font-family: '微软雅黑'; font-size: 14px; text-indent: 10px; text-shadow: 1px 1px #ccc; } #game_info dl dd { font-size: 12px; line-height: 30px; text-align: center; } #game_info #gameCent, #game_info #gameLevel { font-weight: bold; text-shadow: 2px 1px #ccc; color: #0000ff; font-size: 16px; font-family: '微软雅黑'; margin: 0 2px; } #game_info #gameLevel { color: red; } #game_info .life_bar_box { display: inline-block; margin-left: 8px; height: 12px; width: 82px; border: 1px solid #000; box-shadow: 2px 1px 5px #ccc; border-radius: 2px 2px; line-height: normal; _overflow: hidden; } #game_info #lifeBar { display: inline-block; height: 10px; background: green; width: 80px; margin-left: 1px; box-shadow: 1px 1px 10px #ccc; } #game_info #lifeBar.yellow { background: #ef9c26; } #game_info #lifeBar.red { background: red; } #game_box { left: 100px; top: 0px; position: absolute; width: 400px; height: 500px; border: 1px solid #00415e; background: url(images/bg.jpg) no-repeat -600px -160px; overflow: hidden; } #game_box .bg_layer { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; z-index: 2; } .car_bar { position: absolute; width: 100%; bottom: 0px; left: 0px; height: 70px; z-index: 9; } .car_bar .car { position: absolute; height: 70px; width: 50px; background: #b6d152; background: url(images/jie.png) no-repeat; } .thing { position: absolute; width: 30px; height: 30px; z-index: 10; } #game_box .tip_box { position: absolute; display: inline-block; background: url(images/kiss.png) no-repeat left top; width: 45px; height: 16px; z-index: 11; } #game_box .tip_box.miss { background-position: 0px 0px; } #game_box .tip_box.kiss { background-position: 0px -18px; } #game_box .tip_box.bomb { background-position: 0px -37px; width: 94px; height: 61px; } #game_box .upgrade_tip, #game_box .game_over_tip { display: inline-block; position: absolute; z-index: 12; font-family: '华文琥珀', '微软雅黑', '宋体'; font-size: 36px; color: #ffd800; font-style: italic; text-shadow: 1px 1px 5px #fff; width: 100%; height: 40px; top: 50%; margin-top: -20px; text-align: center; } #game_box .game_over_tip { color: red; text-shadow: 1px 1px 5px blue; font-family: 'Showcard Gothic'; } #game_control { position: absolute; bottom: 0px; left: 100px; width: 400px; margin: 0 auto; background: #a9a9a9; height: 30px; line-height: 30px; text-align: center; } #game_control button { margin-right: 10px; cursor: pointer; height: 30px; width: 60px; } </style> </head> <body> <div class='game_container'> <!--游戏信息 start--> <div id='game_info'> <dl> <dt>生命力</dt> <dd style='text-align: left;'> <div class='life_bar_box'><span id='lifeBar'></span></div> </dd> <dt>当前玩家</dt> <dd>西门吹雪</dd> <dt>当前关卡</dt> <dd>第<strong id='gameLevel'>1</strong>关</dd> <dt>当前得分</dt> <dd id='gameCent'>0</dd> <dt>操控说明</dt> <dd style='line-height: normal;'>使用"→"跟"←"来控制移动,要小心导弹、炸弹</dd> </dl> </div> <!--游戏信息 end--> <!--游戏屏幕 start--> <div id='game_box'> <div class='bg_layer'></div> <!--<span class='game_over_tip'>Game Over!</span>--> <div class='car_bar'> <div id='carBox' class='car'></div> </div> </div> <!--游戏屏幕 end--> <!--游戏控制 start--> <div id='game_control'> <button id='btnStart'>开始</button> <button id='btnPause'>暂停</button> </div> <!--游戏控制 end--> </div> <script type='text/javascript' src='jquery.js'></script> <script type='text/javascript' src='game.js'></script> <script type='text/javascript'> $(function () { $('#btnStart').click(function () { FruitGame.Start(); }); }); </script> </body> </html>
JS代码:
/** * 接水果-游戏 * User: MrCo * Date: 14-4-22 * Time: 下午3:25 * Version:1.0 */ (function(window,undefined){ /** * 水果游戏初始化对象 */ var fruitGame = function(args){ /*水果类型*/ this.FruitList = [ { ID:'F1', FruitName:'桃子',Icon:'images/1.png',Cent:50 }, { ID:'F2', FruitName:'苹果',Icon:'images/2.png',Cent:50 }, { ID:'F3', FruitName:'梨子',Icon:'images/3.png',Cent:50 }, { ID:'F4', FruitName:'西红柿',Icon:'images/4.png',Cent:30 }, { ID:'F5', FruitName:'香蕉',Icon:'images/5.png',Cent:30 }, { ID:'F6', FruitName:'芒果',Icon:'images/6.png',Cent:50 }, { ID:'F7', FruitName:'橘子',Icon:'images/7.png',Cent:30 }, { ID:'F8', FruitName:'杏子',Icon:'images/8.png',Cent:20 }, { ID:'F9', FruitName:'草莓',Icon:'images/9.png',Cent:10 }, { ID:'F10', FruitName:'樱桃',Icon:'images/10.png',Cent:10 }, { ID:'F11', FruitName:'柠檬',Icon:'images/11.png',Cent:30 }, { ID:'F12', FruitName:'西瓜',Icon:'images/12.png',Cent:60 }, { ID:'F13', FruitName:'火龙果',Icon:'images/13.png',Cent:100 }, { ID:'F14', FruitName:'菠萝',Icon:'images/14.png',Cent:80 } ]; /*炸弹类型*/ this.BombList = [ { ID:'B1',BombName:'土雷',Icon:'images/15.png',Life:10 }, { ID:'B2',BombName:'导弹',Icon:'images/16.png',Life:40 } ]; /*关卡等级*/ this.LevelList = [ { Level:1,Cent:1000,Speed:1000 }, { Level:2,Cent:2000,Speed:600 }, { Level:3,Cent:6000,Speed:400 }, { Level:4,Cent:12000,Speed:200 } ]; /*生成水果炸弹的全局引用*/ this.BuilderFruit = null; /*水果炸弹往下移动的全局引用*/ this.FruitMove = null; /*全局参数设置*/ this.Setting = $.extend({ //游戏盒子 GameBox:$('div#game_box'), //水果篮 CarBox:$('div#carBox'), //水果篮移动像素 CarMoveWidth:30, //水果篮宽度 CarBoxWidth:$('div#carBox').width(), //游戏盒子宽度 BoxWidth:400, //游戏盒子高度 BoxHeight:500, //水果宽度 FruitWidth:30, //当前总得分 CountCent:0, //当前关卡级别 LevelNum:1, //当前关卡级别-升级监听变量 ListenerLevelNum:1, //玩家姓名 UserName:'张三', //玩家总血量 LifeSize:80, //是否暂停 Pause:false, //是否开始 Start:false },args); } /** * 获取游戏等级对象 */ fruitGame.prototype.GetLevelModel = function(level){ var _levels = this.LevelList, _levelObj; for(var i = 0, _count = _levels.length; i < _count; i++){ _levelObj = _levels[i]; if(_levelObj.Level == level) return _levelObj; } return undefined; } /** * 随机获得水果类型,哈哈,有可能是炸弹 */ fruitGame.prototype.GetRandomFruit = function(){ var _this = this, _fruitCount = 0, _fruitIndex = 0, _fruitList = _this.FruitList.concat(_this.BombList); _fruitCount = _fruitList.length; _fruitIndex = parseInt(Math.random() * _fruitCount); return _fruitList[_fruitIndex]; } /** * 游戏等级监听器 */ fruitGame.prototype.GameLevelListener = function(){ var _this = this, _countCent = _this.Setting.CountCent, _levelList = _this.LevelList, _levelObj; for(var i = 0,_count = _levelList.length; i < _count; i++){ _levelObj = _levelList[i]; if(_levelObj.Cent >= _countCent){ if(_levelObj.Level > _this.Setting.ListenerLevelNum){ _this.Setting.ListenerLevelNum = _levelObj.Level; _this.ShowUpgrade(_levelObj.Level); } $('#gameLevel').text(_levelObj.Level); _this.Setting.LevelNum = _levelObj.Level; break; } } } /** * 显示提示框,Miss,Kiss,Bomb * @type int miss ,kiss, bomb * @position object { X:0,Y:0 } */ fruitGame.prototype.ShowTipBox = function(type,position){ var _this = this, _tipBoxID = Math.random().toString().replace('.',''), _tipBox = '<i id="'+ _tipBoxID +'" class="tip_box '+ type +'" style=" left:' + position.X + 'px; top:' + position.Y + 'px;"></i>'; _this.Setting.GameBox.append(_tipBox); setTimeout(function(){ $('#' + _tipBoxID).remove(); },300); } /** * 升级提示框 * @level int 等级 */ fruitGame.prototype.ShowUpgrade = function(level){ var _this = this, _tipBox = '<span class="upgrade_tip">第'+ level +'关,加油!</span>'; _this.Setting.GameBox.append(_tipBox); setTimeout(function(){ $('span.upgrade_tip').remove(); },2000); } /** * 绑定控制水果篮的左右移动 */ fruitGame.prototype.BindControlMove = function(){ var _this = this; $(window).keydown(function(e){ var _code = e.keyCode; //左 if(_code == 37) _this.CarBoxMove('left'); //右 if(_code == 39) _this.CarBoxMove('right'); }); } /** * 水果篮位置 */ fruitGame.prototype.CarBoxMove = function(action){ var _this = this, _setting = _this.Setting, _left = _setting.CarBox.position().left; if(action == 'left'){ _left = _left - _setting.CarMoveWidth; if(_left < 0) return; $('div#carBox').css({ left:_left + 'px' }); } if(action == 'right'){ if(_left > _setting.BoxWidth - _setting.CarBoxWidth) return; _left = _left + _setting.CarMoveWidth; $('div#carBox').css({ left:_left + 'px' }); } } /** * 生成水果的X位置 */ fruitGame.prototype.BuilderFruitPosition = function(){ var _setting = this.Setting, _left = parseInt(Math.random() * _setting.BoxWidth); return _left > _setting.BoxWidth - _setting.FruitWidth ? _setting.BoxWidth - _setting.FruitWidth : _left; } /** * 控制水果下落 */ fruitGame.prototype.FruitDownMove = function(element){ var _this = this, _setting = this.Setting; var _move = setInterval(function(){ var _$element = $(element), _top = _$element.position().top; _$element.css({ top:(_top + _setting.FruitWidth) + 'px' }); _this.FruitPutCount(_$element,_move); },this.GetLevelModel(_setting.LevelNum).Speed / 2); } /** * 水果炸弹,血量减少 */ fruitGame.prototype.FruitBomb = function(life){ var _this = this, _$lifeBar = $('#lifeBar'), _lifeSize = _$lifeBar.width(); _lifeSize -= life; if(_lifeSize <= 0){ _$lifeBar.animate({width:_lifeSize + 'px'},100,function(){ $('div.thing').remove(); _this.Setting.GameBox.append('<span class="game_over_tip">Game Over!</span>'); }); clearInterval(this.BuilderFruit); }else{ _$lifeBar.animate({width:_lifeSize + 'px'},100,function(){ if(_lifeSize <= _this.Setting.LifeSize / 1.5) _$lifeBar.removeAttr('class').addClass('yellow'); if(_lifeSize <= _this.Setting.LifeSize / 2) _$lifeBar.removeAttr('class').addClass('red'); }); } } /** * 水果爆炸后,抖动屏幕 */ fruitGame.prototype.FruitBombShock = function(){ var _this = this, _$gameBox = _this.Setting.GameBox.parent(), _x = _$gameBox.position().left, _y = _$gameBox.position().top, _shockWidth = 5, _shockHeight = 1, _shockCount = 0; var _shock = setInterval(function(){ if(_shockCount >= 10){ _$gameBox.css({ left:_x + 'px', top:_y + 'px'}); clearInterval(_shock); return; } if(_shockCount % 2 == 0) _$gameBox.css({ left:_x + _shockWidth + 'px', top:_y + _shockHeight + 'px'}); else _$gameBox.css({ left:_x - _shockWidth + 'px', top:_y - _shockHeight + 'px'}); _shockCount++; },20); } /** * 计算投入到篮里的水果 */ fruitGame.prototype.FruitPutCount = function(element,elementMove){ var _this = this, _setting = _this.Setting, _carBoxLeft = _setting.CarBox.position().left, _carBoxTop = _setting.CarBox.parent().position().top, _elTop = element.position().top + element.height(), _elLeft = element.position().left + element.width(), _fruitCent = parseInt(element.attr('cent') || 0), _life = element.attr('life'); if(_elLeft >= _carBoxLeft && _elLeft - element.width() <= _carBoxLeft + _setting.CarBoxWidth && _elTop - 50 >= _carBoxTop){ clearInterval(elementMove); element.remove(); if(typeof _life == 'undefined'){ //console.log('A:' + _life + ' - ' + (typeof _life == 'undefined') + ' - ' + _fruitCent); _setting.CountCent += _fruitCent; $('#gameCent').text(_setting.CountCent); _this.GameLevelListener(); _this.ShowTipBox('kiss',{ X:_elLeft - _setting.FruitWidth, Y: _elTop - 30 }); }else{ //console.log('B:' + _life); _this.FruitBomb(_life); _this.ShowTipBox('bomb',{ X:_elLeft - _setting.FruitWidth - 20, Y: _elTop - 60 }); _this.FruitBombShock(); } }else if(_elTop - 60 > _carBoxTop){ clearInterval(elementMove); element.remove(); _this.ShowTipBox('miss',{ X:_elLeft - _setting.FruitWidth, Y: _elTop - 60 }); } } /** * 开始游戏 */ fruitGame.prototype.Start = function(){ var _this = this, _setting = this.Setting; _this.BindControlMove(); _this.BuilderFruit = setInterval(function(){ var _domDiv = document.createElement('div'), _fruitObj = _this.GetRandomFruit(); _domDiv.setAttribute('class','thing'); _domDiv.setAttribute('idx',_fruitObj.ID); if(_fruitObj.Life){ _domDiv.setAttribute('life',_fruitObj.Life); }else{ _domDiv.setAttribute('cent',_fruitObj.Cent); } _domDiv.setAttribute('style','left:' + _this.BuilderFruitPosition() + 'px;'); _domDiv.innerHTML = '<img src="'+ _fruitObj.Icon +'" width="30" height="30"/>'; _setting.GameBox.append(_domDiv); _this.FruitDownMove(_domDiv); },_this.GetLevelModel(_setting.LevelNum).Speed); return this; } /** * 游戏初始化 */ fruitGame.prototype.Init = function(){ var _this = this; //new fruitGame().Start(); } window.FruitGame = function(){ return new fruitGame(); }(); })(window);
Demo地址:http://www.mrco.cn/demo/jieshuiguo/
转载请注明出自:http://www.mrco.cn/article/57396a14c5dd0836266cf2a1.html