Maze&&Mole
来源：互联网 发布：淘宝天猫运营外包 编辑：程序博客网 时间：2024/06/03 11:16
使用JS实现简单游戏地图与打地鼠
（1）打地鼠
预览
HTML文件
<!DOCTYPE html><html><head> <title>Whac-a-mole</title> <link rel="stylesheet" href="mole.css"> <script src="mole.js"></script></head><body> <div class = "mole"> <h1 class = "center">Whac-a-mole</h1> <div class = "center">Test your skill. How many boxes(moles) can you check(hit) in 30 seconds?</div> <div id = "info"> <input type = "button" value = "Start Game | Stop Game" id = "start"> <div id = "Time"> <input type = "text" value = "30" id = "time" onfocus="blur()"> <div class = "right">Time:</div> </div> <input type = "text" name = "show" id = "show" onfocus="blur()"> <div id = "Score"> <input type = "text" value = "0" id = "score" onfocus="blur()"> <div class = "right">Score:</div> </div> </div> <hr> <div id = "main"> <input type="radio" name="radio" value="0"> <input type="radio" name="radio" value="1"> <input type="radio" name="radio" value="2"> <input type="radio" name="radio" value="3"> <input type="radio" name="radio" value="4"> <input type="radio" name="radio" value="5"> <input type="radio" name="radio" value="6"> <input type="radio" name="radio" value="7"> <input type="radio" name="radio" value="8"> <input type="radio" name="radio" value="9"> <input type="radio" name="radio" value="10"> <input type="radio" name="radio" value="11"> <input type="radio" name="radio" value="12"> <input type="radio" name="radio" value="13"> <input type="radio" name="radio" value="14"> <input type="radio" name="radio" value="15"> <input type="radio" name="radio" value="16"> <input type="radio" name="radio" value="17"> <input type="radio" name="radio" value="18"> <input type="radio" name="radio" value="19"> <input type="radio" name="radio" value="20"> <input type="radio" name="radio" value="21"> <input type="radio" name="radio" value="22"> <input type="radio" name="radio" value="23"> <input type="radio" name="radio" value="24"> <input type="radio" name="radio" value="25"> <input type="radio" name="radio" value="26"> <input type="radio" name="radio" value="27"> <input type="radio" name="radio" value="28"> <input type="radio" name="radio" value="29"> <input type="radio" name="radio" value="30"> <input type="radio" name="radio" value="31"> <input type="radio" name="radio" value="32"> <input type="radio" name="radio" value="33"> <input type="radio" name="radio" value="34"> <input type="radio" name="radio" value="35"> <input type="radio" name="radio" value="36"> <input type="radio" name="radio" value="37"> <input type="radio" name="radio" value="38"> <input type="radio" name="radio" value="39"> <input type="radio" name="radio" value="40"> <input type="radio" name="radio" value="41"> <input type="radio" name="radio" value="42"> <input type="radio" name="radio" value="43"> <input type="radio" name="radio" value="44"> <input type="radio" name="radio" value="45"> <input type="radio" name="radio" value="46"> <input type="radio" name="radio" value="47"> <input type="radio" name="radio" value="48"> <input type="radio" name="radio" value="49"> <input type="radio" name="radio" value="50"> <input type="radio" name="radio" value="51"> <input type="radio" name="radio" value="52"> <input type="radio" name="radio" value="53"> <input type="radio" name="radio" value="54"> <input type="radio" name="radio" value="55"> <input type="radio" name="radio" value="56"> <input type="radio" name="radio" value="57"> <input type="radio" name="radio" value="58"> <input type="radio" name="radio" value="59"> </div> <hr> <div class = "whole"> <div id = "untitled">Instruction:</div> <div id = "instructions"> <div class = "first_line">1. Click on the radio button(moles) as they are selected randomly by the computer.</div> <div class = "second_line">2. 1 point per hit, minus 1 point per miss.</div> </div> </div> </div></body></html>CSS文件
.center{ text-align: center ;}.whole{ margin-left: 75px ;}#instructions{ margin: 20px auto ; width: 650px ;}#untitled{ margin: 5px auto ; width: 800px ; font-weight: bold ;}.right{ float: right ; margin-right:5px;}#info{ width: 320px ; height:60px ; margin: 10px auto ;}#Time , #Score{ width: 120px ; float: right ; }#time , #score{ float: right ; height: 14px ; width: 50px ;}#Score{ margin-top: 10px ;}#show{ margin-top: 10px ; float: left ; width: 130px ;}hr{ width: 330px; }#main{ margin: 10px auto ; width: 320px ; height: 160px ;}input[type="radio"] { margin: 0px 0px 10px 13px;}JS文件
window.onload = function() { var start = document.getElementById("start"); start.addEventListener("click", clickStart); var show = document.getElementById("show"); var radios = document.getElementsByName("radio"); var randomValue; var flag = true; var playing = false; var stopping = false; var gameover = true; var score = document.getElementById("score"); var scoresValue = parseInt(score.value); var main = document.getElementById("main"); main.onclick = function(event) { if (event.target.name == "radio" && playing == true) { if (event.target.value == randomValue) { scoresValue += 1; randomValue = parseInt(60 * Math.random()); radios[randomValue].checked = true; } else { scoresValue -= 1; radios[randomValue].checked = true; radios[event.target.value].checked = false; } score.value = scoresValue; } else if (event.target.name == "radio" && playing == false) { radios[event.target.value].checked = false; } } function timeM() { var time = document.getElementById("time"); var timeValue = parseInt(time.value); if (timeValue != 0) { timeValue -= 1; time.value = timeValue; } else { playing = false; show.value = "Game Over"; clearInterval(clock); gameover = true; alert("Game Over.\nYour score is: " + scoresValue); for (var i = 0; i < 60; i++) { radios[i].checked = false; } score.value = "0"; } } function clickStart() { if (show.value.indexOf("Playing") >= 0) { show.value = "Game Over"; time.value = "0" timeM(); playing = false; } else if (show.value.indexOf("Game") >= 0) { playing = true; time.value = "30"; score.value = "0"; scoresValue = 0; clock = setInterval(timeM, 1000); show.value = "Playing"; radios[randomValue].checked = true; } else { clock = window.setInterval(timeM, 1000); show.value = "Playing"; randomValue = parseInt(60 * Math.random()); radios[randomValue].checked = true; playing = true; } }}（2）地图
预览
HTML文件
<!DOCTYPE html><html lang = "en"> <head> <meta charset = utf-8> <link rel = "stylesheet" type = "text/css" href = "maze.css" > <script src = "maze.js" type = "text/javascript"></script> <title>Maze!</title> </head> <body> <h1>The Amazing Mouse Maze!</h1> <h2>Movce your mouse over the "S" to begin</h2> <div id = "screen"></div> <div id = "maze"> <div class = "wall" id = "topLeftWall"></div> <div class = "wall" id = "topMiddleWall"></div> <div class = "wall" id = "topRightWall"></div> <div class = "wall" id = "leftTopWall"></div> <div class = "way" id = "topWay"></div> <div class = "wall" id = "rightTopWall"></div> <div class = "wall" id = "leftWall"></div> <div class = "way" id = "leftWay"></div> <div class = "wall" id = "middleTopWall"></div> <div class = "way" id = "rightWay"></div> <div class = "wall" id = "rightWall"></div> <div class = "button"><div id = "startButton"><p>S</p></div></div> <div class = "way" id = "bottomLeftWay"></div> <div class = "wall" id = "middleBottomWall"></div> <div class = "way" id = "bottomRightWay"></div> <div class = "button"><div id = "endButton"><p>E</p></div></div> <div class = "wall" id = "bottomLeftWall"></div> <div class = "wall" id = "bottomMiddleWall"></div> <div class = "wall" id = "bottomRightWall"></div> </div> <div class = "wholeLast"> <div class="firstSentence">The object of this game is to guide the mouse cursor through the start area </div> <div class = "secondSentence">and get to the end area. Be sure to avoid the wallls: </div> <div class="marginTop" id="block"></div> <div class="thirdSentence">Good luck!</div> </div> </body></html>CSS文件
body { margin: 0px; padding: 0px; font-family: "Century Gothic",sans-serif;}h1, h2 { text-align: center; margin: 10px;}h2{ font-weight: normal;}#screen { height: 45px;}#maze { width: 500px; height: 300px; margin-right: auto; margin-left: auto;}#bottom { width: 650px; margin-left: auto; margin-right: auto; }.wall, .way, .button { display: inline-block; float: left;}.wall { background-color: #eeeeee;}#bottomLeftWall { position: relative; left:-292px; width: 202px; height: 50px; border-left: black 1px solid; border-bottom: black 1px solid;}#bottomMiddleWall { position: relative; top:-51px ; left:203px ; width: 89px; height: 50px; border-bottom: black 1px solid;}#bottomRightWall { position: relative; top:-51px ; left:203px ; width: 200px; height: 50px; border-right: black 1px solid; border-bottom: black 1px solid;}#topLeftWall { width: 149px; height: 50px; border-left: black 1px solid;}#topRightWall { width: 150.5px; height: 50px; border-right: black 1px solid;}#topMiddleWall { width: 192.5px; height: 50px;}#topLeftWall, #topMiddleWall, #topRightWall { border-top: black 1px solid;}#leftTopWall, #rightTopWall { width: 149px; height: 50px; border-left: black 1px solid; border-right: black 1px solid;}#rightWall, #leftWall { width: 149px; height: 100px; border-left: black 1px solid; border-right: black 1px solid; border-bottom: black 1px solid;}#middleTopWall { width: 88px; height: 100px; border-left: black 1px solid; border-right: black 1px solid; border-top: black 1px solid;}#middleBottomWall { width: 88px; height: 50px; border-left: black 1px solid; border-right: black 1px solid;}#topWay { width: 192px; height: 48px; border-top: black 1px solid;}#leftWay, #rightWay { width: 51px; height: 100px;}#bottomLeftWay, #bottomRightWay { width: 158px; height: 48px; border-bottom: black 1px solid;}.wall{ cursor: none ;}.button { width: 44px; height: 48px; border-bottom: black 1px solid;}.button p{ position: relative; bottom: 15px;}#startButton, #endButton { position: relative; width: 40px; height: 40px; border: black 1px solid; text-align: center; line-height: 0px; font-family: "Tahoma"; font-size: 35px ; font-weight: normal;}#startButton { background-color: #7fff7f; margin: 2px 0px 2px 0px; float: left;}#endButton { background-color: #8583ff; margin: 2px 0px 2px 0px; float: right;}#example { width: 100px; height: 30px; margin-left: auto; margin-right: auto; border: 1px black solid; background-color: #eeeeee;}#bottom p { margin: 15px 0px 15px 0px;}.changed { background-color: red; display: inline-block; float: left;}.wholeLast{ position: relative; text-align: center ; margin:40px ;}#block{ margin: 30px ; margin-left: auto; margin-right: auto; width: 100px; height: 25px; background-color: #EEEEEE; border: 1px solid black;}.firstSentence{ position: relative; left:-390px;}.secondSentence{ position: absolute; left: 432px ; }.thirdSentence{ position: absolute; top:80px; left:432px ;}JS文件
var begin = 0;var isCheat = 0;window.onload = function() { addEventListeners();}function addEventListeners() { var walls = document.getElementsByClassName("wall"); for (var i = 0; i < walls.length; i++) { walls[i].addEventListener('mouseover', lose); walls[i].addEventListener('mouseout', restore); } var buttons = document.getElementsByClassName("button"); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('mouseover', changeMouseStyle); } var ways = document.getElementsByClassName("way"); for (var i = 0; i < ways.length; i++) { ways[i].addEventListener('mouseover', changeMouseStyle); } document.getElementById("maze").addEventListener('mouseleave', cheat); document.getElementById("startButton").addEventListener('mouseover', start); document.getElementById('endButton').addEventListener('mouseover', end);}function lose(event) { if (begin == 1) { begin = 0; var target = event.target; if (target.id == 'middleTopWall' || target.id == 'middleBottomWall') { var wall1 = document.getElementById("middleBottomWall"); var wall2 = document.getElementById("middleTopWall"); wall1.className = 'changed'; wall2.className = 'changed'; } else if (target.id == 'leftTopWall' || target.id == 'leftWall') { var wall1 = document.getElementById("leftWall"); var wall2 = document.getElementById("leftTopWall"); wall1.className = 'changed'; wall2.className = 'changed'; } else if (target.id == 'rightTopWall' || target.id == 'rightWall') { var wall1 = document.getElementById("rightWall"); var wall2 = document.getElementById("rightTopWall"); wall1.className = 'changed'; wall2.className = 'changed'; } else event.target.className = 'changed'; document.getElementById("screen").innerHTML = "<h2>You lose</h2>"; }}function restore(event) { var changes = document.getElementsByClassName("changed"); while (changes.length > 0) { changes[0].className = 'wall'; }}function changeMouseStyle(event) { event.target.style.cursor = "pointer";}function cheat(event) { isCheat = 1;}function start() { begin = 1; isCheat = 0; document.getElementById("screen").innerHTML = "";}function end() { if (begin == 1 && isCheat == 0) { begin = 0; document.getElementById("screen").innerHTML = "<h2>You Win</h2>"; } else if (isCheat == 1 && begin == 1) { begin = 0; isCheat = 0; document.getElementById("screen").innerHTML = "<h2>Don't cheat, you should start form the 'S' and move to the 'E' inside the maze!</h2>"; }}希望各位可以批评指正。
阅读全文
0 0
- Maze&&Mole
- mole
- mole
- Maze
- maze
- Maze
- maze
- Maze
- maze
- Maze
- Maze
- Maze
- Poj3034 Whac-a-Mole
- poj Whac-a-Mole
- POJ3034--Whac-a-Mole
- poj3034 Whac-a-Mole
- 4849: [Neerc2016]Mole Tunnels
- BZOJ4849 [Neerc2016]Mole Tunnels
- Mysql解决中文乱码的问题
- 编译器常量、运行时常量以及静态块执行
- iOS11.1也不安全? 新零日WiFi漏洞被发现
- WEB测试和Aepp测试区别
- 多线程下载示例
- Maze&&Mole
- Ajax页面缓存分析与解决
- 【codevs 6280】玩具谜题
- 【树形dp】战略游戏
- html
- 利用反射获取java类属性并赋值
- 面试经典
- Lua源码揭秘（四）一个不算难的string库扩展
- 数据类型和作用域链
