使用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>";
}
}
希望各位可以批评指正。