學(xué)習(xí)目的：用基礎(chǔ)知識(shí)做一個(gè)好玩的游戲

JS項(xiàng)目的小樂(lè)趣視頻——輕松寫一個(gè)打地鼠游戲

課程大綱：

• 所需知識(shí)點(diǎn)講解
• 界面搭建
• 顯示和消失地鼠
• 得分與扣分
• 課程總結(jié)

1.所需知識(shí)：html部分

• body：放網(wǎng)頁(yè)元素的容器
• input：表單元素
• type屬性為：text表示文本框
• type屬性為：button表示按鈕
• table：表格
• tr：表格中的一行
• td：一行中的一列
• img：顯示圖片

2.所需知識(shí)：CSS部分

• width：寬度
• height: 高度
• background: 背景圖片
• center：在盒子內(nèi)居中
• cover：按比例填滿背景圖片
• margin: 外邊距
• 10px auto; 居中
• text-align：設(shè)置內(nèi)容位置
• center為居中
• cursor：修改鼠標(biāo)指針樣式
• display：顯示模式
• none代表不顯示
• 漸變色：linear-gradient
• border-radius：切圓角
• border: 邊框
• margin-top: 設(shè)置上邊距
• margin-left: 設(shè)置左邊距
• position: 外邊距
• 10px auto; 居中
• left：設(shè)置參照定位父元素的左邊距離
• top：設(shè)置參照定位父元素的右邊距離
• outline：突出線
• none代表不顯示
• font-size：字體大小

3.所需知識(shí)：js部分

• document.getElementById：根據(jù)id找到某個(gè)元素
• document.querySelector：根據(jù)css選擇器找到第一個(gè)匹配的元素
• document.querySelectorAll：根據(jù)css選擇器找到所有匹配的元素
• Onmousedown：鼠標(biāo)按下
• Onmouseup：鼠標(biāo)彈起
• setInterval：開啟定時(shí)器
• clearInterval：關(guān)閉定時(shí)器
• Math.random():生成0-1之間的隨機(jī)數(shù)，包括0，不包括1

4.界面分析

總結(jié)：

搭建界面

設(shè)置初始值

開啟計(jì)時(shí)器隨機(jī)產(chǎn)生地鼠

給每個(gè)單元格加鼠標(biāo)按下、彈起事件，切換錘子圖片以及判斷是否打擊到地鼠

封裝代碼，制作簡(jiǎn)單、困難兩個(gè)啟動(dòng)界面

總結(jié)

以上是生活随笔為你收集整理的js 定时网页点击_JS的小乐趣：轻松完成打地鼠游戏的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。