Home > Developer > Web Develop
JS section Content
——————————————————————————————————————————————————————
var start = document.getElementById ("Start"); /* Game Start button */
var diglettlocation = document.getelementsbyclassname ("Anmint");
var gameimg = [' img/ds01.png ', ' img/ds03.png ', ' img/ds05.png ', ' img/tz01.png ', ' img/tz03.png ']; /* The gameimg that will appear is deposited in the array */
var setIn; /* Empty the Picture style timer */
var grade = 0; /* Save current Score */
var Gradepanel = document.getElementById ("Gradepanel");
var Grademax = document.getElementById ("Grademax");
var Imgonclick = document.getelementsbyclassname ("img"); /* Click to toggle the corresponding picture */
var showresult = document.getelementsbyclassname ("Showresult"); /* real-time plus and minus values */
var timekeep = document.getElementById ("Timekeep"); /* Timing Settings */
var setintime; /* Countdown Timer */
function Startgame () {
Cleartest.cleargameimg ();
var gameimgindex = ""; /* Save SRC Address */
var holenum = parseint (Math.random () * 9); /* Random execution of holenum generation target */
if (Holenum < 1) {
Holenum = 0;
}
for (var i = 0; i < Holenum; i++) {
var index = parseint (Math.random () * 9); /* Save random subscript */
Gameimgindex = Gameimg[parseint (Math.random () * gameimg.length)]; /* Randomly remove gameimg pictures */
DIGLETTLOCATION[INDEX].SRC = Gameimgindex;
Diglettlocation[index].classlist.add ("Diglett"); /* Start Animation */
}
}/* Start the game */
Start.onclick = function () {
if (Start.innertext = = = "Start Game") {
Grade = 0;
SetIn = SetInterval (startgame, 1500);
Start.innertext = "End Game";
timekeep.innerhtml = 60;
Setintime = SetInterval (time,1000);
} else {
Cleartest.endtest ();
}
};
for (var i = 0; i < imgonclick.length; i++) {
Imgonclick[i].onclick = function () {
Switch (THIS.SRC) {
Case ' http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/ds01.png ':
THIS.SRC = ' img/ds02.png ';
Grade = parseint (grade * 1.1);
gradepanel.innerhtml = grade;
showresult[0].innerhtml = "+10%";
Break
Case ' http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/ds03.png ':
THIS.SRC = ' img/ds04.png ';
Grade + = 100;
gradepanel.innerhtml = grade;
showresult[0].innerhtml = "+100";
Break
Case ' http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/ds05.png ':
THIS.SRC = ' img/ds06.png ';
Grade + = 50;
gradepanel.innerhtml = grade;
showresult[0].innerhtml = "+50";
Break
Case ' http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/tz01.png ':
THIS.SRC = ' img/tz02.png ';
Grade = parseint (GRADE/2);
gradepanel.innerhtml = grade;
showresult[0].innerhtml = "÷2";
Break
Case ' http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/tz03.png ':
THIS.SRC = ' img/tz04.png ';
Grade-= 100;
if (Grade < 0) {
Grade = 0;
}
gradepanel.innerhtml = grade;
showresult[0].innerhtml = "-100";
Break
Default
Break
}
}
}/* Loop bind Picture Click event */
function Time () {
timekeep.innerhtml = parseint (TIMEKEEP.INNERHTML-1);
if (parseint (timekeep.innerhtml) <0) {
Cleartest.endtest ();
}
}/* Timer */
var cleartest = {
Endtest:function () {
This.cleargameimg ();
Clearinterval (SetIn);
Clearinterval (Setintime);
Start.innertext = "Start Game";
if (parseint (gradepanel.innerhtml) > parseint (grademax.innerhtml)) {
grademax.innerhtml = gradepanel.innerhtml;
}
showresult[0].innerhtml = "";
gradepanel.innerhtml = "";
timekeep.innerhtml = 0;
},/* Function method executed at the end of */
Cleargameimg:function () {
for (var i = 0; i < diglettlocation.length; i++) {
DIGLETTLOCATION[I].SRC = "";
Diglettlocation[i].classlist.remove ("Diglett")
}
}/* Empty picture Method */
}; /*cleartest Object */
HTML section
——————————————————————————————————————————————————————————————————————————————————————————————————————————————— ———
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Mouse Games </title>
<link rel= "stylesheet" href= "Css/index.css" >
<body>
<div>
<marquee> fun hit the ground mouse </marquee>
<main>
<!--game Area--
<ul>
<!--I stands for pits, Div stands for hamster-to-
<li><i></i></li>
<li><i></i></li>
<li><i></i></li>
<li><i></i></li>
<li><i></i></li>
<li><i></i></li>
<li><i></i></li>
<li><i></i></li>
<li><i></i></li>
</ul>
<footer>
<div>
<span id= "Start" > Start Game </span>
</div>
<!--Scoreboard--
<div>
<!--left scoring--
<div class= "Scoring" >
<div> Current score: <span id= "Gradepanel" >0</span><b class= "Showresult" ></b></div>
<div> History Highest score: <span id= "Grademax" >0</span></div>
</div>
<!--the right-hand clock-
<div class= "Timekeeping" >
<div> time Remaining: <span id= "Timekeep" >60</span> seconds </div>
<div> images from the web. </div>
</div>
</div>
</footer>
</main>
</div>
<script src= "Js/index.js" ></script>
</body>
CSS Section
——————————————————————————————————————————————————————————————————————————————————————————————————————————————— ———*{margin:0;padding:0}
html{height:100%}
Body{background:linear-gradient (to top left, #f5f7fa, #c3cfe2);}
body>div{padding-top:50px;}
main{
width:550px;
height:600px;
margin:0 Auto;
padding-top:20px;
Background:linear-gradient (0, #a1c4fd, #c2e9fb);
border-radius:15px;
Cursor:url ('.. /img/mous.png ') 30,auto
}
ul{
Overflow:hidden;
margin-left:35px;
}
li{
width:150px;
height:120px;
List-style:none;
Float:left;
position:relative;
margin-right:10px;
Overflow:hidden;
}
i{
Position:absolute;
Display:block;
width:150px;
height:50px;
Border:solid #ccc;
border-radius:50%;
bottom:0;
box-shadow:0 0 10px inset;
Background:linear-gradient (to top left, #f6d365, #fda085);
}
. diglett{
Position:absolute;
margin:0 Auto;
left:30px;
bottom:5px;
opacity:0;
Animation:diglett 1.5s ease-in-out Infinite;
}
footer{
margin-top:50px;
}
footer>div>span{
Display:block;
font-family: "Microsoft Ya Black Light", "Song Body";
Color: #676767;
font-size:36px;
font-weight:900;
Background: #be9568;
border-radius:5px;
margin:0 Auto;
width:160px;
Text-align:center;
Background:linear-gradient (to top left, #fee140, #e2d1c3);
border:2px solid Burlywood;
box-shadow:0 0 5px;
}
/* Ground Mouse animation */
@keyframes Diglett {
50%{
bottom:20px;
Opacity:1;
}
100%{
bottom:5px;
opacity:0;
}
}
#start: hover{
Color: #e8e8e8;
Background:linear-gradient (to top left, #fee140, #fa709a);
box-shadow:0 0 25px inset;
}
/* timing, scoring style */
. scoring,.timekeeping{
width:250px;
height:120px;
border:1px solid #be9568;
Float:left;
margin:10px 0 0 15px;
border-radius:5px;
Background:linear-gradient (to top left, #fbc2eb, #a6c1ee);
box-shadow:0 0 3px;
font-weight:600;
font-size:18px;
Color: #74348f;
text-indent:10px;
}
. scoring>div,.timekeeping>div{
height:50px;
line-height:50px;
}
. scoring>div:first-child{
}
. scoring>div:first-child>b{
Display:block;
width:90px;
height:50px;
Float:right;
}
marquee{
Position:absolute;
font-size:26px;
top:5px;
Color: #8f1d32;
Animation:fontblink 3s linear infinite;
}
@keyframes Fontblink {
10%{color: #cccccc}
20%{color: #cc0d25}
30%{color: #1c11cc}
40%{color: #20cc19}
50%{color: #cc0cbe}
60%{color: #09cacc}
70%{color: #ccb609}
80%{color: #807b7f}
90%{color: #000000}
100%{color: #7f5d4b}
}Native JS Simple play hamster Game
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
