Canvas學習實踐 一款簡單的動畫遊戲

最近學習了下canvas繪圖。。。突發奇想就有了下面這款簡單的小遊戲，純屬娛樂~

廢話不多說，直接上**：

doctype html

>
<
html 
lang
="zh"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>小怪獸吃豆豆
title
>
<
style
>
#canvas 
#score 
#title 
style
>
head
>
<
body
>
<
div 
id="canvas-warp"
>
<
canvas 
id="title"
>
canvas
>
<
div 
id="score"
>得分: 0
div>
<
canvas 
id="canvas"
>
你的瀏覽器居然不支援canvas？！趕快換乙個吧！！
canvas
>
div>
<
script
>
settitle();
varwidth 
=1200
, height 
=600
, //
畫布大小x =
400, y 
=300
, //
小怪獸圓心座標r =
30, 
//小怪獸半徑
r1 =
10, 
//豆豆半徑
speed =5
, //
小怪獸移動速度(px)
direction ='
right', 
//小怪獸當前移動方向
ddlist =, 
//儲存畫布當前所有豆豆
score =0
; //
分數window.onload 
=function
() clearcanvas(context);
drawcanvas(context);
randomcircle();
drawcircle(context);
drawrole(context);
}, 10000
) 
//定義鍵盤方向鍵事件
document.onkeydown 
=function
(e) 
e =e 
||window.event;
e.preventdefault(); 
switch
(e.keycode) 
break
; 
case
38: //上
direction ='
up'; 
if(y 
>
r) 
break
; 
case
39: //右
direction ='
right';
if(x 
<
width 
-r) 
break
; 
case
40: //下
direction ='
down';
if(y 
<
height 
-r) 
break
; }
//吃掉豆豆簡單演算法
for(
vari =0
; i 
<
ddlist.length; i
++) 
}clearcanvas(context);
drawcanvas(context);
drawcircle(context);
drawrole(context);
//重新整理得分
document.getelementbyid(
'score
').innertext ='
得分: '+
score;}};
//繪製畫布
function
drawcanvas(context) 
//清除畫布
function
clearcanvas(context) 
//一次隨機生成5個豆豆
function
randomcircle() 
vary0 
=math.floor(math.random()
*(height 
-r1));
y0 =y0 -y0
%speed;
if(y0 
<
r1) 
ddlist.push();}}
//重新繪製豆豆
function
drawcircle(context) 
context.fill();
}//繪製小怪獸
function
drawrole(context) 
else
if(direction =='
left') 
else
if(direction =='
up') else
}//向右走小怪獸
function
drawrightrole(context) 
//向左走小怪獸
function
drawleftrole(context) 
//向上走小怪獸
function
drawuprole(context) 
//向下走小怪獸
function
drawdownrole(context) 
//設定標題
function
settitle() 
script
>
body
>
html
>

複製**到.html檔案，直接瀏覽器開啟，用鍵盤方向鍵控制移動，遊戲介面如下圖所示：

學習資料：

1、2、

jquery css寫的一款簡單的tabs滑動特效

最終實現的效果，都是採用css來實現美化介面的，現在想到的就是都是吧資料都展示出來，其他隱藏。滑動的時候到 就顯示對應欄目的內容，但是最近看到火狐的首頁，有很多選單項，不知道是不是也是全部顯示到頁面上了，然後其他內容隱藏，滑動時，在對應顯示內容，如下 如果有答案的希望分享下，是怎麼處理這種的。那接下...

Go C 一款簡單的貪吃蛇

前言 這是一款執行在window上簡單貪吃蛇，需要電腦上gcc編譯c語言 可以參考win10下安裝gcc g package main import fmt math rand os snake clib strconv time 全域性常量 const width 40 地圖寬度 height 2...

一款有趣的遊戲

今天分享一款有趣的遊戲 不思議迷宮。在這個遊戲裡，你將扮演乙隻可愛的岡布奧小怪物，擊敗各路大怪物，進行迷宮冒險。1.刺激的 這款遊戲最大的特色在於每關隨機生成的冒險地圖，作為第一人稱的你，需要利用道具 人物屬性來解決不同的怪物，十分考驗你的聰明才智。節奏快，不停過關，輕鬆玩 2.萌萌的 在這款遊戲裡...