canvas遊戲小試畫乙個按方向鍵移動的圓點

自己對canvas，但又有一顆做遊戲的心tt。然後記錄一下對canvas的學習吧，用乙個按方向鍵控制的小圓點來做練習。（程式設計時用了一些es6的語法）

示例的html很簡單，只有乙個canvas元素:

<
html
>
<
head
>
<
link 
rel="stylesheet"
href
="css/base.css"
>
<
link 
rel="stylesheet"
href
="css/index.css"
>
<
script 
src="js/commons.js"
charset
="utf-8"
>
script
>
<
script 
src="js/main.js"
>
script
>
head
>
<
body
>
<
header
>
header
>
<
canvas 
id="canvas"
width
=1000 
height
=500
>
canvas
>
body
>
html
>

這裡可以看到我在canvas標籤裡直接定義了寬和高，這和在css裡面定義是不同的，canvas元素其實有兩套大小

1.元素本身大小

2.繪畫表面大小

預設情況下canvas的繪畫表面大小是300x150畫素，在css設定寬和高只能修改元素本身大小，但繪畫表面大小不變，這樣就會使瀏覽器對繪畫表面進行縮放來適應元素本身的大小。

所以要定義寬和高要定義在標籤或者在js裡面定義，如下。

var canvas=document.getelementbyid("canvas");
canvas.width=window.innerwidth;
canvas.height=window.innerheight;

然後我們來說邏輯的部分，其實比較簡單，但作為乙個可繼續發展的遊戲雛形，我們利用物件導向程式設計的思想

定義engine類，來表示遊戲的入口，sprite類表示遊戲中的物件，listener類來監聽遊戲的事件

依照順序邏輯，先看listener類：

class listener
run()
getkey()
}export

主要有兩個物件，乙個是它的key值，用來說明它是幹什麼的***，另外是乙個**函式，用來觸發事件

sprite類

import  from './listener'class sprite
drawimage()
update(x,y)
addlistener(keylistener)
findkeylistener(key)
}return
null
;  }
//default listener
initlistener());
this.listeners['down'] = new listener('down',()=>);
this.listeners['left'] = new listener('left',()=>);
this.listeners['right'] = new listener('right',()=>);
}}export

精靈類中引用了之前定義的監聽類，然後定義了「上下左右」這是個預設監聽物件來加入到這個精靈自身的監聽列表中，正常遊戲是用幀動畫的，我們這先用乙個圓來代替~。

drawimage是畫圓，在建構函式中呼叫，來展示形象。update函式來更新圓的位置，其實是把原先的圓清掉重畫一次，它被***觸發。

findkeylistener這個函式是用來遍歷自己的***列表的，裡面值得說一下的是迴圈我用的for in，這是因為我在下面定義預設***的時候鍵值用的stirng而不是數字。如果是正常的[0.....n]這樣以數字為索引的陣列的話，建議用es6的for of來遍歷

for (var
value of array)

engine類

import  from './player'import  from './barrier'class engine
start()
//sprite
addplayer(x,y,radius,imgurl,speed)
addbarrier(x,y,width,height)
//keylistener
keypressed(keycode,spritelist,barrierlist)
for(let sprite of spritelist)
}}  listenerstart()
clearinterval(preesedtimer) ;
keypressed(e.keycode,spritelist,barrierlist) ;
});$(document).keyup((e)=>,30);
}else}}
console.log("up"+keylist.length) ;
});}}
export

在engine類裡定義新增精靈的方法，並處理外界傳來的事件，裡面可能有一些定義了但沒用到的變數，以後會用到的，不過engine就是整個遊戲的入口，總而言之在mian.js中只要引入engine就能讓整個效果跑起來。

ps：一開始我是把鍵盤監聽放到main.js裡面的，後來發現邏輯不對，因為我們平時玩遊戲的話經常會很多個方向鍵一起按，比如說你在玩賽車類遊戲，你要拐彎的時候肯定不會鬆油門，所以你是在按了↑的基礎上又按了→。當你拐彎成功之後你會鬆開→鍵讓車繼續直行，這裡面其實有乙個棧的關係，先被按的鍵會被壓進去，當別的鍵鬆開的時候再從棧裡彈出來。關鍵在你按鍵的時候呼叫的是keydown函式，這個函式是預設在keyup之前都是以30ms迴圈呼叫，當乙個按鍵事件從棧裡彈出來的時候你不能讓它直接呼叫keydown函式（js的機制）。所以為了模擬這個keydown我又寫了乙個定時器。總的來說我按鍵監聽寫的有點複雜。。。

最後的main.js

import  from './gameengine'$(
function
());
function
init()
function
initgame()

最後還有乙個還有遺留問題就是，我拿圓點作為形象，刪除的時候用clearrect，其判斷的其實點與矩陣內切圓不一致。。導致擦除的時候會有黑線。。大家可以利用rect和arc畫乙個矩陣和內切圓試試

canvas遊戲小試畫乙個按方向鍵移動的圓點

用canvas畫乙個進度盤

利用canvas畫乙個鐘錶（時分秒聯動）

如何利用canvas畫乙個圓，並且填充顏色

canvas遊戲小試 畫乙個按方向鍵移動的圓點

用canvas畫乙個進度盤

利用canvas畫乙個鐘錶（時分秒聯動）

如何利用canvas畫乙個圓，並且填充顏色

相關推薦

canvas遊戲小試畫乙個按方向鍵移動的圓點