我们要做的是一个打地鼠的游戏,只用原生js
1.导入需要的图片
2.编写页面css样式demo.css
*{
margin:0;
padding:0;
}
.game{
position: relative;
750px;
height:600px;
margin:100px auto;
}
.ground{
position: relative;
750px;
height:550px;
background:url('./images/bg_canvas.png');
cursor:url("./images/hammer.png"),auto;
}
.score{
position: absolute;
300px;
height:30px;
left:420px;
top:180px;
}
.live{
position: absolute;
top:180px;
right:100px;
}
.score span,
.live span{
color:#fff;
line-height:30px;
font-size:24px;
vertical-align: top;
margin-left:10px;
}
.mask{
position: absolute;
140px;
height:125px;
/* border:1px solid #000; */
overflow: hidden;
}
.mouse{
position: absolute;
110px;
height:110px;
overflow: hidden;
left:0;
top:20px;
background-position: 50% 50%;
background-repeat: no-repeat;
transition: top 0.5s;
overflow: hidden;
}
@keyframes moveTop {
0% {
top: 70px;
}
100% {
top: 20px;
}
}
编写页面效果
编写js(demo.js)
var ground; // 地鼠出现位置坐标 var coordinate = [{x: 130, y:173}, {x: 320, y:171}, {x: 515, y:175}, {x: 105, y: 265}, {x: 320, y: 256}, {x: 522, y: 256}, {x: 96, y: 350}, {x: 320, y: 355}, {x: 540, y: 358}];//洞口坐标 // 地鼠出现定时器 var gametimer; var mask = []; var mouse = new Array(9); // 最大地鼠数 var maxCount = 2; // 分数 点中一个加10 var score = 0; // 生命 自由下落一个减一 var life = 10; window.onload = function(){ ground = document.getElementsByClassName('ground')[0]; ground.onmousedown = function(){ ground.style.cursor = 'url("./images/hammer2.png"), auto' }; ground.onmouseup = function(){ ground.style.cursor = 'url("./images/hammer.png"), auto' }; init(); } function init(){ // 创建地鼠出现位置 createMask(); // 每隔一段时间出现一个地鼠 gameTimer = setInterval(function(){ // 创建每一个地鼠 // createMouse(); controlMouse(); // 每次生成后判断是否结束 if(life <= 0){ clearInterval(gameTimer); alert('游戏结束:得分:' + score); } document.getElementsByClassName('scoreCon')[0].innerHTML = score; document.getElementsByClassName('life')[0].innerHTML = life; // 最大数++ maxCount = score / 100 + 1; },50); } function createMask(){ // 根据坐标生成洞穴位置 for(var i = 0; i < coordinate.length;i ++){ // 创建div 将来插入地鼠 var temp = document.createElement('div'); temp.classList.add('mask'); // 确定每一个地鼠巢穴位置 temp.style.left = coordinate[i].x + 'px'; temp.style.top = coordinate[i].y + 'px'; // 创建草坪遮盖 var img = document.createElement('div'); img.classList.add('mask'); // 设置遮罩层背景 每一个洞穴背景不一样 img.style.background = 'url("./images/mask'+i+'.png")'; // 控制层级 草坪在地鼠身上 // img.style.zIndex = 100; img.style.zIndex = i * 2 +1; // 将元素放置在数组中 mask[i] = temp; temp.appendChild(img); // 将创建div插入父级 ground.appendChild(temp); // 记录点击的位置 temp.index = i; // 点击每一个消失 temp.onclick = function(){ disappear(this.index,true); } } } // 创建地鼠 function createMouse(i){ // 随机的背景图片 var num = Math.floor(Math.random() * 4); mouse[i] = num; var temp = document.createElement('div'); temp.classList.add('mouse'); // 设置地鼠出现的背景图片 temp.style.background = 'url("./images/mouse'+num+'.png")'; // 每一个地鼠需要出现在指定的位置 在对应洞穴上出现一只地鼠 // 用两个数组对应 一个存放着洞穴 一个存放地鼠 mouse[i] = temp; temp.style.zIndex = i * 2 ; temp.style.animation = "moveTop 0.5s linear"; mask[i].appendChild(temp); var timer = setTimeout(function(){ disappear(i,false); },2000); temp.timer = timer; } // 控制生称帝书的条件 function controlMouse(){ // 随机出现位置 并且同时出现的地鼠个数不大于最大个数 同一个位置不能出现两只 var num = Math.floor(Math.random()*9); if(mouse.filter(function (item){ return item; // 限制出现的最大数和出现的位置 }).length < maxCount && mouse[num] == null){ createMouse(num); } } // 消失函数 function disappear(i,isHit){ if(mouse[i]){ // 无论是否被打均缩回洞里 通过改变top值 mouse[i].style.top = '70px'; // 被打 改变样式 添加打懵圈的小星星 改变背景图片 if(isHit){ // 打中分数加十 score += 10; // 创建包含懵圈小星星的元素 var bomp = document.createElement('img'); bomp.classList.add('mouse'); bomp.style.top = '-40px'; // 添加gif动图为背景显示 bomp.src = "./images/bomb.gif"; // 替换掉当前老鼠的图片 mouse[i].style.backgorund = 'url("./images/hit'+mouse[i].num +'")'; // 插入到当前点击的位置 mouse[i].appendChild(bomp); // 清除自身的下落 clearTimeout(mouse[i].timer); }else{ // 没有被打 自己缩回生命减一 life -= 1; } setTimeout(function(){ if(mouse[i]){ mask[i].removeChild(mouse[i]); } mouse[i] = null; },500); } }
接下来我们看看最后效果
游戏规则是,每砸中一个地鼠分数加10,少砸一个地鼠生命减1,生命为0计算总分数,地鼠会随机出现,砸的越快出现的也就越快,
需要测试效果的,复制代码就可以了。