現(xiàn)在前端的框架越來(lái)越好摔踱，讓前端有了飛躍的發(fā)展，不過(guò)一切都在原生JS的基礎(chǔ)構(gòu)建的框架怨愤，只要原生有了過(guò)硬的能力派敷，前端之路就就沒(méi)有什么可以阻擋了，下面是用原生js做的一個(gè)小游戲撰洗，大家可以多多參考學(xué)習(xí)篮愉。
完成之后的效果圖
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="mou.css"/>
</head>
<body>
<div id="box">
<div class="scree"></div>
<div class="btn">
<input class="start" type="button" value="開(kāi)始游戲" />
<input class="end" type="button" value="暫停游戲" />
</div>
</div>
<script src="mou.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
css代碼
*{
margin: 0;
padding: 0;
}
#box{
width: 800px;
height: 600px;
margin: 0 auto;
}
.scree{
width: 100%;
height: 550px;
background: gray;
border: 4px solid rosybrown;
}
.btn{
box-sizing: border-box;
padding-left: 300px;
}
.btn input{
width: 80px;
height: 30px;
font-size: 15px;
background: #ea4a80;
font-weight: bold;
}
img{
width: 50px;
height: 50px;
}
js代碼
//獲取開(kāi)始和結(jié)束按鈕
var start = document.getElementsByClassName('start')[0];
var end = document.getElementsByClassName('end')[0];
//獲取顯示老鼠
var scree = document.getElementsByClassName('scree')[0];
//添加點(diǎn)擊開(kāi)始事件
var no = null;
var mouseNum = 0;
start.onclick = function(){
//必須寫(xiě)這個(gè)if語(yǔ)句的判斷，否則暫停之后差导，直接重新開(kāi)始试躏，而不會(huì)從暫停的位置開(kāi)始
if(mouseNum == 0){
scree.innerHTML = '';
}
clearInterval(no);
no = setInterval(mouse,200);
}
end.onclick = function(){
clearInterval(no);
}
//生產(chǎn)老鼠的函數(shù)
function mouse(){
if(mouseNum>=10){
clearInterval(no);
//清空屏幕中的老鼠
scree.innerHTML = '';
var imgD = document.createElement('img');
imgD.src = 'img/end.png';
//注意：圖片一定的設(shè)置display：block 否則margin沒(méi)有作用
imgD.style='width:400px; height:120px; margin:200px auto;display:block';
scree.appendChild(imgD);
//把老鼠的數(shù)量設(shè)置為零，否則無(wú)法重新開(kāi)始
mouseNum = 0
//數(shù)量大于10的時(shí)候直接讓結(jié)束设褐，不讓再往下執(zhí)行
return;
}
var ImgE = document.createElement('img');
ImgE.src = 'img/mouse.png';
//讓老鼠在屏幕中隨機(jī)出現(xiàn)
//設(shè)置定位
scree.style.position = 'relative';
ImgE.style.position = 'absolute';
//獲取隨機(jī)寬高
var scrW = Math.floor(Math.random()*751);
// console.log(scrW);
var scrH = Math.floor(Math.random()*501);
// console.log(scrH);
ImgE.style.top = scrH + 'px';
ImgE.style.left = scrW + 'px';
scree.appendChild(ImgE);
//添加殺死老鼠的事件
ImgE.onclick = killmouse;
mouseNum++;
}
//殺死老鼠的函數(shù)
function killmouse(){
scree.removeChild(this);
mouseNum--;
}
之后會(huì)寫(xiě)出更好好玩的原生游戲颠蕴。
