學習目的：用基礎知識做一個好玩的游戲

JS項目的小樂趣視頻——輕松寫一個打地鼠游戲

課程大綱：

• 所需知識點講解
• 界面搭建
• 顯示和消失地鼠
• 得分與扣分
• 課程總結

1.所需知識：html部分

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

2.所需知識：CSS部分

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

3.所需知識：js部分

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

4.界面分析

總結：

搭建界面

設置初始值

開啟計時器隨機產(chǎn)生地鼠

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

封裝代碼，制作簡單、困難兩個啟動界面

總結

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

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