这是非常简单的一个小游戏，js脚本甚至就只用200多行。

首先，确定下游戏规则。

1、我方战舰通过按空格丢出一枚鱼雷，鱼雷会以一定速度移动。
2、我方战舰可以通过左右按键来移动，但是不能上下移动。
3、敌方战舰不定时刷新，并按照一定速度向左移动。
4、一艘敌方战舰移出了画面外，判断为敌舰逃脱，HP-1 。
5、当HP归零游戏结束。
6、打中一艘敌方战舰获得1分。
7、每打中一艘敌方战舰就立刻刷新出新的战舰并且战舰刷新速度加快。
8、每逃脱一艘则刷新速度减慢。

大致先制定这么一套游戏规则。

先把html部分写出来。 

  1. <canvas id="myCanvas" class="canvas" onClick="init()"></canvas>
  2. <div>分数：<span id="score"></span></div>
  3. <div>HP：<span id="HP"></span></div>

为了方便识别canvas 可以描个边。 

  1. .canvas{
  2. 	border:1px solid #333;
  3. 	cursor:pointer;
  4. }

好了，接下来开始构思游戏。
因为是个简单的小游戏，可以用一些上个世纪的游戏布局。就是先将游戏画面拆分成一个一个小格子，这次制作的小游戏是12*6格子， 每格20*20像素。
图示：
sample.png

这样子只要通过比对鱼雷和敌方战舰的坐标就可以得出是否被炸到。

