怎样用javaScript做打地鼠游戏

来源:百度知道    2019/5/26 17:59:40
责任编辑:张小俊
字体:

好心游戏问答中心有网友提出了一个比较有代表性的问题【怎样用javaScript做打地鼠游戏】,小编觉得可能对其他网友也有帮助,所以将此问答整理出来了,希望对您有帮助。

小编为您搜罗的答案1

流程设计:

    点击“开始游戏”按钮游戏开始,否则将提示“请点击开始游戏”字样

    分数、命中率显示重置为“0”,倒计时开始(默认为30秒)

    老鼠图片不断显示、隐藏,玩家可点击鼠标左键进行游戏

    当30秒倒计时结束或者玩家主动点击“结束按钮”时,游戏结束并显示游戏结果

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>打地鼠</title>

<style type="text/css">

#content {

width:960px;

margin:0 auto;

text-align:center;

margin-top:40px;

}

#form1 {

margin:20px 0;

}

table {

margin:0 auto;

cursor:url(http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915n79d7hvffengpdxe.png),auto;

}

td {

width:95px;

height:95px;

background:#00ff33;

}

</style>

<script type="text/javascript">

var td = new Array(),  //保存每个格子的地鼠

playing = false,  //游戏是否开始

score = 0, //分数

beat = 0, //鼠标点击次数

success = 0, //命中率

knock = 0, //鼠标点中老鼠图片的次数

countDown = 30, //倒计时

interId = null, //指定 setInterval()的变量

timeId = null; //指定 setTimeout()的变量

//游戏结束

function GameOver(){

timeStop();

playing = false;

clearMouse();

alert("游戏结束! 你获得的分数为:"+score+" 命中率为:"+success);

success = 0;

score = 0;

knock = 0;

beat = 0;

countDown = 30;

}

//显示当前倒计时所剩时间

function timeShow(){

document.form1.remtime.value = countDown;

if(countDown == 0){

GameOver();

return;

}else{

countDown = countDown-1;

timeId = setTimeout("timeShow()",1000);

}

}

//主动停止所有计时

function timeStop() {

clearInterval(interId);

clearTimeout(timeId); 

}

//随机循环显示老鼠图片

function show(){

if(playing){

var current = Math.floor(Math.random()*25);

document.getElementById("td["+current+"]").innerHTML = '<img src="http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915w6tluu1gq8l1b54h.png">';

setTimeout("document.getElementById('td["+current+"]').innerHtml=''",3000); //使用 setTimeout()实现3秒后隐藏老鼠图片

}

}

//清除所有老鼠图片

function clearMouse(){

for(var i=0;i<25;i++){

document.getElementById("td["+i+"]").innerHTML="";

}

}

//点击事件函数,判断是否点中老鼠

function hit(id){

if(playing == false){

alert("请点击开始游戏!");

return;

}else{

beat += 1;

if(document.getElementById("td["+id+"]").innerHTML != ""){

score += 1;

knock += 1;

success = knock/beat;

document.form1.success.value = success;

document.form1.score.value = score;

document.getElementById("td["+id+"]").innerHTML = "";

}else{

score += -1;

success = knock/beat;

document.form1.success.value = success;

document.form1.score.value = score;

}

}

}

//游戏开始

