Tôi đã nghĩ đến việc tạo trò chơi bằng cách sử dụng javascript cho logic trò chơi và phần tử canvas HTML5 để tạo hoạt ảnh cho bản vẽ. Mục tiêu của tôi là viết một cái gì đó hoạt động trong các trình duyệt và trên các điện thoại thông minh mới hơn. Vì vậy, tôi đã viết một chương trình nhanh chóng di chuyển 100 vòng tròn xung quanh trên màn hình và cho tôi thấy tốc độ khung hình. Tôi đã khá thất vọng với kết quả: Chrome: ~ 90 FPS Firefox: ~ 25 FPS iPhone: ~ 11 FPShtml5 <canvas> framerate
Đây là một thử nghiệm khá đơn giản vì vậy tôi không muốn cơ hội của tôi khi nói đến thực sự làm một trò chơi hoàn chỉnh. Đây có phải là kết quả tiêu chuẩn từ phần tử canvas hay có một số thủ thuật để vẽ nhanh hơn, nếu bạn có bất kỳ liên kết tốt nào cho tôi biết? Là vải chỉ là một món đồ chơi tại thời điểm này hoặc nó có thể được sử dụng cho các ứng dụng thế giới thực.
Sửa Dưới đây là các mã:
var ctx;
var width;
var height;
var delta;
var lastTime;
var frames;
var totalTime;
var updateTime;
var updateFrames;
var creats = new Array();
function init() {
var canvas =document.getElementById('main');
width = canvas.width;
height = canvas.height;
ctx = canvas.getContext('2d');
for(var i=0; i < 100; ++i) {
addCreature();
}
lastTime = (new Date()).getTime();
frames = 0;
totalTime = 0;
updateTime = 0;
updateFrames =0;
setInterval(update, 10);
}
function addCreature() {
var c = new Creature(Math.random()*100,Math.random()*200);
creats.push(c);
}
function update() {
var now = (new Date()).getTime();
delta = now-lastTime;
lastTime = now;
totalTime+=delta;
frames++;
updateTime+=delta;
updateFrames++;
if(updateTime > 1000) {
document.getElementById('fps').innerHTML = "FPS AVG: " + (1000*frames/totalTime) + " CUR: " + (1000*updateFrames/updateTime);
updateTime = 0;
updateFrames =0;
}
for(var i=0; i < creats.length; ++i) {
creats[i].move();
}
draw();
}
function draw() {
ctx.clearRect(0,0,width,height);
creats.forEach(drawCreat);
}
function drawCreat(c,i,a) {
if (!onScreen(c)) {
return;
}
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(c.x, c.y, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
function onScreen(o) {
return o.x >= 0 && o.y >= 0 && o.x <= width && o.y <=height;
}
function Creature(x1,y) {
this.x = x1;
this.y = y;
this.dx = Math.random()*2;
this.dy = Math.random()*2;
this.move = function() {
this.x+=this.dx;
this.y+=this.dy;
if(this.x < 0 || this.x > width) {
this.dx*=-1;
}
if(this.y < 0 || this.y > height) {
this.dy*=-1;
}
}
}
init();
Bạn có thể đăng mã không? – Castrohenge
Tôi đọc rằng ngắt kết nối các hoạt động từ DOM sẽ làm mọi thứ ** Thực sự ** nhanh hơn nhiều, tôi nghĩ rằng chúng tạo thành một phần tử canvas mà không cần kết nối nó ở bất kỳ đâu trong cây DOM và ghi nó lên khi vẽ xong. Nhưng tôi không chắc chắn 100% - tôi chỉ lướt qua bài báo một cách nhanh chóng và quyết định rằng đó không phải là những gì tôi đang tìm kiếm vào lúc này. – Frank
Tôi có cùng một vấn đề chính xác như bạn (và cùng mục đích, xây dựng các trò chơi dựa trên HTML Canvas để triển khai chúng trên máy tính bảng và điện thoại iOS và Android) Kiểm tra bài kiểm tra của tôi (Bầu trời và đám mây, về cơ bản là một loạt các vòng tròn di chuyển) http://www.gubatron.com/html5/sky.html Tôi nhận được FPS tuyệt vời trên máy tính để bàn, nhưng tốt nhất tôi có thể nhận được trên Galaxy Tab là 10-12FPS. Đã thử nhiều thứ, điều duy nhất giúp giảm số vòng tròn được vẽ. Điều này khiến tôi nghĩ rằng có lẽ tôi nên làm việc trên một phần nhỏ của bức tranh với độ phân giải ít hơn nhiều, sau đó mở rộng nó ra, nó sẽ bay? – Gubatron