JS實現(xiàn)消滅星星小游戲
更新時間：2022年01月07日 08:50:03 作者：我莫得感情_
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)消滅星星小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)消滅星星小游戲的具體代碼，供大家參考，具體內(nèi)容如下
先看看效果圖：
先準(zhǔn)備css和一張星星圖片，很簡單，body背景設(shè)為黑色。
<style>
? ? ? ? body {
? ? ? ? ? ? background-color: black;
? ? ? ? }
</style>就直接寫JS代碼了，解釋都寫在注釋里面了
<script>
? ? ? ? function start() {
? ? ? ? ? ? //設(shè)置一個定時器，重復(fù)執(zhí)行的秒數(shù)是500ms
? ? ? ? ? ? timer = setInterval(function() {
? ? ? ? ? ? ? ? //創(chuàng)建圖片元素
? ? ? ? ? ? ? ? var obj = document.createElement('img');
? ? ? ? ? ? ? ? //星星隨機(jī)寬度
? ? ? ? ? ? ? ? var w = Math.floor(Math.random() * 80 + 20);
? ? ? ? ? ? ? ? obj.width = w;
? ? ? ? ? ? ? ? //隨機(jī)出現(xiàn)的位置
? ? ? ? ? ? ? ? var x = Math.floor(Math.random() * 1400 + 60);
? ? ? ? ? ? ? ? var y = Math.floor(Math.random() * 460 + 60);
? ? ? ? ? ? ? ? obj.style.position = 'absolute';
? ? ? ? ? ? ? ? //將隨機(jī)生成的X,Y的值賦給對象
? ? ? ? ? ? ? ? obj.style.top = y + 'px';
? ? ? ? ? ? ? ? obj.style.left = x + 'px';
? ? ? ? ? ? ? ? //給圖片參數(shù)賦上地址
? ? ? ? ? ? ? ? obj.src = 'imgs/xingxing.gif';
? ? ? ? ? ? ? ? //添加到整個body頁面
? ? ? ? ? ? ? ? document.body.appendChild(obj);
? ? ? ? ? ? ? ? //創(chuàng)建點擊事件，想要消除自己，就是remove掉自己父親的兒子
? ? ? ? ? ? ? ? obj.addEventListener('click', function() {
? ? ? ? ? ? ? ? ? ? this.parentNode.removeChild(this);
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }, 500);
? ? ? ? };
? ? ? ? start();
</script>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript設(shè)置IFrame高度自適應(yīng)(兼容各主流瀏覽器)
IFrame高度的設(shè)置問題一直都是前端的噩夢而且還要兼容各主流瀏覽器更是難上加難了，下面與大家分享下一個不錯的技巧，感興趣的你可以參考下哈2013-06-06
這篇文章主要介紹了JavaScript按值刪除數(shù)組元素的方法,涉及javascript操作數(shù)組的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
vue(javaScript)操作字符串的一些常用方法總結(jié)
在平時前端開發(fā)中,我們不難發(fā)現(xiàn)經(jīng)常會用到字符串操作,這篇文章主要給大家介紹了關(guān)于vue(javaScript)操作字符串的一些常用方法的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組之展開運算符的相關(guān)資料,你可以通過展開操作符(Spread operator)擴(kuò)展一個數(shù)組對象和字符串,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
一文詳解Promise.race()方法功能及應(yīng)用場景
這篇文章主要為大家介紹了Promise.race()方法功能及應(yīng)用場景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
JS與jQuery實現(xiàn)子窗口獲取父窗口元素值的方法
這篇文章主要介紹了JS與jQuery實現(xiàn)子窗口獲取父窗口元素值的方法,涉及javascript與jQuery操作窗口元素的相關(guān)技巧,需要的朋友可以參考下2017-04-04
這篇文章主要講解了JavaScript異步解決處理方案，文章中有詳細(xì)的解決方案和代碼示例，需要的朋友參考一下2023-04-04
最近項目經(jīng)理交給我一下新項目，要實現(xiàn)關(guān)系圖，需要在線條上繪制文字。下面小編把使用textPath實現(xiàn)線條上的文字功能分享到腳本之家平臺供大家參考2017-12-12
前端處理.xlsx文件流并觸發(fā)下載的完整實現(xiàn)方案
本文詳細(xì)介紹了前端處理.xlsx文件流并觸發(fā)下載的完整實現(xiàn)方案,包括核心實現(xiàn)流程、關(guān)鍵增強(qiáng)功能、常見問題處理以及最佳實踐建議,方案推薦使用FileSaver.js,適用于中型以上項目,需要的朋友可以參考下2025-03-03
jquery對單選框,多選框,文本框等常見操作小結(jié)
本篇文章主要是對jquery對單選框,多選框,文本框等常見操作進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01