前两天跟朋友说起以前玩的DUBO的“动物世界”的游戏，下载了一个android的，觉得不太爽，干脆按照以前玩的感觉自己做了一个，这个版本没有用canvas，主要用css3 的transform 属性，在手机端效率太差劲了，还望高人指点效率迷津。
说明：
1.45秒压点倒计时
2.10秒中奖反馈倒计时
3.随机中奖，先到先得
4.可以用node扩展为多人在线版本
5.效率有待优化
贴上图片：
贴上代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style type="text/css">
.container{
overflow:hidden;
*zoom:1;
}
.main{
float:left;
position:relative;
600px;
height:600px;
border:5px solid #efefef;
border-radius: 50%;
box-shadow:3px 3px 3px #ccc;
}
.animals{
position:absolute;
top:0;
left:0;
600px;
height:600px;
}
.animal{
position:absolute;
45px;
height:45px;
background-color:#efefef;
border-radius:50%;
box-shadow:3px 3px 3px #ccc;
font-size:10px;
text-align:center;
line-height:45px;
}
.colors{
position:absolute;
top:100px;
left:100px;
}
.color{
position:absolute;
30px;
height:30px;
background-color:#999;
border-radius:50%;
box-shadow:3px 3px 3px #ccc;
opacity:0.3;
}
.pointer{
position:absolute;
top:100px;
left:100px;
400px;
height:400px;
}
.pointer span{
position:absolute;
display:block;
top:0;
left:200px;
5px;
height:200px;
background-color:#ff0000;
box-shadow:3px 3px 3px #ccc;
opacity:0.7;
}
.time-left{
position:absolute;
left:248px;
top:272px;
100px;
height:50px;
line-height:50px;
border:5px solid #333;
background-color:#fff;
color:#ff0000;
font-size:30px;
font-weight:bold;
text-align:center;
}
.operation{
margin:0 0 0 650px;
border:1px solid #ccc;
}
.masker{
position:absolute;
background-color:#ccc;
opacity:0.5;
}
.operation ul{
list-style:none;
overflow:hidden;
*zoom:1;
}
.operation ul li{
float:left;
margin:0 10px 0 0;
overflow:hidden;
*zoom:1;
}
.operation ul li .btn{
float:left;
color:#fff;
font-weight:bold;
100px;
height:100px;
border:1px solid #ccc;
background-color:#333;
text-align:center;
line-height:100px;
cursor:pointer;
}
.operation ul li .data{
margin:0 0 0 100px;
50px;
height:100px;
color:#fff;
background-color:#333;
font-weight:bold;
}
.operation ul li .data div{
color:green;
50px;
height:50px;
text-align:center;
line-height:50px;
border:1px solid #ccc;
}
.operation ul li .btn{
opacity:0.5;
}
.operation ul li.red .btn{
background-color:red;
}
.operation ul li.yellow .btn{
background-color:yellow;
}
.operation ul li.green .btn{
background-color:green;
}
.records{
overflow:hidden;
*zoom:1;
}
.records .coin{
float:left;
100px;
height:50px;
line-height:50px;
text-align:center;
background:#000;
color:green;
font-size:30px;
font-weight:bold;
margin:0 10px 0 0;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="animals"></div>
<div class="colors"></div>
<div class="pointer">
<span></span>
</div>
<div class="time-left">00</div>
</div>
<div class="operation">
<div class="others"></div>
<div class="mine"></div>
<div class="records">
<span class="coin"></span>
<a href="###">充值</a>
</div>
</div>
<div class="masker"></div>
</div>
<script src="/test/common/jquery.js"></script>
<script src="/test/common/base.js"></script>
<script>
(function($){
var Lionking = DH.Base.create({
elements : {
'.animals' : 'elAnimals',
'.colors' : 'elColors',
'.pointer' : 'elPointer',
'.time-left' : 'elTimeleft',
'.mine' : 'elMine',
'.operation' : 'elOperation',
'.masker' : 'elMasker',
'.coin' : 'elCoin'
},
events : {
'click .j-btn' : 'bet'
},
tpl : {
mine : {
list : '<ul><%=list%></ul>',
item : '<li class="j-item <%=color%> j-mine-color-<%=colorid%>">
<div class="btn j-btn"><%=animal%></div>
<div class="data j-mine-animal-<%=animalid%>">
<div class="multiple">0</div>
<div class="times">0</div>
</div>
</li>'
}
},
init : function(){
this.radius = 300; // 半径
this.leftTime = 45;
this.$animals = [];
this.animals = ['panda', 'lion', 'monkey', 'rabbit'];
this.animalMultiple = [25, 15, 7, 5];
this.$colors = []; // 颜色元素数组
this.colors = ['red', 'yellow', 'green']; // 颜色数组
this.colorMultiple = [10, 8, 5, 2];
this.animalsStartPos = 0;
this.pointerStartPos = 360; // 指针开始位置
this.$currentColor = null; // 当前颜色元素
this.renderMine();
this.setAnimals();
this.setColors();
this.coin = 2000;
this.win = {};
this.resetMultiple();
this.resetCoin();
this.start();
},
bet : function(e){
if(this.coin === 0){
alert('没有币了，请充值。');
return;
}
var $e = $(e.target),
$item = $e.closest('.j-item'),
$times = $item.find('.times'),
times = +$times.text()
;
$times.text(++times);
this.coin--;
this.resetCoin();
},
resetCoin : function(){
this.elCoin.text(this.coin);
},
renderMine : function(){
var tpl = this.tpl,
tmpl = this.tmpl,
colors = this.colors,
animals = this.animals,
list = [],
item
;
for(var i = 0, len = colors.length; i < len; i++){
item = [];
for(var j = 0, len2 = animals.length; j < len2; j++){
item.push(tmpl(tpl.mine.item, {
color : colors[i],
animal : animals[j],
colorid : i,
animalid : j
}));
}
list.push(tmpl(tpl.mine.list, {
list : item.join('')
}));
}
this.elMine.append(list.join(''));
},
resetMultiple : function(){
var rnd = Math.random() * 1,
colors = this.colors,
animals = this.animals,
animalMultiple = this.animalMultiple,
colorMultiple = this.colorMultiple
;
for(var i = 0, len = colors.length; i < len; i++){
var $colors = this.el.find('.j-mine-color-' + i);
for(var j = 0, len2 = animals.length; j < len2; j++){
var multi = Math.ceil(animalMultiple[j] + colorMultiple[i] * rnd + colorMultiple[i]);
$colors.each(function(){
$(this).find('.j-mine-animal-' + j).find('.multiple').text(multi);
});
}
}
},
setAnimals : function(){
var radius = this.radius - 30,
animals = this.animals
;
for(var i = 1; i <= 36; i++){
var $animal = $('<div>').appendTo(this.elAnimals),
theta = (i - 9) * 2 * Math.PI / 36,
left = radius * Math.cos(theta),
top = radius * Math.sin(theta),
rnd = Math.floor(Math.random() * animals.length),
animal = animals[rnd]
;
left += radius + 8;
top += radius + 8;
$animal
.attr('data-animal', rnd)
.text(animal)
.addClass('animal')
.css({
left : left,
top : top
})
;
this.$animals.push($animal);
}
},
setColors : function(){
var radius = this.radius - 70;
for(var i = 1; i <= 36; i++){
var $color = $('<div>').appendTo(this.elColors),
theta = (i - 10) * 2 * Math.PI / 36,
left = radius * Math.cos(theta),
top = radius * Math.sin(theta)
;
left += radius - 46;
top += radius - 46;
$color
.addClass('color')
.css({
left : left,
top : top
})
;
this.$colors.push($color);
}
},
resetColors : function(){
var $colors = this.$colors,
$ocolors = this.el.find('.color'),
colors = this.colors,
len = $colors.length,
i = 0
;
$ocolors.css({
backgroundColor : '#999'
});
(function reset(){
if(i === len) return;
var rnd = Math.floor(Math.random() * colors.length),
color = colors[rnd]
;
$colors[i]
.attr('data-color', rnd)
.css({
backgroundColor : color
})
;
i++;
setTimeout(reset, 20);
}());
},
startAnimals : function(){
var self = this,
$animals = this.elAnimals,
i = this.animalsStartPos || 360,
circle = 0,
interval = 10,
stop,
animal
;
(function start(){
if(i === 0){
i = 359;
circle++;
if(circle > 1){
interval += 10;
}
if(circle === 3 && stop === undefined){
stop = Math.floor(Math.random() * 36);
}
}
animal = Math.floor(i / 10);
if(stop && animal === stop){
self.animalsStartPos = i;
self.win.animal = +self.$animals[animal].attr('data-animal');
self.setWin();
return;
}
$animals.css({
'transform' : 'rotate('+ i +'deg)'
});
i--;
setTimeout(start, interval);
}());
},
startPointer : function(){
var self = this,
$pointer = this.elPointer,
$colors = this.$colors,
i = this.pointerStartPos || 0,
circle = 0,
interval = 1,
color,
stop
;
(function start(){
if(i === 360){
i = 0;
circle++;
if(circle > 1){
interval += 10;
}
if(circle === 3 && stop === undefined){
stop = Math.floor(Math.random() * 36);
}
}
color = Math.floor(i / 10);
self.$currentColor && self.$currentColor.css({
opacity : 0.3
});
self.$currentColor = $colors[color];
self.$currentColor.css({
opacity : 1
});
if(stop && color === stop){
self.pointerStartPos = i;
self.win.color = +self.$currentColor.attr('data-color');
self.setWin();
return;
}
$pointer.css({
'transform' : 'rotate('+ i +'deg)'
});
i++;
setTimeout(start, interval);
}());
},
coverNum : function(num){
return typeof num === 'number' && num < 10 ? '0' + num : num;
},
setWin : function(){
var win = this.win;
if(win.color !== undefined && win.animal !== undefined){
var color = win.color,
animal = win.animal,
$colors = this.el.find('.j-mine-color-' + color),
$animal,
multiple,
times
;
for(var i = 0, len = $colors.length; i < len; i++){
$colors.eq(i).find('.j-mine-animal-' + animal).length && ($animal = $colors.eq(i).find('.j-mine-animal-' + animal));
}
if($animal){
this.$winAnimal = $animal.prev('.j-btn');
multiple = +$animal.find('.multiple').text();
times = +$animal.find('.times').text();
this.coin += multiple * times;
this.resetCoin();
}
this.win = {};
this.resetMultiple();
this.hideMasker();
this.stop();
}
},
clearTimes : function(){
this.el.find('.times').text(0);
},
showMasker : function(){
var $masker = this.elMasker,
$operation = this.elOperation,
width = $operation.width(),
height = $operation.height(),
offset = $operation.offset()
;
$masker
.show()
.css({
width : width,
height : height,
left : offset.left,
top : offset.top
})
;
},
hideMasker : function(){
this.elMasker.hide();
},
focusWinAnimal : function(){
var self = this,
$animal = this.$winAnimal,
leftTime = this.leftTime
;
(function focus(){
if(leftTime === 0){
$animal.css({
opacity : 0.5
});
$animal.removeAttr('data-focus');
return;
}
if($animal.attr('data-focus') === '1'){
$animal.css({
opacity : 0.5
});
$animal.removeAttr('data-focus');
}else{
$animal.css({
opacity : 1
});
$animal.attr('data-focus', '1');
}
leftTime -= 0.5;
setTimeout(focus, 500);
}());
},
start : function(){
var self = this,
leftTime = this.leftTime
;
this.elTimeleft.text(this.coverNum(leftTime));
(function start(){
leftTime--;
self.elTimeleft.text(self.coverNum(leftTime));
if(leftTime === 0){
self.resetColors();
self.startAnimals();
self.startPointer();
self.showMasker();
self.leftTime = 10;
return;
}
setTimeout(start, 1000);
}());
},
stop : function(){
var self = this;
this.elTimeleft.text(this.coverNum(this.leftTime));
this.focusWinAnimal();
(function stop(){
self.leftTime--;
self.elTimeleft.text(self.coverNum(self.leftTime));
if(self.leftTime === 0){
self.leftTime = 45;
self.clearTimes();
self.start();
return;
}
setTimeout(stop, 1000);
}());
}
});
new Lionking();
})(window.jQuery);
</script>
</body>
</html>