js消除小遊戲 極簡版

2022-05-25 04:57:08 字數 1463 閱讀 9451

js小遊戲極簡版

(1) 基礎布局

(2)簡單的基礎樣式

* 

div.box

p span

//js新增的小方塊樣式

.div

(3)js部分

一, 新增五排(沒排十個小方塊)

(4)獲取選擇器

var aspan = document.queryselectorall("span")

var odiv = document.queryselector(".div");

var op = document.queryselector("p");

(5)小遊戲中方向鍵的繫結效果

document.onkeydown = function(eve)  else 

break;

case 38:

if (odiv.offsettop <= 400) else

break;

case 39:

if (odiv.offsetleft + 100 >= 1000) else

break;

case 40:

if (odiv.offsettop + 20 >= 700) else

break;

}

(6)

function fn(n)  else if (op.offsetleft+lspeed <= 0)  else 

if (op.offsettop+tspeed <= 0) else

if((op.offsettop>=odiv.offsettop-20)&&(op.offsettop<=odiv.offsettop)&&

(op.offsetleft>=odiv.offsetleft-10)&&(op.offsetleft<=odiv.offsetleft+90) //未做精簡的部分,比較亂 頭腦清晰者課觀之,思路奇葩不予講解

)if(op.offsettop>=690)}}

}, 30)}}

最後差點忘記

function random(m, n)
完整效果圖如下:

:(7)測試:

bug1:開始按鍵盤不能按上鍵,  原因:小球與灰色方塊接觸返回機制設定(方塊的中間的水平線為小球**分割線,反覆觸碰),所以很快速度翻轉

bug2:灰色方塊去碰彈回來的小球時,如果是側邊接觸,會發生bug1,同上

bug3:有些方塊看似碰到 缺不消失,  原因,觸碰小時規則的書寫也許有點不當之處

Virtual Dom Diff原理,極簡版

先介紹乙個概念virtual dom,我猜大家或多或少都應該知道什麼是virtual dom吧,簡單來說就是用js來模擬dom中的結點。下面就是乙個virtual dom的結構,包含了標籤名,擁有的屬性,孩子結點,render函式 class element this.children childr...

極簡版shared ptr實現

程式如下 標頭檔案 ifndef pch h define pch h include includeusing namespace std class like shared ptr 接受指標的建構函式 like shared ptr string a location a number new ...

網頁版撞球小遊戲

主要是用html js css 做的乙個網頁版小遊戲,從網上看到的所以整理下面給大家看看 先來看效果圖 html檔案 然後css檔案 body h1 h1 sub info table ball dotwrap guide target cue bot ctrl force shootpos dot...