用javascript和jquery部分知识实现的打地鼠小游戏

用javascript和jquery部分知识实现的打地鼠小游戏
游戏名称：打欧文
（因为出现被击打对象是欧文图片，哈哈哈哈哈哈）
实现步骤
1.搭建html模块
2.书写样式布局
3.用js实现逻辑，完成小游戏

游戏玩法介绍
1.点击开始游戏按钮，弹出难度选择建议窗口
2.点击一级难度和二级难度（难度根据欧文图片出现速度而定）
3.用ball（即鼠标指针设置以一个篮球样式）击打出现的欧文，成功击中分数加一
4.点击结束游戏按钮即可结束游戏，弹出本次游戏获得分数

游戏核心布局：css中的grid布局
游戏各个界面展示：

下面分别是各部分代码展示：

HTML代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="three.js"></script><script src="jquery.min.js"></script><link rel="stylesheet" href="style.css"></head><body><button id='level_1'>一级难度</button><button id="level_2">二级难度</button><button id="btn_start">开始游戏</button><p>得分:<span id="score">0</span></p><button id="btn_over">结束游戏</button><div><img src="img/0202.png" alt=""  class="img_left"></div><div><img src="img/0202.png" alt=""  class="img_right"></div><div><img src="img/test2.gif" alt=""  class="img_gif1"></div><div><img src="img/test.gif" alt=""  class="img_gif2"></div><div class="main"><div class="main_grid"><img class="ground" src="img/01.png" alt="" /><img class="ouwen" src="img/03.png" alt="" /><img class="yes" src="img/04.jpg" alt="" /></div><div class="main_grid"><img class="ground" src="img/01.png" alt="" /><img class="ouwen" src="img/03.png" alt="" /><img class="yes" src="img/04.jpg" alt="" /></div><div class="main_grid"><img class="ground" src="img/01.png" alt="" /><img class="ouwen" src="img/03.png" alt="" /><img class="yes"src="img/04.jpg" alt="" /></div><div class="main_grid"><img class="ground" src="img/01.png" alt="" /><img class="ouwen" src="img/03.png" alt="" /><img  class="yes" src="img/04.jpg" alt="" /></div><div class="main_grid"><img class="ground" src="img/01.png" alt="" /><img class="ouwen" src="img/03.png" alt="" /><img  class="yes" src="img/04.jpg" alt="" /></div> <div class="main_grid"><img class="ground" src="img/01.png" alt="" /><img class="ouwen" src="img/03.png" alt="" /><img src="img/04.jpg" alt="" /></div><div class="main_grid"><img class="ground" src="img/01.png" alt="" /><img class="ouwen" src="img/03.png" alt="" /><img class="yes"  src="img/04.jpg" alt="" /></div><div class="main_grid"><img class="ground" src="img/01.png" alt="" /><img class="ouwen" src="img/03.png" alt="" /><img class="yes" src="img/04.jpg" alt="" /></div><div class="main_grid"><img class="ground" src="img/01.png" alt="" /><img class="ouwen" src="img/03.png" alt="" /><img class="yes" src="img/04.jpg" alt="" /></div><div class="main_grid"><img class="ground" src="img/01.png" alt="" /><img class="ouwen" src="img/03.png" alt="" /><img class="yes" src="img/04.jpg" alt="" /></div><div class="main_grid"><img class="ground" src="img/01.png" alt="" /><img class="ouwen" src="img/03.png" alt="" /><img class="yes" src="img/04.jpg" alt="" /></div><div class="main_grid"><img class="ground" src="img/01.png" alt="" /><img class="ouwen" src="img/03.png" alt="" /><img class="yes" src="img/04.jpg" alt="" /></div></div><script src="game.js"></script></body>
</html>

css代码

body {margin: 0;padding: 0;position: relative;/* background: url("img/weishao.jpg"); *//* opacity: 0.8; */background: #F2914A
}
#btn_start,
#btn_over,
#level_1,
#level_2 {position: absolute;top: 10px;width: 100px;height: 50px;left: 700px;color: black;
box-shadow:10px 5px 5px #594A77;font-size: 20px;background-color: #EB545D;border-radius: 10px;
}
#level_1{left: 750px;
}
#level_2{left: 860px;
}
#btn_start {left: 500px;
}
#btn_over {left: 1060px;
}
p {position: absolute;top: -15px;left: 620px;font-size: 30px;color: black;
}
.main {display: grid;grid-template-columns: 200px 200px 200px 200px;grid-template-rows: 200px 200px 200px;position: absolute;width: 800px;height: 600px;top: 70px;left: 370px;
}
.main:hover {cursor: url("img/guangbiao.ico"), auto;
}
.main_grid {position: relative;width: 100%;height: 100%;
}
.main_grid img {display: none;position: absolute;width: 99%;left: 50%;top: 50%;transform: translate(-50%, -50%);
}
.main_grid .ground {/* 在点击时候禁止图片拖拽 */-webkit-user-drag: none;display: block;
}
.main_grid .ouwen {width: 60%;border-radius: 20px;
}
.main_grid .yes {border-radius: 20px;
}
.img_left {position: absolute;height: 283px;width: 252px;/* opacity: 0.8; */border-radius: 20px;
}
.img_right {float: right;height: 283px;width: 252px;/* opacity: 0.8; */border-radius: 20px;
}
.img_gif1{position: absolute;height: 283px;width: 252px;top: 400px;border-radius: 20px;
}
.img_gif2{position: absolute;left: 1300px;height: 283px;width: 252px;/* bottom: 0; */border-radius: 20px;top: 400px;
}

