拼图游戏网页版

关注

原创最新推荐文章于 2026-10-09 15:09:02 发布 2.1k 阅读 AI 写同款· GEO 优化 ›

HTML5拼图游戏（网页版） HTML5拼图游戏（网页版）这是我大四上学期学游戏编程期末的时候做的一个小游戏，主要用到的技术是HTML5、CSS、JavaScript、jQuery，还用到了一小部分的CSS3属性！下面我就简单地说一下主要程序。游戏主要程序，首先获取画布信息，以及初始化图片 var context = document.getElementById('puzzle').getContext('2d'... 阅读详情

实现winform上的拼图游戏后，我试着写一个基于ast.net的拼图游戏。但ASP.NET中的label控件没有背景图片，Image控件也没有单击事件，最后就选了ImageButton控件。ASP.NET中无法像在winform般固定控件的具体位置，只有用交换ImageButton控件的背景图片来产生类似交换位置的效果。

为了不让每次单击控件都刷新整个网页还要放用到AJAX。

我还加入了一个Timer控件，在其tick事件中加入一个判断拼图是否完成的方法。若拼图完成后，在一个label控件上可显示游戏完成。

演示地址：http://gyoung-001-site1.site4future.com/picturegame.aspx

前台代码：

后台代码：

public partial class picgame : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { ImgUrl[0] = "~/MyImage/p1_01.jpg"; ImgUrl[1] = "~/MyImage/p1_02.jpg"; ImgUrl[2] = "~/MyImage/p1_03.jpg"; ImgUrl[3] = "~/MyImage/p2_01.jpg"; ImgUrl[4] = "~/MyImage/p2_02.jpg"; ImgUrl[5] = "~/MyImage/p2_03.jpg"; ImgUrl[6] = "~/MyImage/p3_01.jpg"; ImgUrl[7] = "~/MyImage/p3_02.jpg"; ImgUrl[8] = "~/MyImage/white.jpg"; } //空白图片的URL string img = "~/MyImage/white.jpg"; //定义string数组，用于保存图片URL string[] ImgUrl = new string[9]; #region ImageButton单击事件 protected void Image4_Click(object sender, ImageClickEventArgs e) { if (Image5.ImageUrl == img) ChangeURl(Image5, Image4); else if (Image1.ImageUrl == img) ChangeURl(Image1, Image4); else if (Image7.ImageUrl == img) ChangeURl(Image7, Image4); } protected void Image1_Click(object sender, ImageClickEventArgs e) { if (Image2.ImageUrl == img) ChangeURl(Image2, Image1); else if (Image4.ImageUrl == img) ChangeURl(Image4, Image1); } protected void Image8_Click(object sender, ImageClickEventArgs e) { if (Image9.ImageUrl == img) ChangeURl(Image9, Image8); else if (Image7.ImageUrl == img) ChangeURl(Image7, Image8); else if (Image5.ImageUrl == img) ChangeURl(Image5, Image8); } protected void Image9_Click(object sender, ImageClickEventArgs e) { if (Image8.ImageUrl == img) ChangeURl(Image8, Image9); else if (Image6.ImageUrl == img) ChangeURl(Image9, Image6); } protected void Image7_Click(object sender, ImageClickEventArgs e) { if (Image4.ImageUrl == img) ChangeURl(Image7, Image4); else if (Image8.ImageUrl == img) ChangeURl(Image8, Image7); } protected void Image6_Click(object sender, ImageClickEventArgs e) { if (Image5.ImageUrl == img) ChangeURl(Image5, Image6); else if (Image3.ImageUrl == img) ChangeURl(Image3, Image6); else if (Image9.ImageUrl == img) ChangeURl(Image9, Image6); } protected void Image5_Click(object sender, ImageClickEventArgs e) { if (Image6.ImageUrl == img) ChangeURl(Image6, Image5); else if (Image4.ImageUrl == img) ChangeURl(Image4, Image5); else if (Image8.ImageUrl == img) ChangeURl(Image8, Image5); else if (Image2.ImageUrl == img) ChangeURl(Image2, Image5); } protected void Image3_Click(object sender, ImageClickEventArgs e) { if (Image2.ImageUrl == img) ChangeURl(Image2, Image3); else if (Image6.ImageUrl == img) ChangeURl(Image6, Image3); } protected void Image2_Click(object sender, ImageClickEventArgs e) { if (Image5.ImageUrl == img) ChangeURl(Image5, Image2); else if (Image1.ImageUrl == img) ChangeURl(Image1, Image2); else if (Image3.ImageUrl == img) ChangeURl(Image3, Image2); } #endregion //改变图片的URL，达到交换图片的上的 public void ChangeURl(ImageButton ib1, ImageButton ib2) { string Temp = ib1.ImageUrl; ib1.ImageUrl = ib2.ImageUrl; ib2.ImageUrl = Temp; } //开始游戏 protected void btnStart_Click(object sender, EventArgs e) { Random rand = new Random(Environment.TickCount); ImgUrl = ImgUrl.OrderBy(n => rand.Next()).ToArray(); Image1.ImageUrl = ImgUrl[0]; Image2.ImageUrl = ImgUrl[1]; Image3.ImageUrl = ImgUrl[2]; Image4.ImageUrl = ImgUrl[3]; Image5.ImageUrl = ImgUrl[4]; Image6.ImageUrl = ImgUrl[5]; Image7.ImageUrl = ImgUrl[6]; Image8.ImageUrl = ImgUrl[7]; Image9.ImageUrl = ImgUrl[8]; Timer1.Enabled = true; Label1.Text = ""; Timer1.Enabled = false; } //判断游戏是否完成 public void IsGameComplete() { ImgUrl[0] = "~/MyImage/p1_01.jpg"; ImgUrl[1] = "~/MyImage/p1_02.jpg"; ImgUrl[2] = "~/MyImage/p1_03.jpg"; ImgUrl[3] = "~/MyImage/p2_01.jpg"; ImgUrl[4] = "~/MyImage/p2_02.jpg"; ImgUrl[5] = "~/MyImage/p2_03.jpg"; ImgUrl[6] = "~/MyImage/p3_01.jpg"; ImgUrl[7] = "~/MyImage/p3_02.jpg"; ImgUrl[8] = "~/MyImage/white.jpg"; if ((Image1.ImageUrl == ImgUrl[0]) && (Image2.ImageUrl == ImgUrl[1]) && (Image3.ImageUrl == ImgUrl[2]) && (Image4.ImageUrl == ImgUrl[3]) && (Image5.ImageUrl == ImgUrl[4]) && (Image6.ImageUrl == ImgUrl[5]) && (Image7.ImageUrl == ImgUrl[6]) && (Image8.ImageUrl == ImgUrl[7]) && (Image9.ImageUrl == ImgUrl[8])) { Label1.Text = "恭喜，完成游戏"; } } //重置图片 protected void reset_Click(object sender, EventArgs e) { Image1.ImageUrl = ImgUrl[0]; Image2.ImageUrl = ImgUrl[1]; Image3.ImageUrl = ImgUrl[2]; Image4.ImageUrl = ImgUrl[3]; Image5.ImageUrl = ImgUrl[4]; Image6.ImageUrl = ImgUrl[5]; Image7.ImageUrl = ImgUrl[6]; Image8.ImageUrl = ImgUrl[7]; Image9.ImageUrl = ImgUrl[8]; Label1.Text = ""; } protected void Timer1_Tick(object sender, EventArgs e) { IsGameComplete(); } // public static void Show(System.Web.UI.Page page, string msg) { page.RegisterStartupScript("message", "<mce:script language='javascript' defer></mce:script>"); } }

收录于