效果
下面是詳細**
開始遊戲
停止遊戲
分數:
function hero(options)
hero.prototype.draw = function() else
}hero.prototype.createbullet = function(options) )
this.bullet.push(bu);
} else )
this.bullet.push(bu);
}}
function bullet(options)
bullet.prototype.draw = function()
let score = 0; //分數
let scorediv = document.queryselector(".score"); //分數div
let canvas = document.queryselector("#can1"); //獲取畫布
let ctx = canvas.getcontext("2d"); //獲取畫布物件
var enemyarr = ; //敵人陣列
var timeouts = null; //子彈移動和介面重新整理的定時器
let hero = null; //英雄
var timeouts2 = null; //隨機產生敵人的定時器
let gamebutton = document.queryselectorall("button"); //兩個遊戲按鈕 開始和暫停
/** * 遊戲開始
*/gamebutton[0].addeventlistener("click", () => )
resetdraw();
createenemy();
gamebutton[0].style.visibility = "hidden"
gamebutton[1].style.visibility = "visible"
})/**
* 遊戲停止
*/gamebutton[1].addeventlistener("click", () => )
/** 重新整理介面
呼叫英雄的重繪 和子彈的重繪 以及子彈的移動
*/function resetdraw()
if (hero.bullet[i].x > 600)
} //敵人的子彈重繪移動和對英雄的碰撞
for (let i = 0; i < enemyarr.length; i++)
if (bulletachero(enemybullet))
} }//敵人的重繪和移動
for (let i = 0; i < enemyarr.length; i++)
} timeouts = settimeout(resetdraw, 10);
}/**
* 隨機產生敵人
*/function createenemy()
let point = [0, 60, 120, 180, 240, 300, 360]
let y = parseint(math.random() * point.length)
enemyarr.push(
new hero()
) enemycreatbullet();
timeouts2 = settimeout(createenemy, 2000)
}/**
* 建立敵機子彈
*/function enemycreatbullet() ) }}
/** * 子彈碰撞敵人檢測
* @param bullet
*/function bulletacenemy(bullet) }}
/** * 子彈碰撞英雄檢測
*/function bulletachero(bullet)
}/**
* 英雄的移動方法
*/let move =
}, hero.movedeley)
}, up()
}, hero.movedeley)
}, down()
}, hero.movedeley)
}, right()
}, hero.movedeley) }}
/** * 繫結鍵盤監聽事件
*/let up = false,
left = false,
right = false,
down = false;
function bindkeyevent() );
break;
case 38: //up
if (!up)
break;
case 39: //right
if (!right)
break;
case 40: //down
if (!down)
break;
case 37: //left
if (!left)
break;
} }document.onkeyup = function(e)
}}
了解canvas畫布
一 什麼是 canvas？二 canvas基本使用 mycanvas width 300 height 300 canvas canvas畫布的預設尺寸是300 150 1 獲取到canvas元素 var c document.getelementbyid mycanvas 2 執行上下文 繪製畫筆...
學習canvas畫布
我們可以用畫布 canvas 繪製各種圖形，下面 是繪製的乙個圓形 doctype html html head title canvas畫布 title meta charset utf 8 meta name viewport content width device width,initial...
canvas畫布實現手寫簽名效果
最近專案中涉及到移動端手寫簽名的功能需求，將實現 記錄於此，供小夥伴們參考指摘哦 html class msign signmark box class msign signmark write box id msign signmark signature pad class msign sign...