- không vòng vo,tự code thêm nhân vật rồi tạo lệnh cho canvas tự động load lớn hơn khoảng 100px khi nhân vật load.
Nguồn: DucNghia - V4U
Mã:
<?php
<!DOCTYPE html> <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="ducnghia_trai()">Trái</button> <button onclick="ducnghia_phai()">Phải</button> <button onclick="ducnghia_len()">Lên</button> <button onclick="ducnghia_xuong()">Xuống</button> <br> data Game : X: <b id="xem_x"></b> Y: <b id="xem_y"></b> <b id="data_x" style="display: none;">10</b> <b id="data_y" style="display: none;">10</b> <img id="ducnghia_img_canvas" width="220" height="277" src="https://vcom.tk/bando/4.png" alt="The Scream" style="display: none;"> <p>Canvas:</p> <canvas id="ducnghia_map" width="240" height="297" style="border:1px solid #d3d3d3;"> trình duyệt của bạn không hỗ trợ canvas,vui lòng xem lại. </canvas> </body> </html>
?>
Mã:
<?php
////tài liệu hưỡng dẫn bởi DucNghia /// trái // phải // âm là phải,dương trái /// Giải thích về tính tòa độ : về trái phải thì : +là phải -là trái /// Về lên xuống thì lên là + , xuống là trừ. function ducnghia_trai(){ var data_x = $('#data_x').html(); //lấy data tạm var data_y = $('#data_y').html(); // lấy data tạm map_x = +data_x+ + 10; /// gửi dữ liệu cho canvas map_y = data_y; /// gửi dữ liệu Y canvas. canvas_ducnghia(map_x,map_y); // tiến hành gửi data "map_x,max_y"/// } function ducnghia_phai(){ var data_x = $('#data_x').html(); //lấy data tạm var data_y = $('#data_y').html(); // lấy data tạm map_x = +data_x+ - 10; /// gửi dữ liệu cho canvas map_y = data_y; /// gửi dữ liệu Y canvas. canvas_ducnghia(map_x,map_y); // tiến hành gửi data "map_x,max_y"/// } function ducnghia_len(){ var data_x = $('#data_x').html(); //lấy data tạm var data_y = $('#data_y').html(); // lấy data tạm map_x = data_x; /// gửi dữ liệu cho canvas map_y = +data_y+ + 10; /// gửi dữ liệu Y canvas. canvas_ducnghia(map_x,map_y); // tiến hành gửi data "map_x,max_y"/// } function ducnghia_xuong(){ var data_x = $('#data_x').html(); //lấy data tạm var data_y = $('#data_y').html(); // lấy data tạm map_x = data_x; /// gửi dữ liệu cho canvas map_y = +data_y+ - 10; /// gửi dữ liệu Y canvas. canvas_ducnghia(map_x,map_y); // tiến hành gửi data "map_x,max_y"/// } function canvas_ducnghia(x,y) { ///x = map_x , y = map_y var canvas = document.getElementById("ducnghia_map"); var ctx = canvas.getContext("2d"); var img = document.getElementById("ducnghia_img_canvas"); ctx.drawImage(img, x, y); // chỉnh sửa tòa độ. $('#data_x').html(x); /// lưu data tạm thời X $('#data_y').html; /// lưu data tạm thời Y $('#xem_x').html(x); /// xem thử X $('#xem_y').html; /// xem thử Y } window.onload = function() { canvas_ducnghia(10,10); };
?>Nguồn: DucNghia - V4U
