Maze&&Mole

其他 2018-10-07 05:09:56 阅读次数: 0

使用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>";
    }
}

希望各位可以批评指正。

猜你喜欢

转载自blog.csdn.net/wyxwyx469410930/article/details/78460578
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022