捉虫小游戏 Insert Catching game
1. 概述
项目本体为一个捉虫小游戏.
效果:
2. 结构和切图:
网页的基本结构如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<body>
<div class="screen">
<h1>Catch the Insect</h1>
<button class="btn" id="start-btn">Play Game</button>
</div>
<div class="screen">
<h1>What's your "favorite" insect?</h1>
<ul class="insects-list">
<li>
<button class="choose-insect-btn">
<p>Fly</p>
<img src="http://pngimg.com/uploads/fly/fly_PNG3946.png" alt="fly">
</button>
</li>
<li>
<button class="choose-insect-btn">
<p>Mosquito</p>
<img
src="http://pngimg.com/uploads/mosquito/mosquito_PNG18175.png"
alt="mosquito"
/>
</button>
</li>
<li>
<button class="choose-insect-btn">
<p>Spider</p>
<img
src="http://pngimg.com/uploads/spider/spider_PNG12.png"
alt="spider"
/>
</button>
</li>
<li>
<button class="choose-insect-btn">
<p>Roach</p>
<img
src="http://pngimg.com/uploads/roach/roach_PNG12163.png"
alt="roach"
/>
</button>
</li>
</ul>
</div>
<div class="screen game-container" id="game-container">
<h3 id="time" class="time">Time: 00:00</h3>
<h3 id="score" class="score">Score: 0</h3>
<h5 id="message" class="message">
Are you annoyed yet? <br/>
You are playing an impossible game!!
</h5>
</div>
</body>
3. 编写 CSS 样式
完整的 CSS 样式表如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
* {
box-sizing: border-box;
}
body {
background-color: #516dff;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
height: 100vh;
overflow: hidden;
margin: 0;
text-align: center;
}
a {
color: #fff;
}
h1 {
line-height: 1.4;
}
.btn {
border: 0;
background-color: #fff;
color: #516dff;
padding: 15px 20px;
font-family: inherit;
cursor: pointer;
}
.btn:hover {
opacity: .9;
}
.btn:focus {
outline: 0;
}
.screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
transition: margin .5s ease-out;
}
.screen.up {
margin-top: -100vh;
}
.insects-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
padding: 0;
}
.insects-list li {
margin: 10px;
}
.choose-insect-btn {
background-color: transparent;
border: 2px solid #fff;
color: #fff;
cursor: pointer;
font-family: inherit;
width: 150px;
height: 150px;
}
.choose-insect-btn:hover {
background-color: #fff;
color: #516dff;
}
.choose-insect-btn:active {
background-color: rgba(255, 255, 255, 0.7);
}
.choose-insect-btn img {
width: 100px;
height: 100px;
object-fit: contain;
}
.game-container {
position: relative;
}
.time,
.score {
position: absolute;
top: 20px;
}
.time {
left: 20px;
}
.score {
right: 20px;
}
.message {
line-height: 1.7;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
padding: 20px;
z-index: 100;
text-align: center;
opacity: 0;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -150%);
transition: transform 0.4s ease-in;
}
.message.visible {
transform: translate(-50%, 150%);
opacity: 1;
}
.insect {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
position: absolute;
transform: translate(-50%, -50%) scale(1);
transition: transform 0.3s ease-in-out;
}
.insect.caught {
transform: translate(-50%, -50%) scale(0);
}
.insect img {
width: 100px;
height: 100px;
}
4. JavaScript
下面编写 JavaScript 函数:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
// select corresponding items
const screens = document.querySelectorAll('.screen');
const choose_insect_btns = document.querySelectorAll('.choose-insect-btn');
const start_btn = document.getElementById('start-btn');
const game_container = document.getElementById('game-container');
const timeEl = document.getElementById('time');
const scoreEl = document.getElementById('score');
const message = document.getElementById('message');
// initialize counters
let seconds = 0;
let score = 0;
let selected_insect = {};
// lift up the game screen when game is started
start_btn.addEventListener('click', () => screens[0].classList.add('up'))
// insert selection
choose_insect_btns.forEach(btn => {
btn.addEventListener('click', () => {
const img = btn.querySelector('img')
const src = img.getAttribute('src')
const alt = img.getAttribute('alt')
selected_insect = { src, alt }
screens[1].classList.add('up')
setTimeout(createInsect, 1000)
startGame()
})
})
// handle time counting
function startGame() {
setInterval(increaseTime, 1000)
}
function increaseTime() {
let m = Math.floor(seconds / 60)
let s = seconds % 60
m = m < 10 ? `0${m}` : m
s = s < 10 ? `0${s}` : s
timeEl.innerHTML = `Time: ${m}:${s}`
seconds++
}
// handle insert creation: randomly place insects on screen
function createInsect() {
const insect = document.createElement('div')
insect.classList.add('insect')
const { x, y } = getRandomLocation()
insect.style.top = `${y}px`
insect.style.left = `${x}px`
insect.innerHTML = `<img src="${selected_insect.src}" alt="${selected_insect.alt}" style="transform: rotate(${Math.random() * 360}deg)" />`
insect.addEventListener('click', catchInsect)
game_container.appendChild(insect)
}
function getRandomLocation() {
const width = window.innerWidth
const height = window.innerHeight
const x = Math.random() * (width - 200) + 100
const y = Math.random() * (height - 200) + 100
return { x, y }
}
// handle removing the insect if user caught it
function catchInsect() {
increaseScore()
this.classList.add('caught')
setTimeout(() => this.remove(), 2000)
addInsects()
}
function addInsects() {
setTimeout(createInsect, 1000)
setTimeout(createInsect, 1500)
}
// handle score counting
function increaseScore() {
score++
if(score > 19) {
message.classList.add('visible')
}
scoreEl.innerHTML = `Score: ${score}`
}
最后, 完整的网页演示可见 此处
