? ???? 由于特別喜歡owl city的 the? Saltwater? Room，順應(yīng)小清新的風(fēng)格寫了一個(gè)小游戲，從ps繪圖到寫 js代碼完成了一個(gè)小游戲。渣渣游戲，純屬練手，不喜勿噴，哈哈。
亞當(dāng)揚(yáng)
首先先準(zhǔn)備資源，用ps繪出深海空間的場景。
第一，畫出背景圖層，用油漆桶工具鋪上一層深藍(lán)色RGB(1,17,35)的底色，仿佛深海一般。
背景圖層
第二，新建一層圖層，在上面鋪上一層淡藍(lán)色RGB( 23,143,229)模糊圖層，筆刷用模糊的，透明度44%。
模糊圖層
第三，再新建一層圖層，在上面用稍微深一點(diǎn)的藍(lán)色RGB（41,113,194）作為深海泡泡。用魚筆刷RGB（11,226,247）畫出深海的魚，然后用模糊畫筆在魚點(diǎn)綴出許許藍(lán)光，就像深海里發(fā)光的魚一般。
深海魚圖層
第四，再建一層圖層，用淺藍(lán)色，我這里用的RGB值是（111,157,226）。用波紋畫筆畫出波紋。這樣一幅深?？臻g的畫就完成了。
接下來準(zhǔn)備程序：
首先js文件，game.js，如下所示：
```
//創(chuàng)建畫布
var canvas = document.createElement("canvas");//新建畫布
var ctx = canvas.getContext("2d");//新建2d環(huán)境
canvas.width = 1024;//畫布寬
canvas.height = 600;//畫布高
document.body.appendChild(canvas);//在body中添加cavans
//背景圖片
var bgReady = false;
var bgImage = new Image();//新建背景圖片
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";//添加背景圖片
//redfish圖片
var redfishReady = false;
var redfishImage = new Image();
redfishImage.onload = function () {
redfishReady = true;
};
redfishImage.src = "images/redfish.png";
//goldfish圖片
var goldfishReady = false;
var goldfishImage = new Image();
goldfishImage.onload = function () {
goldfishReady = true;
};
goldfishImage.src = "images/goldfish.png";
// 創(chuàng)建游戲?qū)ο?/b>
var redfish = {//創(chuàng)建紅色的魚
speed: 256 // 每秒256像素的移速
};
var goldfish = {};//創(chuàng)建金色的魚
var goldfishsCaught = 0;//金魚被抓住的次數(shù)
// 鍵盤控制
var keysDown = {};
//添加鍵盤按下時(shí)的監(jiān)聽事件
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
//添加鍵盤放開時(shí)的監(jiān)聽事件
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
//重置游戲?qū)ο蟮奈恢?/b>
var reset = function () {
//紅魚位于圖片中央
redfish.x = canvas.width / 2;
redfish.y = canvas.height / 2;
// 金魚位于cavans隨機(jī)位置
goldfish.x = 32 + (Math.random() * (canvas.width - 64));
goldfish.y = 32 + (Math.random() * (canvas.height - 64));
};
// 更新游戲
var update = function (modifier) {
if (38 in keysDown) { // 按下↑
redfish.y -= redfish.speed * modifier;
}
if (40 in keysDown) { // 按下↓
redfish.y += redfish.speed * modifier;
}
if (37 in keysDown) { // 按下←
redfish.x -= redfish.speed * modifier;
}
if (39 in keysDown) { // 按下→
redfish.x += redfish.speed * modifier;
}
// 當(dāng)兩條魚接觸的時(shí)候
if (
redfish.x <= (goldfish.x + 32)
&& goldfish.x <= (redfish.x + 32)
&& redfish.y <= (goldfish.y + 32)
&& goldfish.y <= (redfish.y + 32)
) {
++goldfishsCaught;//接觸到時(shí)，分?jǐn)?shù)++
reset();//重置游戲?qū)ο笪恢?/b>
}
};
// 畫出對(duì)應(yīng)的圖片
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (redfishReady) {
ctx.drawImage(redfishImage, redfish.x, redfish.y);
}
if (goldfishReady) {
ctx.drawImage(goldfishImage, goldfish.x, goldfish.y);
}
// 計(jì)分
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("計(jì)分: " + goldfishsCaught, 32, 32);
};
// 游戲主函數(shù)
var main = function () {
var now = Date.now();
var delta = now - then;
//更新游戲
update(delta / 1000);
//渲染圖片
render();
then = now;
//執(zhí)行動(dòng)畫，并請(qǐng)求瀏覽器調(diào)用指定的函數(shù)在下一次重繪之前更新動(dòng)畫
requestAnimationFrame(main);
};
//使重繪動(dòng)畫支持各種各樣的瀏覽器
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
// 開始游戲
var then = Date.now();
//重置游戲?qū)ο蟮奈恢?/b>
reset();
//執(zhí)行游戲主函數(shù)
main();
再看一下html：
<!DOCTYPE html>
<html lang="en">
?? <head>
??????? <meta charset="utf-8">
??????? <title>The SaltyWaterRoom</title>
</head>
<body style="text-align:center">
<div>
????? <div style="margin-top:0px">
????????????? <script src="js/game.js"></script>
????? </div>
?????? <div style="margin-bottom">
???????????? <audio width="320"?? height="240"?? autoplay="autoplay" loop="loop">
? ? ? ? ? ? ? ? ? ? ? ? <source src="music/Owl City-The Saltwater Room.mp3 " type="audio/mp3">
???????????? </audio>
????? </div>
</div>
</html>
```
附上github鏈接：深海空間游戲源碼地址?
