纯前端小游戏（html css javascript）-----侦察敌舰

最新推荐文章于 2023-06-01 23:53:57 发布

狸猫跑团屋

最新推荐文章于 2023-06-01 23:53:57 发布

阅读量419

点赞数

CC 4.0 BY-SA版权

分类专栏：计算机 PHP JAVASCRIPT 文章标签： js html javascript css 游戏

本文链接：https://blog.csdn.net/weixin_44813954/article/details/106369177

本文介绍了一款使用HTML、CSS和JavaScript实现的纯前端小游戏——侦察敌舰。通过JavaScript实现图片更换，创造出游戏交互体验。如果你对网站设计或小游戏开发感兴趣，可以参考此文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯前端小游戏

这个小游戏已经被我挂载到了我的网站 http://www.xiaoneko.site/shootboat.html 大家可以试玩，素材附在了代码后面具体的实现比较简单大家可以鉴赏一下纯属娱乐，有一种扫雷游戏的意思

通过js实现简单的图片更换，以达到游戏效果

大家如果有什么对于网站有想要借鉴的地方也都可以找我
我是用php写的

<!DOCTYPE  html>
<html lang='en'>
	<style>
		.normal{
   
   float:left;width:50px;height:50px;text-align: center;}
		.map{
   
   margin:0 auto;text-align:center;height:250px;width:200px;}
		.row{
   
   float:center;height:50px;width:200px;}
		.block{
   
   height:100px;}
	</style>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript">
			function $(id){
   
   return document.getElementById(id);}
			function randomit()
			{
   
   
				return Math.floor((Math.random()*19));
			}
			var point= new Array(20).fill(0);
			var click= new Array(20).fill(1);
			function makepoint()
			{
   
   
				var ship3=randomit();
				var ship4=randomit();
				if((ship3<ship4&&(ship4-ship3)>=3)||(ship3>ship4&&(ship3-ship4)>=4))
				{
   
   
					if((ship3<=17)&&(ship4<=16))
					{
   
   
					point[ship3]=1;point[ship3+1]=1;point[ship3+2]=1;
					point[ship4]=1;point[ship4+1]=1;point[ship4+2