JS挖箱子小游戲，網(wǎng)頁游戲代碼

2024-09-05 12:21:02

字體：大中小

供稿：網(wǎng)友

一款用JavaScript編寫的網(wǎng)頁版挖箱子小游戲，寫的不錯(cuò)，用到了一個(gè)封裝的類庫，由作者本人編寫完成，對大家是個(gè)有益的參考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>挖箱子小游戲（面向?qū)ο蟀妫?/title><style type="text/css"> body, p, h2 {	margin:0px;	padding:0px;} ul, li {	margin:0px;	padding:0px;	float:left;	list-style-type:none;} body {	font-size:12px;} .box {	width:712px;	height:400px;	margin:0 auto 50px auto;	border:1px solid #c7c7c7;} .box ul {	padding:10px 0 0 5px;} .box li {	width:35px;	height:35px;	display:inline;	cursor:pointer;	position:relative;	margin:10px 0 0 11px;	background:url(http://www.companysz.com/jscss/demoimg/201108/pic.jpg) no-repeat 0 -35px;} .box li span {	width:200px;	height:35px;	top:-38px;	color:#353535;	background:#f8f8f8;	border:1px solid #e0dfdb;	text-align:center;	line-height:35px;	position:absolute;	margin:0 0 0 -90px;	display:none;} .box li.fail {	background:url(http://www.companysz.com/jscss/demoimg/201108/pic.jpg) no-repeat 0 -70px;} .box li.succeed {	background:url(http://www.companysz.com/jscss/demoimg/201108/pic.jpg) no-repeat 0 0;} .title {	width:712px;	height:50px;	font-size:24px;	text-align:center;	line-height:50px;	font-weight:bold;	font-family:"微軟雅黑";	margin:30px auto;}</style><script type="text/javascript">//獲取idfunction $(id){	return typeof id === "string" ? document.getElementById(id) : id;}//獲取tagNamefunction $$(oParent, elem){	return (oParent || document).getElementsByTagName(elem);}//初始化對象function Game(){	this.initialize.apply(this, arguments);}Game.prototype = {	initialize : function(obj){		if($(obj)){			this.obj = $(obj);			this.oUl = $$(this.obj, 'ul')[0];			this.aLi = this.oUl.children;			this.aSpan = $$(this.obj, 'span');			this.iData = [];			this.iSucc = [];			this.aTitle = [				'電影票兩張:)',				'AC米蘭門票兩張:)',				'小肥羊火鍋雙人套餐:)',				'音樂會門票兩張:)',				'adidas代金卷100塊:)',				'世界公園門票一張:)', 				'水立方門票一張:)'			];			this.iNow = this.iPiece = 0;			var _this = this;			var i = 0;			this.iSort()			for(i=0;i<this.aLi.length;i++){				this.aLi[i].index = i;				this.aLi[i].innerHTML = '<span>很遺憾，沒挖到禮品:(</span>'				this.aLi[i].onclick = function(){					_this.fnClick(this);				};			}		}	},	iSort : function(){		var i = 0;		for(i=0;i<this.aLi.length;i++)this.iData.push(i+1);		this.iData.sort(function(){return Math.random() > 0.5 ? -1 : 1;});		this.aTitle.sort(function(){return Math.random() > 0.5 ? -1 : 1;});		for(i=0;i<this.aTitle.length;i++)this.iSucc.push(this.iData[i]);	},	fnClick : function(oBut){		var i = 0;		var _this = this;		var iBout = this.iNow;		this.iNow++		if(this.aLi[oBut.index].className != '')this.iNow = iBout;		this.aLi[oBut.index].className = 'fail';		for(i=0;i<this.iSucc.length;i++){			if((this.iSucc[i]-1) == oBut.index){				this.iPiece++;				this.aSpan[oBut.index].innerHTML = '恭喜你，挖到'+this.aTitle[i];				this.aLi[oBut.index].className = 'succeed';			}		}		for(i=0;i<this.aSpan.length;i++){			this.aLi[i].onmouseout = function(){				_this.aSpan[oBut.index].style.display = 'none';			};		}		this.aSpan[oBut.index].style.display = 'block';		if(this.iNow == this.aTitle.length){			this.iPiece == 0 ? alert('很遺憾你什么也沒有挖到，點(diǎn)擊確定從新試試手氣~！') : alert('恭喜你挖到'+this.iPiece+'禮物，點(diǎn)擊確定從新試試手氣~！');			this.iNow = this.iPiece = 0;			this.iSucc.splice(0, this.aLi.length);			this.iSort();			for(i=0;i<this.aLi.length;i++)this.aLi[i].className = '';		}	}};</script><script type="text/javascript"> window.onload = function(){	new Game("box");};</script></head> <body><div   id="70qarhlowxag"   class="title">挖箱子小游戲，每回7次機(jī)會</div><div   id="70qarhlowxag"   class="box" id="box">	<ul>    	<li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul></div></body></html>

上一篇：JS重現(xiàn)_經(jīng)典拼板游戲（JS拼圖游戲）

下一篇：俄羅斯方塊JS游戲——黃文權(quán)