根据自己所想思路写出来的小游戏,原生所写,代码略微臃肿,不过也容易看懂
HTML代码
<div id="paochang">
<div id="ma1"></div>
<div id="ma2"></div>
<div id="ma3"></div>
<div id="ma4"></div>
<div id="ma5"></div>
<button id="go">开始赛马</button>
</div>
css代码
#paochang {
height: 500px;
width: 1000px;
margin: 0 auto;
border: 5px solid black;
background: seagreen;
position: relative;
}
#ma1 {
width: 10px;
height: 10px;
background-color: deeppink;
position: absolute;
top: 50px;
left: 0;
}
#ma2 {
width: 10px;
height: 10px;
background-color: deepskyblue;
position: absolute;
top: 150px;
left: 0;
}
#ma3 {
width: 10px;
height: 10px;
background-color: cadetblue;
position: absolute;
top: 250px;
left: 0;
}
#ma4 {
width: 10px;
height: 10px;
background-color: gold;
position: absolute;
top: 350px;
left: 0;
}
#ma5 {
width: 10px;
height: 10px;
background-color: gray;
position: absolute;
top: 450px;
left: 0;
}
#go {
position: absolute;
top: 500px;
left: 500px;
}
js代码
var ma1 = document.getElementById('ma1');
var ma2 = document.getElementById('ma2');
var ma3 = document.getElementById('ma3');
var ma4 = document.getElementById('ma4');
var ma5 = document.getElementById('ma5');
var go = document.getElementById('go');
var bool = false;
function random() {
return Math.random() * (10 - 1) + 1;
}
go.onclick = function(){
if(bool == false){
bool = true;
start();
}
}
function start() {
var timer = setInterval(function() {
var ma1_left = ma1.offsetLeft;
var ma2_left = ma2.offsetLeft;
var ma3_left = ma3.offsetLeft;
var ma4_left = ma4.offsetLeft;
var ma5_left = ma5.offsetLeft;
ma1_left += random();
ma2_left += random();
ma3_left += random();
ma4_left += random();
ma5_left += random();
ma1.style.left = ma1_left + 'px';
ma2.style.left = ma2_left + 'px';
ma3.style.left = ma3_left + 'px';
ma4.style.left = ma4_left + 'px';
ma5.style.left = ma5_left + 'px';
console.log(ma1_left);
if(ma1_left >= 1000) {
alert('马1胜利');
window.location.reload();
}
if(ma2_left >= 1000) {
alert('马2胜利');
window.location.reload();
}
if(ma3_left >= 1000) {
alert('马3胜利');
window.location.reload();
}
if(ma4_left >= 1000) {
alert('马4胜利');
window.location.reload();
}
if(ma5_left >= 1000) {
alert('马5胜利');
window.location.reload();
}
}, 50)
}
提一下所用到的几个要点
开始按钮,如果开始之后继续按失去效果
封装2个函数:随机函数,开始按钮函数
当判断出其中一匹马到终点之后弹出结果框,刷新页面
嗯,随心写的一个小游戏,有意见可提出 谢谢