先給大家看一個(gè)demo
http://www.koooi.com/html5/
代碼很簡(jiǎn)單
頁(yè)面上面加一個(gè)<canvas style="border:1px solid" id="canvas" width="1000" height="800">
<p>
Your browser does not support the canvas element.
</p>
</canvas>
然后javascript中寫上
var canvas = null;
var ctx = null;
var score = 0;
var num = 51;
function getRandomInt(a, b){
return Math.floor(Math.random() * (b - a + 1)) + a;
}
window.onload = init;
function init(){
canvas = document.getElementById('canvas');
scoreID = document.getElementById('score');
ctx = canvas.getContext('2d');
// setInterval(draw, 1000 / FPS);
controller = new ERIC.CanvasController(ctx, canvas.width, canvas.height);
controller.animateStopBySignal();
canvas.onclick = function(e){
var mousex = e.clientX;
var mousey = e.clientY;
var relativex = mousex - canvas.offsetLeft;
var relativey = mousey - canvas.offsetTop;
var len = controller.canvasObjectList.length;
var infig = false;
for (i = len - 1; i >= 0; i--) {
if (controller.canvasObjectList[i].isInFigure(relativex, relativey)) {
score = score + 10;
infig = true;
controller.canvasObjectList[i].removeFromControl();
}
}
if (!infig) {
score = score - 10;
}
scoreID.innerHTML = score;
}
ERIC.run(function test(){
var t = getRandomInt(0, 0);
if (t == 0) {
num--;
if(num==0){
ERIC.stop();
return;
}
var cir1 = new ERIC.Circle(getRandomInt(70, 930), getRandomInt(70, 730), 5);
cir1.setTriggerDelete(function(){
return this.radius >= 40;
});
cir1.setAction(function(){
this.radius = this.radius + 1;
});
controller.add(cir1);
}
}, 400);
}
很簡(jiǎn)單的代碼，利用了我寫的基礎(chǔ)類ERIC.Circle Eric.
CanvasController 以及ERIC.Run
使用簡(jiǎn)介：
1.先實(shí)例化ERIC.CanvasController,假設(shè)實(shí)例名字controller
2.實(shí)例化一個(gè)ERIC.BasicFigure類的子類的對(duì)象，現(xiàn)在EricUtils.js只提供了一個(gè)擴(kuò)展類Circle，假設(shè)實(shí)例名字為cir
3.設(shè)置cir實(shí)例的動(dòng)作和刪除的條件。動(dòng)作意思是每一個(gè)動(dòng)畫要執(zhí)行什么操作，比如圓的半徑加1， 或者圓心移動(dòng)。刪除的條件比如半徑大于50就從畫布當(dāng)中刪除掉，不再顯示這個(gè)圓。
cir1.setTriggerDelete(function(){
return this.radius >= 40;
});
cir1.setAction(function(){
this.radius = this.radius + 1;
});
4.把cir添加到controller中。controller.add(cir)
5.調(diào)用controller.animate(); 此方法會(huì)以每秒30幀來(lái)畫出cir對(duì)象，每幀結(jié)束執(zhí)行cir在第三步設(shè)置的動(dòng)作。到達(dá)刪除條件會(huì)刪除掉該object,直到?jīng)]有object在controller當(dāng)中。
6.也可以調(diào)用controller.animateStopBySignal()方法，動(dòng)作和5相同，但是會(huì)一直進(jìn)行渲染，這樣適合于臨時(shí)添加object到controller當(dāng)中，添加進(jìn)去以后馬上就可以被渲染，直到滿足被刪除的條件。渲染結(jié)束需要調(diào)用controller.signalStop()
基礎(chǔ)類下載地址http://www.koooi.com/html5/js/EricUtils.js
當(dāng)然，這只是一個(gè)框架，以后要添加更多的功能，如果您對(duì)于html5有興趣，打算和我一起來(lái)開發(fā)，歡迎聯(lián)系我
希望可以起到拋磚引玉的作用。
QQ627四23四四三
摘要: 從小就有一個(gè)夢(mèng)想，將來(lái)開發(fā)機(jī)器人，說(shuō)白了，就是人工智能?，F(xiàn)在看來(lái)，可喜的是，做的是軟件這行，還有點(diǎn)可行性，可惜的是，做的工作與人工智能不搭嘎，工作又太累，天天加班不說(shuō)，大老遠(yuǎn)跑回家，就沒(méi)那么多時(shí)間去思考，學(xué)習(xí)人工智能了。徘徊猶豫了幾個(gè)月，一直沒(méi)有決心去寫代碼，這不，終于決定繼續(xù)小時(shí)候的夢(mèng)想，開始了用java實(shí)現(xiàn)人工智能的第一步了，那就是用java來(lái)分析語(yǔ)義，讓我們從頭開始。
我的第一個(gè)Miles... 閱讀全文