本節教程通過一個簡單的游戲小例子，講解Canvas的基礎知識，
最終效果：
點擊移動的方塊，方塊上的分數會增加，方塊的行進方向會改變，并且方塊的速度會增加，
在線演示
原始碼
HTML5引入了canvas元素，canvas元素為我們提供了一塊空白畫布，我們可以使用此畫布來繪制和繪制我們想要的任何東西，JavaScript為我們提供了動態制作影片并繪制到畫布上所需的工具，它不僅提供繪圖和影片系統，還可以處理用戶互動，在本教程中，我們將使用純JavaScript制作基本的HTML5 Canvas框架，該框架可用于制作真實的游戲，在本教程的結尾創建了一個非常簡單的游戲，以演示HTML5 Canvas與JavaScript結合的優勢，
HTML5 Canvas基本游戲框架
讓我們圍繞canvas元素創建一個基本的游戲框架，我們需要一個HTML5檔案和一個JavaScript檔案，HTML5檔案應包含canvas元素和對JavaScript檔案的參考，JavaScript檔案包含將代碼繪制到canvas元素的代碼，
這是HTML5檔案index.html：
<head>
<meta charset="UTF-8">
<title>Canvas Example</title>
<script type="text/javascript" src="https://www.cnblogs.com/neuedu/p/framework.js"></script>
</head>
<body>
<canvas id="viewport" width="640" height="480"></canvas>
</body>
</html>
如您所見，JavaScript檔案game.js包含在html檔案的頭部，畫布元素以名稱“ viewport”定義，其寬度為640像素，高度為480像素，在我們的framework.js中，我們需要使用其名稱查找canvas元素，以便可以在其上進行繪制，我們正在創建的框架應支持渲染回圈以及玩家與滑鼠的互動，對于渲染回圈，我們將使用Window.requestAnimationFrame（），通過添加滑鼠事件偵聽器來啟用滑鼠互動，
這是JavaScript檔案framework.js：
// The function gets called when the window is fully loaded
window.onload = function() {
// Get the canvas and context
var canvas = document.getElementById("viewport");
var context = canvas.getContext("2d");
// Timing and frames per second
var lastframe = 0;
var fpstime = 0;
var framecount = 0;
var fps = 0;
// Initialize the game
function init() {
// Add mouse events
canvas.addEventListener("mousemove", onm ouseMove);
canvas.addEventListener("mousedown", onm ouseDown);
canvas.addEventListener("mouseup", onm ouseUp);
canvas.addEventListener("mouseout", onm ouseOut);
// Enter main loop
main(0);
}
// Main loop
function main(tframe) {
// Request animation frames
window.requestAnimationFrame(main);
// Update and render the game
update(tframe);
render();
}
// Update the game state
function update(tframe) {
var dt = (tframe - lastframe) / 1000;
lastframe = tframe;
// Update the fps counter
updateFps(dt);
}
function updateFps(dt) {
if (fpstime > 0.25) {
// Calculate fps
fps = Math.round(framecount / fpstime);
// Reset time and framecount
fpstime = 0;
framecount = 0;
}
// Increase time and framecount
fpstime += dt;
framecount++;
}
// Render the game
function render() {
// Draw the frame
drawFrame();
}
// Draw a frame with a border
function drawFrame() {
// Draw background and a border
context.fillStyle = "#d0d0d0";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#e8eaec";
context.fillRect(1, 1, canvas.width-2, canvas.height-2);
// Draw header
context.fillStyle = "#303030";
context.fillRect(0, 0, canvas.width, 65);
// Draw title
context.fillStyle = "#ffffff";
context.font = "24px Verdana";
context.fillText("HTML5 Canvas Basic Framework ", 10, 30);
// Display fps
context.fillStyle = "#ffffff";
context.font = "12px Verdana";
context.fillText("Fps: " + fps, 13, 50);
}
// Mouse event handlers
function onm ouseMove(e) {}
function onm ouseDown(e) {}
function onm ouseUp(e) {}
function onm ouseOut(e) {}
// Get the mouse position
function getMousePos(canvas, e) {
var rect = canvas.getBoundingClientRect();
return {
x: Math.round((e.clientX - rect.left)/(rect.right - rect.left)*canvas.width),
y: Math.round((e.clientY - rect.top)/(rect.bottom - rect.top)*canvas.height)
};
}
// Call init to start the game
init();
};
上面的代碼繪制了一個帶有邊框，標題和每秒幀數的簡單框架，這是代碼生成的內容
帶有彈跳方塊的游戲
現在我們有了一個框架，讓我們用它創建一個簡單的游戲，我們將創建一個在螢屏上具有反彈方塊的游戲，當玩家單擊它時，方塊上的分數會增加，方塊的行進方向會改變，并且方塊的速度會增加，
首先，我們定義一些物件和屬性，該級別定義了方塊可以反彈的區域，方塊本身具有位置，尺寸和運動屬性，最后，有一個分數，
// Level properties
var level = {
x: 1,
y: 65,
width: canvas.width - 2,
height: canvas.height - 66
};
// Square
var square = {
x: 0,
y: 0,
width: 0,
height: 0,
xdir: 0,
ydir: 0,
speed: 0
}
// Score
var score = 0;
我們需要在init（）函式中初始化物件和屬性，
// Initialize the game
function init() {
// Add mouse events
canvas.addEventListener("mousemove", onm ouseMove);
canvas.addEventListener("mousedown", onm ouseDown);
canvas.addEventListener("mouseup", onm ouseUp);
canvas.addEventListener("mouseout", onm ouseOut);
// Initialize the square
square.width = 100;
square.height = 100;
square.x = level.x + (level.width - square.width) / 2;
square.y = level.y + (level.height - square.height) / 2;
square.xdir = 1;
square.ydir = 1;
square.speed = 200;
// Initialize the score
score = 0;
// Enter main loop
main(0);
}
這些物件需要更新，因此讓我們修改update（）函式，方塊需要移動，并且應該檢測并解決與標高邊緣的碰撞，
// Update the game state
function update(tframe) {
var dt = (tframe - lastframe) / 1000;
lastframe = tframe;
// Update the fps counter
updateFps(dt);
// Move the square, time-based
square.x += dt * square.speed * square.xdir;
square.y += dt * square.speed * square.ydir;
// Handle left and right collisions with the level
if (square.x <= level.x) {
// Left edge
square.xdir = 1;
square.x = level.x;
} else if (square.x + square.width >= level.x + level.width) {
// Right edge
square.xdir = -1;
square.x = level.x + level.width - square.width;
}
// Handle top and bottom collisions with the level
if (square.y <= level.y) {
// Top edge
square.ydir = 1;
square.y = level.y;
} else if (square.y + square.height >= level.y + level.height) {
// Bottom edge
square.ydir = -1;
square.y = level.y + level.height - square.height;
}
}
我們需要繪制方塊和分數，這需要在render（）函式中完成，
// Render the game
function render() {
// Draw the frame
drawFrame();
// Draw the square
context.fillStyle = "#ff8080";
context.fillRect(square.x, square.y, square.width, square.height);
// Draw score inside the square
context.fillStyle = "#ffffff";
context.font = "38px Verdana";
var textdim = context.measureText(score);
context.fillText(score, square.x+(square.width-textdim.width)/2, square.y+65);
}
最后一步是添加滑鼠互動，讓我們將代碼添加到onMouseDown（）函式中，
function onm ouseDown(e) {
// Get the mouse position
var pos = getMousePos(canvas, e);
// Check if we clicked the square
if (pos.x >= square.x && pos.x < square.x + square.width &&
pos.y >= square.y && pos.y < square.y + square.height) {
// Increase the score
score += 1;
// Increase the speed of the square by 10 percent
square.speed *= 1.1;
// Give the square a random position
square.x = Math.floor(Math.random()*(level.x+level.width-square.width));
square.y = Math.floor(Math.random()*(level.y+level.height-square.height));
// Give the square a random direction
square.xdir = Math.floor(Math.random() * 2) * 2 - 1;
square.ydir = Math.floor(Math.random() * 2) * 2 - 1;
}
}
這是通過基本框架和一些修改而成的最終游戲，單擊方塊以增加您的分數并前進到下一個方塊，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/233445.html
標籤：其他
上一篇：TimSort原始碼詳解