编程实践：创建抽奖游戏

.game-container {
position: relative;
user-select: none;
}
.game-container .prize-item {
background-color: #ff0000;
text-align: center;
color: white;
position: absolute;
}
.highlighted {
background-color: yellow !important;
color: red !important;
}
.game-container .start-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ff0000;
color: yellow;
border-radius: 10px;
font-size: 22px;
font-weight: bold;
cursor: pointer;
}

const LotteryGame = {
running: false,
currentIndex: 0,
speed: 500,
intervalId: null,
initialize: function(options) {
this.setup(options);
this.render();
this.attachEventListeners();
},
setup: function(options) {
this.cOntainer= document.getElementById('game-container');
this.rows = options.rows;
this.columns = options.columns;
this.prizes = options.prizes;
this.itemSize = options.itemSize || 100;
this.gap = options.gap || 5;
this.totalItems = this.rows * this.columns - (this.rows - 2) * (this.columns - 2);
this.positiOns= this.calculatePositions(this.totalItems);
this.cOntainerWidth= this.columns * this.itemSize + (this.columns - 1) * this.gap;
this.cOntainerHeight= this.rows * this.itemSize + (this.rows - 1) * this.gap;
},
calculatePositions: function(totalItems) {
const positiOns= [];
const firstRowEnd = this.columns;
const lastColumnEnd = this.columns + this.rows - 1;
const lastRowEnd = 2 * this.columns + (this.rows - 2);
for (let i = 0; i if (i positions.push({
top: '0px',
left: `${i * (this.itemSize + this.gap)}px`
});
} else if (i >= firstRowEnd && i positions.push({
right: '0px',
top: `${(i - firstRowEnd + 1) * (this.itemSize + this.gap)}px`
});
} else if (i >= lastColumnEnd && i positions.push({
bottom: '0px',
left: `${(lastRowEnd - i - 1) * (this.itemSize + this.gap)}px`
});
} else {
positions.push({
left: '0px',
bottom: `${(i - lastRowEnd + 1) * (this.itemSize + this.gap)}px`
});
}
}
return positions;
},
render: function() {
for (let i = 0; i const item = document.createElement('div');
item.className = 'prize-item';
const position = this.positions[i];
if (position.top) item.style.top = position.top;
if (position.bottom) item.style.bottom = position.bottom;
if (position.left) item.style.left = position.left;
if (position.right) item.style.right = position.right;
item.style.width = `${this.itemSize}px`;
item.style.height = `${this.itemSize}px`;
item.style.lineHeight = `${this.itemSize}px`;
item.textCOntent= i + 1;
item.dataset.prize = this.prizes[i];
this.container.appendChild(item);
}
const button = document.createElement('div');
button.className = 'start-button';
button.textCOntent= '开始抽奖';
button.style.width = `${(this.columns - 2) * this.itemSize}px`;
button.style.height = `${(this.rows - 2) * this.itemSize}px`;
button.style.lineHeight = `${(this.rows - 2) * this.itemSize}px`;
this.container.appendChild(button);
this.container.classList.add('game-container');
this.container.style.width = `${this.containerWidth}px`;
this.container.style.height = `${this.containerHeight}px`;
},
attachEventListeners: function() {
const self = this;
const button = this.container.querySelector('.start-button');
button.addEventListener('click', function() {
if (!self.running) {
self.start();
}
});
},
start: function() {
this.running = true;
const currentItem = this.container.querySelector('.prize-item').item(this.currentIndex);
currentItem.classList.add('highlighted');
setTimeout(() => this.run(), this.speed);
},
run: function() {
clearInterval(this.intervalId);
let newIndex = Math.floor(Math.random() * this.totalItems);
while (newIndex === this.currentIndex) {
newIndex = Math.floor(Math.random() * this.totalItems);
}
this.currentIndex = newIndex;
const highlightedItem = this.container.querySelector('.highlighted');
highlightedItem.classList.remove('highlighted');
const newItem = this.container.querySelectorAll('.prize-item')[this.currentIndex];
newItem.classList.add('highlighted');
this.speed -= 20;
if (this.speed <20) {
this.end();
return;
}
this.intervalId = setTimeout(() => this.run(), this.speed);
},
end: function() {
const self = this;
setTimeout(() => {
alert(`恭喜您获得了：${this.container.querySelectorAll('.prize-item')[this.currentIndex].dataset.prize}`);
this.reset();
}, 0);
},
reset: function() {
this.running = false;
this.currentIndex = 0;
this.speed = 500;
this.container.querySelector('.highlighted').classList.remove('highlighted');
}
};

document.addEventListener('DOMContentLoaded', () => {
LotteryGame.initialize({
rows: 4,
columns: 4,
prizes: ['一等奖', '二等奖', '三等奖', '四等奖', '五等奖', '六等奖', '七等奖', '八等奖', '九等奖', '十等奖', '十一等奖', '十二等奖'],
itemSize: 100,
gap: 5
});
});