javascript代码

var score = 0;var scoremarks = $("#score");var ouwen_players = $(".ouwen");ouwen_players.click(function () {this.style.display = "none";this.parentElement.lastElementChild.style.display = "block";var yes = this;score += 1;var timer = setTimeout(function () {//注意定时器里的this是windowclearTimeout(timer);timer = null;yes.parentElement.lastElementChild.style.display = "none";}, 300);scoremarks.html(score);});$("#btn_start").click(function(){alert("请选择游戏难度\n普通玩家建议一级难度\n单身玩家建议二级难度")})//点击控制游戏开始难度二级$("#level_2").click(function () {start_game();$("#level_1").hide();});function start_game() {setInterval(function () {var i = parseInt((Math.random() * 16));ouwen_players[i].style.display = "block";setTimeout(function () {ouwen_players[i].style.display = "none";}, 700);}, 500);}//点击控制游戏开始难度一级$("#level_1").click(function () {start_game2();$("#level_2").hide();});function start_game2() {setInterval(function () {var i = parseInt((Math.random() * 16));ouwen_players[i].style.display = "block";setTimeout(function () {ouwen_players[i].style.display = "none";}, 2200);}, 1000);}//结束游戏$("#btn_over").click(function () {alert("你本次游戏得分为" + score + "分,下次继续努力哟");});

会不断更新个人学习笔记以及一些小demo，希望和喜欢编程的同学，喜欢前端的同学一起交流学习！需要源码以及图片的小伙伴私信分享！
未完待续--------

用javascript和jquery部分知识实现的打地鼠小游戏相关推荐

linux打地鼠游戏代码,JavaScript实现打地鼠小游戏
一.实验说明 1. 环境介绍本实验环境采用Ubuntu Linux桌面环境,实验中会用到桌面上的程序: Xfce终端: Linux命令行终端,打开后会进入Bash环境,可以使用Linux命令 Fir ...
jQuery实现别踩白块小游戏(简易版)
别踩白块分享这是个漫长的寒假,编程使我快乐.在学习jQuery时,在家练习做了这个小游戏,也算是提升一下实际使用能力. 现在记录下来给大家参考,不足之处请大家谅解. 先上截图: 使用代码前请先导入j ...
Python嘎嘎涨知识的7个小游戏，玩过的都爱不释手（附源码，直接运行就可）
前言今天星期七,是一个快乐的日子.上班族不用上班,学生不用学习.我也不想分享太多的知识去为难大家,就给大家七个小游戏吧,从周一玩到周日的那种,学会了记得来找我PK- 1.消消乐玩法:三个相连就能 ...
基于JQuery Flip实现的图片配对小游戏
背景先放出效果链接这里是DEMO! 一个简单的图片配对小游戏,要实现基本的计数功能. 当时的要求是可以用JQuery Flip 这个插件来完成,时间只有五个小时. 好在完成了!记录下! 正文思路 ...
【JavaScript】（一）解读一个js小游戏
[前言] 离公司近的好处,就在于每天都能利用自己的下班时间,更好地查漏补缺,充实技能. 最近小编做的项目需要写js偏多,而我不擅长写前端js,利用工作之余,开始学习,下面通过一个成型的js小游戏,开始 ...
韩顺平 javascript教学视频_学习笔记17_js超级玛丽小游戏
采用面向对象思想设计超级马里奥游戏人物怎么用通过按键,来控制图片的位置这个小游戏,用面向对象会很方便,不用面向对象会很麻烦很麻烦,比如以后要讲解的坦克大战的游戏,要是用纯的面向过程或函数式的方式写 ...
使用jquery类库编写的强手棋小游戏
用js写的小游戏,使用了jquery类库. /Files/xhan/game.rar game.js $( function () { initTable();//初始化表格颜 ...
JavaScript之jQuery番外篇【打地鼠游戏的制作讲解】
目录 I. 打地鼠游戏介绍 II. 实现思路与难点讲解
JavaScript：一个非常有趣的猜数小游戏
文章目录猜数字游戏猜数字游戏程序随机生成一个 1~ 50 之间的数字,并让用户输入一个数字, 如果大于该数字,就提示,数字大了,继续猜: 如果小于该数字,就提示数字小了,继续猜: 如果等于该数字 ...
Python基础知识③：改进案例小游戏
temp = input("猜一下我心里想的是哪个数字:")guess = int(temp)if guess == 6:print("恭喜你,猜对啦!")pr ...

用javascript和jquery部分知识实现的打地鼠小游戏

用javascript和jquery部分知识实现的打地鼠小游戏相关推荐

最新文章

热门文章