现在前端的框架越来越好，让前端有了飞跃的发展，不过一切都在原生JS的基础构建的框架，只要原生有了过硬的能力，前端之路就就没有什么可以阻挡了，下面是用原生js做的一个小游戏，大家可以多多参考学习。
完成之后的效果图
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="开始游戏" />
<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代码
//获取开始和结束按钮
var start = document.getElementsByClassName('start')[0];
var end = document.getElementsByClassName('end')[0];
//获取显示老鼠
var scree = document.getElementsByClassName('scree')[0];
//添加点击开始事件
var no = null;
var mouseNum = 0;
start.onclick = function(){
//必须写这个if语句的判断，否则暂停之后，直接重新开始，而不会从暂停的位置开始
if(mouseNum == 0){
scree.innerHTML = '';
}
clearInterval(no);
no = setInterval(mouse,200);
}
end.onclick = function(){
clearInterval(no);
}
//生产老鼠的函数
function mouse(){
if(mouseNum>=10){
clearInterval(no);
//清空屏幕中的老鼠
scree.innerHTML = '';
var imgD = document.createElement('img');
imgD.src = 'img/end.png';
//注意：图片一定的设置display：block 否则margin没有作用
imgD.style='width:400px; height:120px; margin:200px auto;display:block';
scree.appendChild(imgD);
//把老鼠的数量设置为零，否则无法重新开始
mouseNum = 0
//数量大于10的时候直接让结束，不让再往下执行
return;
}
var ImgE = document.createElement('img');
ImgE.src = 'img/mouse.png';
//让老鼠在屏幕中随机出现
//设置定位
scree.style.position = 'relative';
ImgE.style.position = 'absolute';
//获取随机宽高
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++;
}
//杀死老鼠的函数
function killmouse(){
scree.removeChild(this);
mouseNum--;
}
之后会写出更好好玩的原生游戏。
