Trò chơi xếp hình là một dự án đơn giản được phát triển bằng JavaScript, CSS và Canvas. Trò chơi này là một trò chơi thú vị. Người chơi phải giải câu đố hình ảnh và tạo thành hình ảnh gốc. Người dùng có thể chơi trò chơi cho đến khi hoàn thành câu đố.
Tạo trò chơi
Dự án Trò chơi giải đố chỉ đơn giản bằng HTML, CSS và JavaScript. Về các tính năng của trò chơi này, người dùng phải giải câu đố hình ảnh và tạo thành hình ảnh gốc. Điều khiển máy tính của trò chơi rất đơn giản. Bạn chỉ cần sử dụng con trỏ để nhấp vào các mảnh hình ảnh và giải nó bằng cách đặt nó vào đúng vị trí
Trò chơi này bao gồm rất nhiều javascript để thực hiện chức năng của trò chơi
Làm thế nào để chạy dự án?Để chạy trò chơi này, bạn không cần phải có bất kỳ loại máy chủ cục bộ nào ngoài trình duyệt. Chúng tôi khuyên bạn nên sử dụng các trình duyệt hiện đại như Google Chrome và Mozilla Firefox. Để chơi trò chơi, trước tiên, hãy mở trò chơi trong trình duyệt của bạn bằng cách nhấp vào chỉ mục. tệp html
Trò chơi xếp hình trong JavaScript có mã nguồn được tải xuống miễn phí, chỉ sử dụng cho mục đích giáo dục
TẢI TRÒ CHƠI CÂU ĐỐ TRONG JAVASCRIPT VỚI MÃ NGUỒN MIỄN PHÍ. BẤM VÀO NÚT BÊN DƯỚI
Tải xuống dự án
Gặp khó khăn hoặc cần trợ giúp để tùy chỉnh trò chơi Xếp hình theo nhu cầu của bạn, hãy xem phần hướng dẫn JavaScript của chúng tôi hoặc chỉ cần nhận xét bên dưới và chúng tôi sẽ cố gắng hết sức để trả lời câu hỏi của bạn càng sớm càng tốt
Thêm Dưới. css, HTML, javascript
bài chuyển hướng
Bài tiếp theo
Hệ thống đặt hàng thực phẩm bằng PHP với mã nguồn
Bài báo trước
Speed Typer Trong Javascript Với Mã Nguồn
Bạn cũng có thể thích
Dự án JavaScript
Danh sách tác vụ trong JavaScript với mã nguồn
- Ngày 11 tháng 12 năm 2022
- 0 Bình luận
Dự án. Danh sách tác vụ trong JavaScript với mã nguồn Vui lòng cuộn xuống và nhấp vào nút tải xuống để…
Dự án PHP
Hẹn Bác Sĩ Bằng PHP Với Mã Nguồn
- Ngày 10 tháng 12 năm 2022
- 15 bình luận
Dự án. Cuộc hẹn bác sĩ bằng PHP với mã nguồn Vui lòng cuộn xuống và nhấp vào nút tải xuống để…
Dự án JavaScript
Máy tính JavaScript với mã nguồn
- Ngày 9 tháng 12 năm 2022
- 3 bình luận
Dự án. Máy tính JavaScript có mã nguồn Vui lòng cuộn xuống và nhấp vào nút tải xuống để tải xuống dự án Máy tính JavaScript miễn phí máy tính javascript này…
Dự án JavaScript
Đồng hồ bấm giờ trong JavaScript với mã nguồn
- Ngày 8 tháng 12 năm 2022
- 2 Bình luận
Dự án. Đồng hồ bấm giờ trong JavaScript có mã nguồn Vui lòng cuộn xuống và nhấp vào nút tải xuống để tải xuống Đồng hồ bấm giờ…
Dự án JavaScript
Trình theo dõi lượng calo trong JavaScript với mã nguồn
- Ngày 7 tháng 12 năm 2022
- 1 bình luận
Dự án. Trình theo dõi lượng calo trong JavaScript với mã nguồn Vui lòng cuộn xuống và nhấp vào nút tải xuống để…
Trò chơi ghép hình dựa trên html5/javascript tương tác. Nó tự động cắt bất kỳ hình ảnh nào được cung cấp và cho phép bạn ghép chúng lại với nhau như một trò chơi ghép hình
Nhập url hình ảnh và cài đặt bên dưới để biến bất kỳ hình ảnh nào thành trò chơi ghép hình tương tác
Hoặc để trống để sử dụng hình ảnh mặc định
URL hình ảnh. Kích thước mảnh [pixel]. [e. g. 50] Tỷ lệ hình ảnh. [0. 5 = 50%, 1 = 100%, 1. 5 = 150%, v.v. ]
Sẽ bổ sung sau.
Jigsaw Puzzle - ZIM Frame
var zon = true; // set to false to turn off console messages from zim
var zns = false; // set to true to require zim namespace - eg. new zim.Frame[]
// SCALING OPTIONS
// scaling can have values as follows with full being the default
// "fit" sets canvas and stage to dimensions and scales to fit inside window size
// "outside" sets canvas and stage to dimensions and scales to fit outside window size
// "full" sets stage to window size with no scaling
// "tagID" add canvas to HTML tag of ID - set to dimensions if provided - no scaling
var scaling = "fit"; // this will resize to fit inside the screen dimensions
var width = 1024;
var height = 768;
var countPieces = 0;
var totalPieces = 0;
// as of ZIM 5.5.0 you do not need to put zim before ZIM functions and classes
var frame = new Frame[scaling, width, height];
frame.on["ready", function[]
{
zog["ready from ZIM Frame"]; // logs in console [F12 - choose console]
var stage = frame.stage;
var stageW = frame.width;
var stageH = frame.height;
var puzzleX;
var puzzleY;
frame.outerColor = "#444";
frame.color = "#ddd";
var con = new Container
// with chaining - can also assign to a variable for later access
var imageObj = [];
var piecesArrayObj = [];
frame.loadAssets[["brave.jpg"], "assets/"];
var label = new Label[{
text:"CLICK",
size:60,
font:"courier",
color:"orange",
rollColor:"red",
fontOptions:"italic bold"
}];
stage.addChild[label];
label.x = label.y = 20;
label.on["click", function[]{zog["clicking"];}];
frame.on["complete", function[] {
imageObj = frame.asset["brave.jpg"].clone[];
imageObj.addTo[con];
imageObj.alpha = 0.2;
var piecesArray = new Array[];
var horizontalPieces = 5;
var verticalPieces = 4;
var obj = getQueryString[];
zog[obj]
if[obj]
{
horizontalPieces = obj.row;
verticalPieces = obj.column;
}
var imageWidth = imageObj.width;
var imageHeight = imageObj.height;
var pieceWidth = Math.round[imageWidth / horizontalPieces];
var pieceHeight = Math.round[imageHeight / verticalPieces];
var gap = 40;
totalPieces = horizontalPieces*verticalPieces;
puzzleX = frame.width/2-imageWidth/2;
puzzleY = frame.height/2-imageHeight/2;
imageObj.pos[puzzleX,puzzleY];
zog[puzzleX,puzzleY];
label.text = "Jigsaw Puzzle "+countPieces+"/"+totalPieces;
for [j = 0; j < verticalPieces; j++] {
piecesArrayObj[j] = [];
for [i = 0; i < horizontalPieces; i++] {
var n = j + i * verticalPieces;
var offsetX = pieceWidth * i;
var offsetY = pieceHeight * j;
var x8 = Math.round[pieceWidth / 8];
var y8 = Math.round[pieceHeight / 8];
piecesArrayObj[j][i] = new Object[];
piecesArrayObj[j][i].right = Math.floor[Math.random[] * 2];
piecesArrayObj[j][i].down = Math.floor[Math.random[] * 2];
if [j > 0] {
piecesArrayObj[j][i].up = 1 - piecesArrayObj[j - 1][i].down;
}
if [i > 0] {
piecesArrayObj[j][i].left = 1 - piecesArrayObj[j][i - 1].right;
}
piecesArray[n] = new Rectangle[{
width: pieceWidth,
height: pieceHeight,
}];
var tileObj = piecesArrayObj[j][i];
var s = new Shape
var context = s.graphics;
s.drag[];
s.mouseChildren = false;
s.addEventListener["pressup", function[e] {
var mc = e.currentTarget;
var xx = Math.round[mc.x];
var yy = Math.round[mc.y];
if [xx < puzzleX+gap / 2 && xx > puzzleX-gap / 2 && yy < puzzleX+gap / 2 && yy > puzzleY-gap / 2] {
mc.x = puzzleX;
mc.y = puzzleY;
mc.noDrag[];
mc.addTo[mc.parent,0];
mc.mouseChildren = false;
mc.mouseEnabled = false;
mc.hint.visible = false;
countPieces++;
label.text = "Jigsaw Puzzle "+countPieces+"/"+totalPieces;
zog["countPieces",countPieces];
if[countPieces == totalPieces]
{
var pane = new Pane[{width:600,label:"VERY NICE!", height:250, modal:false, displayClose:false}];
var confirm = new Button[120, 50, "ON", "green"].center[pane].mov[0,70];
confirm.on["click", function[] {
pane.hide[];
window.location.replace[window.location.pathname + window.location.search + window.location.hash];
}];
pane.show[];
}
stage.update[];
}
}];
context.setStrokeStyle[3,"round"];
var commandi1 = context.beginStroke[createjs.Graphics.getRGB[0, 0, 0]].command;
//
var commandi = context.beginBitmapFill[imageObj.image].command;
context.moveTo[offsetX, offsetY];
if [j != 0] {
context.lineTo[offsetX + 3 * x8, offsetY];
if [tileObj.up == 1] {
context.curveTo[offsetX + 2 * x8, offsetY - 2 * y8, offsetX + 4 * x8, offsetY - 2 * y8];
context.curveTo[offsetX + 6 * x8, offsetY - 2 * y8, offsetX + 5 * x8, offsetY];
} else {
context.curveTo[offsetX + 2 * x8, offsetY + 2 * y8, offsetX + 4 * x8, offsetY + 2 * y8];
context.curveTo[offsetX + 6 * x8, offsetY + 2 * y8, offsetX + 5 * x8, offsetY];
}
}
context.lineTo[offsetX + 8 * x8, offsetY];
if [i != horizontalPieces - 1] {
context.lineTo[offsetX + 8 * x8, offsetY + 3 * y8];
if [tileObj.right == 1] {
context.curveTo[offsetX + 10 * x8, offsetY + 2 * y8, offsetX + 10 * x8, offsetY + 4 * y8];
context.curveTo[offsetX + 10 * x8, offsetY + 6 * y8, offsetX + 8 * x8, offsetY + 5 * y8];
} else {
context.curveTo[offsetX + 6 * x8, offsetY + 2 * y8, offsetX + 6 * x8, offsetY + 4 * y8];
context.curveTo[offsetX + 6 * x8, offsetY + 6 * y8, offsetX + 8 * x8, offsetY + 5 * y8];
}
}
context.lineTo[offsetX + 8 * x8, offsetY + 8 * y8];
if [j != verticalPieces - 1] {
context.lineTo[offsetX + 5 * x8, offsetY + 8 * y8];
if [tileObj.down == 1] {
context.curveTo[offsetX + 6 * x8, offsetY + 10 * y8, offsetX + 4 * x8, offsetY + 10 * y8];
context.curveTo[offsetX + 2 * x8, offsetY + 10 * y8, offsetX + 3 * x8, offsetY + 8 * y8];
} else {
context.curveTo[offsetX + 6 * x8, offsetY + 6 * y8, offsetX + 4 * x8, offsetY + 6 * y8];
context.curveTo[offsetX + 2 * x8, offsetY + 6 * y8, offsetX + 3 * x8, offsetY + 8 * y8];
}
}
context.lineTo[offsetX, offsetY + 8 * y8];
if [i != 0] {
context.lineTo[offsetX, offsetY + 5 * y8];
if [tileObj.left == 1] {
context.curveTo[offsetX - 2 * x8, offsetY + 6 * y8, offsetX - 2 * x8, offsetY + 4 * y8];
context.curveTo[offsetX - 2 * x8, offsetY + 2 * y8, offsetX, offsetY + 3 * y8];
} else {
context.curveTo[offsetX + 2 * x8, offsetY + 6 * y8, offsetX + 2 * x8, offsetY + 4 * y8];
context.curveTo[offsetX + 2 * x8, offsetY + 2 * y8, offsetX, offsetY + 3 * y8];
}
}
context.lineTo[offsetX, offsetY];
s.addTo[con];
var fill = new createjs.Graphics.Fill["red"];
//var newGra = context.append[fill];
var hint = new Shape[];//s.clone[true];
hint.mouseChildren = false;
hint.mouseEnabled = false;
s.hint = hint;
hint.graphics = context.clone[true];
hint.pos[puzzleX,puzzleY];
// newGra.graphics = newGra;
hint.graphics._fill = fill;
hint.graphics._fill.style = null;
hint.addTo[con,0];
//s.animate[{obj:{x:frame.width-offsetX-pieceWidth,y:frame.height-offsetY-pieceHeight}, time:700}];
//s.animate[{obj:{x:-offsetX,y:-offsetY}, time:700}];
s.animate[{obj:{x:rand[-offsetX,frame.width-offsetX-pieceWidth],y:rand[-offsetY,frame.height-offsetY-pieceHeight]}, time:700}];
}
}
con.addTo[stage];
/*con.x -= imageWidth/2;
con.y -= imageHeight/2;*/
stage.update[];
}]; // end asset complete
stage.update[]; // this is needed to show any changes
}]; // end of ready
Bạn đã biết ZIM chưa?