function GameStart(){

playing = true;

interId = setInterval("show()",1000); 

document.form1.score.value = score;

document.form1.success.value = success;

timeShow();

</script>

</head>

<body>

<div id="content">

<input type="button" value="开始游戏" onclick="GameStart()" />

<input type="button" value="结束游戏" onclick="GameOver()" />

<form name="form1" id="form1">

<label>分数:</label>

<input type="text" name="score" size="5">

<label>命中率:</label>

<input type="text" name="success" size="10">

<label>倒计时:</label>

<input type="text" name="remtime" size="5">

</form> 

<table>

<tr>

<td id="td[0]" onclick="hit(0)"></td>  

<td id="td[1]" onclick="hit(1)"></td>

<td id="td[2]" onclick="hit(2)"></td>

<td id="td[3]" onclick="hit(3)"></td>

<td id="td[4]" onclick="hit(4)"></td>

</tr>

<tr>

<td id="td[5]" onclick="hit(5)"></td>

<td id="td[6]" onclick="hit(6)"></td>

<td id="td[7]" onclick="hit(7)"></td>

<td id="td[8]" onclick="hit(8)"></td>

<td id="td[9]" onclick="hit(9)"></td>

</tr>

<tr>

<td id="td[10]" onclick="hit(10)"></td>

<td id="td[11]" onclick="hit(11)"></td>

<td id="td[12]" onclick="hit(12)"></td>

<td id="td[13]" onclick="hit(13)"></td>

<td id="td[14]" onclick="hit(14)"></td>

</tr>

<tr>

<td id="td[15]" onclick="hit(15)"></td>

<td id="td[16]" onclick="hit(16)"></td>

<td id="td[17]" onclick="hit(17)"></td>

<td id="td[18]" onclick="hit(18)"></td>

<td id="td[19]" onclick="hit(19)"></td>

</tr>

<tr>

<td id="td[20]" onclick="hit(20)"></td>

<td id="td[21]" onclick="hit(21)"></td>

<td id="td[22]" onclick="hit(22)"></td>

<td id="td[23]" onclick="hit(23)"></td>

<td id="td[24]" onclick="hit(24)"></td>

</tr>

</table>

</div>

</body>

</html>

请注意:本文为编辑制作专题提供的资讯,页面显示的时间仅为生成静态页面时间而非具体内容事件发生的时间,由此给您带来的不便敬请谅解!

相关攻略及问答:

怎样用javaScript做打地鼠游戏

答:流程设计: 点击“开始游戏”按钮游戏开始,否则将提示“请点击开始游戏”字样 分数、命中率显示重置为“0”,倒计时开始(默认为30秒) 老鼠图片不断显示、隐藏,玩家可点击鼠标左键进行游戏 当30秒倒计时结束或者玩家主动点击“结束按钮”时,游戏结束...

用js做打地鼠游戏怎么让地鼠动起来

答:首先准备好所需要的素材,简单的如锤子,地鼠,地洞。然后开始制作做所需要的动画个程序。动画方面,主要是制作一个地鼠从地洞钻出和钻入的动画影片剪辑,第一帧的状态为停止。然后再场景中复制9个,摆放到指定位置(一般的地鼠游戏为9个洞穴)...

cocos2d-js 打地鼠源码,谁有吗

答:运行、测试游戏 1. 新建一个名为 CocosJSGame 的 Cocos JavaScript 工程 2. 点击工具栏上的 debug 按钮 3. 默认情况下脚本会运行在我们提供的 mac 版本预编译 runtime 上。为了简单起见,我们不对默认值进行任何改动。如果你想要在其他我们支持

www.haoxyx.com true http://getqq.haoxyx.com/g/790/7902911.html report 7321 好心游戏问答中心有网友提出了一个比较有代表性的问题【怎样用javaScript做打地鼠游戏】,小编觉得可能对其他网友也有帮助,所以将此问答整理出来了,希望对您有帮助。小编为您搜罗的答案1流程设计:点击“开始游戏”按钮游戏开始,否则将提示“请点击开始游戏”字样分数、命中率显示重置为“0”,倒计时开始(默认为30秒)老鼠图片不断显示、隐藏,玩家可点击鼠标左键进行游戏当30秒倒计时结束或者玩家主动点击“结束按钮”时,游戏结束并显示游戏结果<!doctypehtml><html>
最近关注
首页推荐
热门图片
最新添加资讯
24小时热门资讯
精彩资讯
精彩推荐
热点推荐
真视界
精彩图片
社区精粹
关于本站 | 广告服务 | 手机版 | 商务合作 | 免责申明 | 招聘信息 | 联系我们
Copyright © 2004-2017 haoxyx.com All Rights Reserved. 好心游戏网 版权所有
京ICP备10044368号-1 京公网安备11010802011102号