这是一个小小的打地鼠游戏,里面有详细的步骤(在参考了一些资料的情况下,写的代码)
2017-09-19 22:41
531 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>疯狂的打地鼠</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.map{
width: 400px;
height: 410px;
margin: 0 auto;
margin-top: 30px;
background-color: rgb(146,197,0);
}
h1{
color: red;
text-align: center;
}
img{
margin-top: 31px;
width: 100px;
height: 100px;
}
#Score{
width: 200px;
height: 100px;
background-color: gray;
float: right;
margin-top: -450px;
margin-right: 150px;
color: red;
font-size: 20px;
line-height: 100px;
text-align: center;
}
table td{
width: 200px;
height: 100px;
}
#colok{
width: 200px;
height: 100px;
background-color: blue;
float: right;
margin-top: -400px;
margin-right: 150px;
text-align: center;
color: white;
font-size: 20px;
line-height: 100px;
}
#counts{
width: 400px;
height: 30px;
background-color: gray;
margin-top: 10px;
margin-left: 33%;
text-align: center;
color: red;
font-size: 20px;
}
#Pause{
margin-left: 40%;
border: 1px solid skyblue;
color: white;
background: skyblue;
width: 50px;
height: 30px;
margin-bottom: 10px;
border-radius: 5px;
}
#Start,#Refresh,#Speed{
border: 1px solid skyblue;
background: skyblue;
color: white;
width: 55px;
height: 30px;
border-radius: 5px;
margin-left: 10px;
}
#cover{
margin-top: 0px;
position: absolute;
z-index: 2;
width: 800px;
height: 600px;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
background :rgba(128,128,128,0.5);
color: red;
font-size: 30px;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="main">
<h1>打地鼠</h1>
<!-- 地图块 -->
<div class="map">
<table>
<tr>
<!-- 坑的图片 -->
<td><img src="img/3.png"></td>
<td><img src="img/3.png"></td>
<td><img src="img/3.png"></td>
</tr>
<tr>
<td><img src="img/3.png"></td>
<td><img src="img/3.png"></td>
<td><img src="img/3.png"></td>
</tr>
<tr>
<td><img src="img/3.png"></td>
<td><img src="img/3.png"></td>
<td><img src="img/3.png"></td>
</tr>
</table>
<!-- 记录成绩的块 -->
</div>
<div id="Score">最佳记录:<span id="score">0</span>分</div>
<div id="counts">当前得分:<span id="nowScore">0</span>分</div>
<div id="colok"></div>
</div>
<!-- 暂停按钮 -->
<input type="button" name="name" value="Pause" id="Pause">
<!-- 开始按钮 -->
<input type="button" name="name" value="Start" id="Start">
<!-- 刷新按钮 -->
<input type="button" name="name" value="Refresh" id="Refresh">
<!-- 调节难度的按钮-->
<select id="Speed">
<option>普通型</option>
<option>一般型</option>
<option>困难型</option>
</select>
<div id="cover" style="display: none;"><span id="text"></span></div>
</body>
<script type="text/javascript">
//获取元素
var imgs = document.getElementsByTagName('img');
//设置随机数
var rank;
//获取计算分数的 span
var sscore = document.getElementById('score');
var newScore = document.getElementById('nowScore');
//定义变量记录分数
var count = 0;
// 定义记录最佳成绩的变量
var preScore = 0;
//localStorage.getItem(key):获取指定key本地存储的值
preScore = localStorage.getItem("bestScore");
//获取时间
var times =document.getElementById('colok');
//获取最后的结果 div
var cover = document.getElementById('cover');
// 最后的输出的文字
var text = document.getElementById('text');
//显示最佳成绩
sscore.innerHTML = preScore;
//定义变量控制游戏的进行
var play = true;
//定义变量控制速度
var sspeed = 1000;
//设置自调函数
//通过 play 和 时间来控制游戏的进程
if (play) {
setTimeout('chulai()',1000);
}else{
alert('11')
}
//为了能够开始
function mov(){
setTimeout('paole()',sspeed);
}
//设置出来的函数
function chulai(){
//设置开始/暂停和结束循环
if (play&&seconds>0) {
rank = Math.floor(Math.random()*9);
// 冒出来的图片
imgs[rank].src='img/2.png';
imgs[rank].style.marginTop="0px";
// 建立点击事件
imgs[rank].setAttribute('onclick','die()');
mov();
}
}
//设置跑了的函数
function paole(){
//设置开始/暂停和结束循环
if (play&&seconds>0) {
// 坑的图片
imgs[rank].src='img/3.png';
imgs[rank].style.marginTop='31px';
//移除点击
imgs[rank].removeAttribute('onclick');
setTimeout('chulai()',sspeed);
}
}
//设置被打中的函数
function die(){
// 被打中的图片
imgs[rank].src='img/6.png';
imgs[rank].style.marginTop='3px';
imgs[rank].removeAttribute('onclick');
// 记录分数
count++;
newScore.innerHTML=count;
// 分数和最佳成绩比较
if (count>preScore) {
sscore.innerHTML=count;
preScore=count;
}
//给本地保存最佳成绩
localStorage.setAttribute('bestScore',preScore);
}
//创建时间控制游戏进度
var seconds = 60;
var speed = 1000;
// 时间的方法
function creatTime(seconds,speed){
//判断时间是不是小于10
var txt = '剩余时间: '+((seconds>10)?seconds:'0'+seconds)+'秒';
// 将时间显示在页面上
times.innerHTML = txt;
// 按钮控制的逻辑
if (play) {
var timeId = setTimeout("creatTime(seconds--,speed)",speed);
}else{
clearTimeout(timeId);
}
// 如果时间结束的成绩判断
if (seconds==0) {
// 清除延时
clearTimeout(timeId);
//localStorage.setItem(key,value)：将value存储到key字段
localStorage.setItem("bestScore",preScore);
// 显示隐藏的结果块
if(cover.style.display=='none'){
cover.style.display='block';
//如果没有成绩 输出的结果
if(count==undefined){
text.innerHTML = "当前成绩为："+0+"分"+"<br/>"+"游戏结束！";
//localStorage.getItem(key):获取指定key本地存储的值
//如果有超过原来的最佳成绩
}else if(count==localStorage.getItem("bestScore")){
text.innerHTML = " 恭喜你打破记录,当前成绩为："+count+"分"+"<br/>"+"游戏结束！";
//最后的结果
}else{
text.innerHTML = "当前成绩为："+count+"分"+"<br/>"+"游戏结束！";
}
}
}
}
//调用方案
creatTime(seconds,speed);
//获取按钮
var pause = document.getElementById('Pause');
var start = document .getElementById('Start');
var refresh = document.getElementById('Refresh');
var dl = document.getElementById('Speed');
//创建按键
pause.onclick = function(){
play =false;
}
start.onclick = function(){
play=true;
mov();
//建立延时
timeId = setTimeout("creatTime(seconds--,speed)",speed);
}
refresh.onclick = function(){
window.location.reload();
}
dl.onclick = function(){
//通过改变速度来改变难度
if (dl.value=='普通型') {
sspeed = 700;
}else if (dl.value=='一般型') {
sspeed=600;
}else {
sspeed = 480;
}
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 打地鼠游戏用到的一些代码
- xml解析（详细步骤及实例代码作为参考，理论部分请参阅互联网）之 SAXP （更新中）
- 二、给定一个 n 行 m 列的地牢，其中 '.' 表示可以通行的位置，'X' 表示不可通行的障碍，牛牛从 (x0 , y0 ) 位置出发，遍历这个地牢，和一般的游戏所不同的是，他每一步只能按照一些指定的步长遍历地牢，要求每一步都不可以超过地牢的边界，也不能到达障碍上。地牢的出口可能在任意某个可以通行的位置上。牛牛想知道最坏情况下，他需要多少步才可以离开这个地牢。
- 集成微信支付详细步骤及说明——解决点击微信支付只有一个确定按钮的情况
- 一个笨拙的猜数游戏代码参考
- 很多童鞋喜欢玩一些lol、dota这类游戏，这类游戏有一个特点，在你不死的情况下连续杀人会有不同称号。 下面输入一组字符，其中只包含K和D，K代表杀敌，D代表死亡，求他最高称号。 0/1/2 - Yo
- C#编写一个打字母游戏，详细代码。。。。。
- 第一次用需求思路步骤的方式写代码，记录下，我的一个新的起点，思维又一次转变
- 今天发现一个变态的游戏代码
- 关于Android中http请求Gosn解析的一些个人见解： 首先是XML中构建布局： 在布局里面建一个listview用来展示Gson解析的字符
- 如果不用MFC，直接使用API写一个Windows程序，需哪些步骤？MFC是怎么做到菜单点击后，响应对应的代码的？
- KMP的原理和代码实现(详细注释|参考多个博客总结|可作为模板)
- Python代码实现删除一个list里面的重复元素
- 一个游戏程序员的学习资料
- 一个游戏程序员的学习资料
- 清除SQL被注入恶意病毒代码 详细出处参考
- gridView在view页面中的一些代码详细模板
- 一个游戏程序员的学习资料
- 【Visual C++】游戏开发笔记二十九 一步一步教你用优雅的Direct3D11代码画一个三角形
- 国外的一个代码 仓库 github --- 里面类似一个svn 的代码仓库