1.加載游戲背景和錘子；當滑鼠點擊游戲背景時，有錘子敲打的動作
游戲背景和錘子的大小根據實際下載的圖片大小做調整
<style>
#scene {
width: 500px;
height: 349px;
background: url(bg.jpg);
}
#hammer {
width: 50px;
height: 50px;
}
</style>
js部分：滑鼠點擊時，切換到錘子敲打下去的圖片；滑鼠松開時，錘子是上舉的狀態
<body>
<div id="scene">
<img src="hammer1.jpg" alt="" id="hammer">
</div>
<script>
var scene = document.getElementById('scene');
var hammer = document.getElementById('hammer');
scene.onmousedown = function(){
hammer.src = 'hammer2.jpg';
}
scene.onmouseup = function(){
hammer.src = 'hammer1.jpg';
}
</script>
</body>
效果：錘子打下去時，有一個錘子砸下去的圖片轉換
2.讓錘子跟著滑鼠移動，并讓滑鼠在錘子中心位置，隱去滑鼠箭頭
css部分：
<style>
#scene {
width: 500px;
height: 349px;
background: url(bg.jpg);
position: relative;
}
#hammer {
width: 50px;
height: 50px;
position: absolute;
margin-top: -25px;
//讓滑鼠在錘子中心，
//可以在錘子圖片上加border，看看沒有設定margin時的效果
margin-left:-25px;
top:0;
left:0;
cursor: none;
}
</style>
js部分：利用事件e，獲取滑鼠的x、y坐標，賦值給錘子的位置
<body>
<div id="scene">
<img src="hammer1.jpg" alt="" id="hammer">
</div>
<script>
var scene = document.getElementById('scene');
var hammer = document.getElementById('hammer');
scene.onmousedown = function(){
hammer.src = 'hammer2.jpg';
}
scene.onmouseup = function(){
hammer.src = 'hammer1.jpg';
}
scene.onmousemove = function(e){
var x = e.clientX;
var y = e.clientY;
hammer.style.top = y + 'px';
hammer.style.left = x + 'px';
}
</script>
</body>
效果：圖片不是png的，所以沒有透明，會遮擋
沒有隱去滑鼠箭頭：
隱去滑鼠箭頭：
3.取消圖片選中狀態
當雙擊圖片時，可能會選中該圖片，此時的效果是：
取消選中狀態：
css上：
#hammer {
width: 50px;
height: 50px;
position: absolute;
/* margin-top: -25px; */
/* margin-left:-25px; */
top:0;
left:0;
/* cursor: none; */
user-select: none;//取消選中
}
4.放置一張地鼠圖片，先放在第一個坑內
css部分：
#hollow1Div{
position:absolute;
top: 90px;
left: 123px;
}
#hollow1 {
width: 50px;
height: 88px;
}
html：
<div id="scene">
<img src="hammer1.jpg" alt="" id="hammer">
<div id="hollow1Div"><img src="mouse1.jpg" alt="" id="hollow1"></div>
</div>
效果：
5.地鼠逐漸上升至最高處，停頓一會后消失
5.1先讓地鼠圖片在坑下面
#hollow1Div{
position:absolute;
top: 90px;
left: 123px;
}
#hollow1 {
width: 50px;
height: 88px;
position: absolute;//此處是設定地鼠在坑下的代碼
top: 88px;
left: 0;
}
效果：
5.2讓地鼠緩慢上升，在坑下方的部分不顯示
hollow1Div必須設定寬高，否則圖片全程都看不見
#hollow1Div{
position:absolute;
border:1px solid #ccc;
top: 90px;
left: 123px;
height: 88px;
width: 50px;
overflow: hidden;
}
#hollow1Div #hollow1 {
width: 50px;
height: 88px;
position: absolute;
top: 88px;
left: 0;
}
var hollow1 = document.getElementById('hollow1');
var mouseLoop = setInterval(mouseShow, 100);
var initTop = 88;
var endTop = 0;
var nowTop = 88;
function mouseShow(){
if (nowTop > endTop){
nowTop -= 4;
hollow1.style.top = nowTop + 'px';
}
if (nowTop <= endTop){
hollow1.style.top = initTop + 'px';
clearInterval(mouseLoop);
}
}
效果：
5.3地鼠緩慢上升到最高處后，停頓一下再消失
var mouseLoop = setInterval(mouseShow, 100);
var initTop = 88;
var endTop = 0;
var nowTop = 88;
var waitTime = 0;
var maxTime = 500;
function mouseShow(){
if (nowTop > endTop){
nowTop -= 8;
hollow1.style.top = nowTop + 'px';
}
// if (nowTop < endTop){
// nowTop = 0;
// hollow1.style.top = '0px';
// }
if (nowTop <= endTop){
if (waitTime < maxTime){
waitTime += 100;
}
else if (waitTime >= maxTime){
clearInterval(mouseLoop);
hollow1.style.top = initTop + 'px';
}
}
}
效果：
6.滑鼠點擊到地鼠時，檢測碰撞
var hollow1Div = document.getElementById('hollow1Div');
scene.onclick = function(e){
var x = e.clientX;
var y = e.clientY;
//滑鼠的位置x ----- 矩形橫坐標x1,x2-----x1 <x <x2時碰撞，y軸同理
var x1 = hollow1Div.offsetLeft + hollow1.offsetLeft;
//hollow1Div相對于scene的left值 + 圖片相當于hollow1Div的left值
var x2 = x1 + hollow1.offsetWidth;
// console.log('x:'+x+';x1:'+x1);
var y1 = hollow1Div.offsetTop + hollow1.offsetTop;//洞的下方位置
var y2 = y1 + hollow1Div.offsetHeight;
if (x>x1 && x<x2 && y>y1 && y<y2){
console.log('點中');
hollow1.src = 'beated.jpg';
}
效果：打中地鼠時，有一個打中的效果圖，從地鼠變成愛心圖
7.多個地鼠隨機出現
7.1 設定每個坑的位置
此處只設前三個
div[id^='hollowDiv'] {
position:absolute;
/* border:1px solid #ccc; */
height: 88px;
width: 50px;
overflow: hidden;
border: 1px solid black;
}
#hollowDiv1{
top: 90px;
left: 123px;
}
#hollowDiv2{
top: 90px;
left: 225px;
}
#hollowDiv3{
top: 90px;
left: 335px;
}
div[id^='hollowDiv']>img {
width: 50px;
height: 88px;
position: absolute;
top: 88px;
left: 0;
}
html：
<div id="scene">
<img src="hammer1.jpg" alt="" id="hammer">
<div id="hollowDiv1"><img src="mouse1.jpg" alt="" id="hollow1"></div>
<div id="hollowDiv2"><img src="mouse1.jpg" alt="" id="hollow2"></div>
<div id="hollowDiv3"><img src="mouse1.jpg" alt="" id="hollow3"></div>
</div>
效果：
7.2.地鼠隨機升起，滑鼠點中則呈現打中狀態
1.隨機生成0-2數字，對應坑1，2，3，對應隨機升起地鼠的坑位；
2.將每個坑的hollowDiv和hollow地鼠圖片封裝進一個list；
3.哪個坑位要升起地鼠，就觸發show，點擊時觸發點擊事件
4.初始狀態要調整，每次要升起地鼠時，將nowTop位置設定到坑位之下；恢復圖片是為被打擊的圖片；將圖片的層次降低（錘子在最上面）；將等待時間歸零
5.控制執行緒，保證每次只有一個老鼠
<script>
// var hollowDiv1 = document.getElementById('hollowDiv1');
// var hollow1 = document.getElementById('hollow1');
var hollowDivAry = [];
var hollowAry = [];
var mouseId;
for (var i = 0; i < 3; i++){
hollowDivAry[i] = document.getElementById('hollowDiv' + (i+1));
hollowAry[i] = document.getElementById('hollow'+ (i+1));
}
// var mouseLoop = setInterval(mouseShow, 100);
var mouseLoop = null;
var initTop = 88;
var endTop = 0;
var nowTop = 88;
setInterval(function(){
//保證每次只有一個老鼠
if (mouseLoop == null){
mouseId = parseInt(Math.random()*3);
nowTop = 88;
waitTime = 0;
hollowAry[mouseId].src = 'mouse1.jpg';
hollowAry[mouseId].style.zIndex = '888';
console.log('mouseId:'+mouseId);
mouseLoop = setInterval(mouseShow, 100);
}
},3000);
var scene = document.getElementById('scene');
var hammer = document.getElementById('hammer');
scene.onmousedown = function(){
hammer.src = 'hammer2.jpg';
}
scene.onmouseup = function(){
hammer.src = 'hammer1.jpg';
}
scene.onmousemove = function(e){
var x = e.clientX;
var y = e.clientY;
hammer.style.top = y + 'px';
hammer.style.left = x + 'px';
}
scene.onclick = function(e){
var x = e.clientX;
var y = e.clientY;
console.log('hollowDivAry[mouseId]:' + hollowDivAry[mouseId]);
//滑鼠的位置x ----- 矩形橫坐標x1,x2-----x1 <x <x2時碰撞，y軸同理
var x1 = hollowDivAry[mouseId].offsetLeft + hollowAry[mouseId].offsetLeft;
//hollowDiv1相對于scene的left值 + 圖片相當于hollowDiv1的left值
var x2 = x1 + hollowAry[mouseId].offsetWidth;
// console.log('x:'+x+';x1:'+x1);
var y1 = hollowDivAry[mouseId].offsetTop + hollowAry[mouseId].offsetTop;//洞的下方位置
var y2 = y1 + hollowDivAry[mouseId].offsetHeight;//洞的位置+洞高
if (x>x1 && x<x2 && y>y1 && y<y2){
console.log('點中');
hollowAry[mouseId].src = 'beated.jpg';
hollowAry[mouseId].style.zIndex = '1000';
// hollowAry[mouseId].src = 'mouse1.jpg';
//將原先的hollow1都改成相應的hollowAry里的物件
}
}
var waitTime = 0;
var maxTime = 1000;
function mouseShow(){
if (nowTop > endTop){
nowTop -= 8;
hollowAry[mouseId].style.top = nowTop + 'px';
}
if (nowTop <= endTop){
if (waitTime < maxTime){
waitTime += 100;
}
else if (waitTime >= maxTime){
clearInterval(mouseLoop);
hollowAry[mouseId].style.top = initTop + 'px';
mouseLoop = null;
}
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/263361.html
標籤：其他