接下来脚本部分： 

  1. var canvas=document.getElementById('myCanvas');//获取画布
  2. var scoreSpan = document.getElementById('score');//获取得分span
  3. var HPSpan = document.getElementById('HP');//获取HP的span
  4. var ctx=canvas.getContext('2d');//用于在画布上绘图的环境
  5. var blockSize = 20;//每格像素
  6. var ctxW = 12;//宽多少格
  7. var ctxH = 6;//高多少格
  8. canvas.width=ctxW*blockSize;//设定画布宽度，就是格子*每格像素
  9. canvas.height=ctxH*blockSize;//设定画布高度，就是格子*每格像素
  10. var emt = null;//用于存放定时器，用于更新敌舰坐标
  11. var boomT =null;//用于存放定时器，用于更新鱼雷坐标和状态
  12. var creatEm = null;//用于存放定时器，用于增加敌舰
  13. var flush = null;//用于存放定时器，用于刷新画布
  14.  
  15. var myShipX=0;//我方初始位置
  16. var emShip = [];//存放敌方数据
  17. var boom = [];//存放鱼雷数据
  18. var hard = 0;//难度（刷新速度，越小刷新越快单位毫秒）
  19. var score = 0;//得分
  20. var HP = 0;//HP
  21. var boomReload = true;//装弹是否完毕
  22.  
  23. function init(){//初始化
  24.  
  25. 	myShipX=3;//设定我方的初始位置
  26. 	emShip = [];//清空敌舰数据
  27. 	boom = [];//清空鱼雷数据
  28. 	hard = 3000;//初始化难度
  29. 	score = 0;//初始化分数
  30. 	HP = 50;//初始化HP
  31. 	boomReload = true;//装载鱼雷初始化
  32. 	
  33. 	ctx.clearRect(0,0,canvas.width,canvas.height);//清空画布
  34. 	
  35. 	creatEmShip();//创建敌舰
  36. 	paintMyShip();//绘制我方
  37. 	paintEmship();//绘制敌舰
  38. 	scoreSpan.innerHTML = String(score);//初始化计分板
  39. 	HPSpan.innerHTML = String(HP);//初始化HP剩余量
  40. 	
  41. 	clearInterval(emt);//清除更新敌舰坐标定时器
  42. 	clearInterval(boomT);//清除更新鱼雷坐标定时器
  43. 	clearInterval(creatEm);//清除创建敌舰定时器
  44. 	clearInterval(flush);//清除刷新画布定时器
  45. 	
  46. 	emt = setInterval(function(){//每400毫秒敌舰向左移动一次
  47. 		emShipMove();
  48. 	},400);
  49. 	
  50. 	boomT = setInterval(function(){//每200毫秒鱼雷向下移动一次
  51. 		boomMove();
  52. 	},200);
  53. 	
  54. 	creatEm = setInterval(function(){//根据难度创建敌舰
  55. 		creatEmShip();
  56. 	},hard);
  57. 	
  58. 	flush = setInterval(function(){//100毫秒刷新画布
  59. 		ctx.clearRect(0,0,canvas.width,canvas.height);//清空画布
  60. 		paintBoom();//绘制鱼雷
  61. 		paintEmship();//绘制敌舰
  62. 		paintMyShip();//绘制我方
  63. 		boomEmship();//判断是否炸中敌舰
  64. 	},100);
  65. 	
  66. }
  67. function paintMyShip(){//绘制我方
  68. 	var shipX = (myShipX-1)*blockSize;//设定我方船只的X坐标，因为左边是从（0，0）开始，格子定为1开始所以-1
  69. 	ctx.fillStyle="#0075a9";//设定我方颜色
  70. 	ctx.fillRect(shipX+2,blockSize-10,blockSize-4,blockSize-10);//填充方块，因为不想团一起并没有画正方形。
  71. }
  72. function creatEmShip(){//随机出现敌舰
  73. 	var Y = Math.floor(Math.random()*(ctxH-2) + 1);//高度一共有6个格子，出去丢雷的格子和我方的格子就是6-2，然后就随机从1-4中生成随机数
  74. 	emShip.push([blockSize*ctxW,Y]);//给敌舰数据添加敌舰坐标
  75. }
  76. function paintEmship(){//绘制敌舰
  77. 	for(var i=0;i<emShip.length;i++){//循环敌舰数据
  78. 		var emShipX = emShip[i][0];//保存敌舰X坐标
  79. 		var emShipY = (emShip[i][1]+1)*blockSize;//保存敌舰Y坐标，因为Y是1-4的所在格子，所以要*每格像素来计算出像素坐标
  80. 		ctx.fillStyle="#e60012";//设定敌舰颜色
  81. 		ctx.fillRect(emShipX+2,emShipY,blockSize-4,blockSize-10);//填充敌舰方块
  82. 	}
  83. }
  84. function emShipMove(){//移动敌舰
  85. 	for(let i=0;i<emShip.length;i++){//循环敌舰数据
  86. 		var X = emShip[i][0]-blockSize;//敌舰X坐标向左移动一个格子
  87. 		emShip[i][0] = X;//重新写入X坐标
  88. 		
  89. 	}
  90. 	removeEmShip();//清除多余的敌舰（画布外）
  91. }
  92. function addBoom(){//增加鱼雷
  93. 	if(boomReload){//判断是否还在装弹
  94. 		var boomX = (myShipX-1)*blockSize;//计算出鱼雷的初始位置，根据我方所在的X坐标
  95. 		boom.push([boomX,blockSize,true]);//设定鱼雷的X坐标，Y坐标因为是第二格直接就是格子的高度，true为正在投雷
  96. 		boomReload = false;//开始装弹
  97. 		var boomT = setTimeout(function(){
  98. 			boomReload = true;//800毫秒后装弹完毕
  99. 		},800);
  100. 	}
  101. }
  102. function paintBoom(){//绘制鱼雷
  103. 	for(let i=0;i<boom.length;i++){//循环鱼雷数据
  104. 		var boomX = boom[i][0];//保存鱼雷X坐标
  105. 		var boomY = boom[i][1];//保存鱼雷Y坐标
  106. 		ctx.fillStyle="#6b6b6b";//设定鱼雷颜色
  107. 		ctx.fillRect(boomX+7,boomY,blockSize-14,blockSize-10);//填充鱼雷方块
  108. 	}
  109. }
  110. function boomMove(){//鱼雷移动
  111. 	for(let i=0;i<boom.length;i++){//循环鱼雷数据
  112. 		if(boom[i][2]){
  113. 			boom[i][2] = false;//判断是否正在投雷，如果正在投弹则将其改变为投雷完毕状态
  114. 		}else{
  115. 			var Y = boom[i][1]+blockSize;//如果不是正在透雷，则Y坐标增加1格
  116. 			boom[i][1] = Y//重新写入Y坐标
  117. 		}
  118. 	}
  119. 	removeBoom();//清除多余的鱼雷（画布外）
  120. }
  121. function removeBoom(){//移除鱼雷
  122. 	for(let i=0;i<boom.length;i++){//循环鱼雷数据
  123. 		var Y = boom[i][1];//保存鱼雷Y坐标
  124. 		if(Y>ctxH*blockSize){
  125. 			boom.splice(i,1);//如果已经超过画布就删除
  126. 		}	
  127. 	}
  128. }
  129. function removeEmShip(){//超出范围删除敌舰并且HP-1
  130. 	for(let i=0;i<emShip.length;i++){//循环敌舰数据
  131. 		var X = emShip[i][0];//储存敌舰X坐标
  132. 		if(X<0){//如果已经在画布外
  133. 			minusHP();//减HP
  134. 			emShip.splice(i,1);//删除敌舰
  135. 			hard = hard+50;//难度降低50
  136. 			if(hard>=3000){
  137. 				hard=3000;//如果难度已经是3000了则保持3000
  138. 			}
  139. 		}
  140. 	}
  141. }
  142. function boomEmship(){//判定炸了
  143. 	for(let i=0;i<boom.length;i++){//循环鱼雷数据
  144. 		var boom_X = boom[i][0];//保存鱼雷X坐标
  145. 		var boom_Y = boom[i][1];//保存鱼雷Y坐标
  146. 		for(let j=0;j<emShip.length;j++){//循环敌舰数据
  147. 			var emShip_X = emShip[j][0];//保存敌舰X坐标
  148. 			var emShip_Y = emShip[j][1];//保存敌舰Y坐标
  149. 			if(boom_X===emShip_X){//判断是否X坐标相同
  150. 				if(boom_Y===(emShip_Y+1)*blockSize){//如果Y坐标也相同
  151. 					boom.splice(i,1);//删除这个鱼雷
  152. 					emShip.splice(j,1);//删除这个敌舰
  153. 					hard = hard-50;//难度增加50
  154. 					addScore();//加分
  155. 					if(hard<=1200){
  156. 						hard=1200;//如果难度已经是1200则保持1200
  157. 					}
  158. 					clearInterval(creatEm);//清除创建敌舰定时器
  159. 					creatEmShip();//立刻创建一个敌舰
  160. 					creatEm = setInterval(function(){
  161. 						creatEmShip();//用新的难度（速度）创建敌舰
  162. 					},hard);
  163. 				}
  164. 			}
  165. 		}
  166. 	}
  167. }
  168. function gameOver(){//游戏结束
  169. 	ctx.clearRect(0,0,canvas.width,canvas.height);//清空画布
  170. 	clearInterval(emt);
  171. 	clearInterval(boomT);
  172. 	clearInterval(creatEm);
  173. 	clearInterval(flush);//清空所有定时器
  174. 	ctx.font = "14px Courier New";//设定字体
  175. 	ctx.fillStyle = "#333";//设定字颜色
  176. 	ctx.textAlign="center";//设定字居中
  177. 	ctx.fillText("游戏结束，你得了"+score+"分", Math.round(ctxW*blockSize/2), 50);
  178. 	//显示游戏结束，你得了x分在画布中间
  179. }
  180. function addScore(){//加分
  181. 	score ++;//加分
  182. 	scoreSpan.innerHTML = String(score);//更新计分板
  183. }
  184. function minusHP(){//减HP
  185. 	HP --;//减HP
  186. 	if(HP<=0){
  187. 		HPSpan.innerHTML = String(HP);//更新HP剩余量
  188. 		setTimeout("gameOver()",0);//如果HP为0则游戏结束
  189. 	}else{
  190. 		HPSpan.innerHTML = String(HP);//更新HP剩余量
  191. 	}
  192. }
  193.  
  194. document.onkeydown=function(event){//绑定键盘事件
  195. 	var e = event || window.event || arguments.callee.caller.arguments[0];
  196. 	if(e && e.keyCode==37){//左
  197. 		if(myShipX===1){//防止我方移动到画布外面
  198. 			return
  199. 		}
  200. 		myShipX= myShipX-1;
  201. 	}
  202. 	if(e && e.keyCode==39){//右
  203. 		if(myShipX===ctxW){//防止我方移动到画布外面
  204. 			return
  205. 		}
  206. 		myShipX= myShipX+1;
  207. 	}
  208. 	if(e && e.keyCode==32){//空格
  209. 		addBoom();//创建鱼雷
  210. 	}
  211. 	
  212. }
预览DEMO

---------------------

PS.怎么感觉这游戏像是个拉屎丢人的游戏……