web html css js贪吃蛇

最新推荐文章于 2022-01-07 17:15:36 发布

VIP文章你的负卿是我

最新推荐文章于 2022-01-07 17:15:36 发布

阅读量253

点赞数 1

分类专栏： web前端文章标签：游戏 html js css3 javascript

本文链接：https://blog.csdn.net/weixin_43909373/article/details/108181483

版权

贪吃蛇

<!DOCTYPE html>
<html>
<head>
	<title>贪吃蛇</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<style type="text/css">
		.backDiv {
    
			text-align: center;
			position:absolute;
			top:20px;
			left:300px;
			width:820px;
			height:550px;
		}
		.display {
    
			position:absolute;
			top:0px;
			left:685px;
			width:180px;
			height:510px;
			border: 5px solid black;
			background-color: #ccffff;
		}
		#gamePanel table {
    
			border-collapse: collapse;/*合并单元格边框*/
			border: 5px solid black;
			background-color: #f0f0f0;
		}
		#gamePanel td {
    
			width:15px;
			height:15px;
		}
		#scoreDiv {
    
			position: absolute;
			top: 20px;
			left:20px;
			text-align: left;
			font-size: 20px;
			font-weight: bold;
		}
		#prompt {
    
			position: absolute;
			top: 180px;
			left: 20px;
			text-align: left;
			font-weight: bold;
		}
		#operator {
    
			position: absolute;
			top:550px;
			left:100px;
		}
		#result {
    
			position: absolute;
			top:200px;
			left:220px;
			background-color: #00ffff;
			font-size: 20px;
			font-weight: bold;
			text-align: left;
			padding: 20px;
		}
	</style>
	<script>
	var snake = [];// 蛇数组
	var barrers = [];// 障碍物数组
	var game = {
    sizeX:"30",sizeY:"40",record:"0"};
	var appearTime = disappearTime =  0;// 超级食物出现
	var superFoodX = superFoodY = null;
	var color = 0;// 食物颜色
	function init(){
    
		clearTimeout(game.time);
		snake = [];
		barrers = [];
		game.x = 0;game.y = 1;
		game.dir = null;
		game.direction = "right";
		game.rate = null;
		game.lengths = 2;// 蛇的长度
		game.score = 0;
		$("scoreDiv").innerHTML = "得分："+game.score+"<br/><br/>长度："+ game.lengths+"<br/><br/>"+"最高分："+game.record;
		$("pass").disabled = false;
		$("rate").disabled = false;
		$("start").disabled = false;
		bord();// 设置界面
		barrer();// 设置障碍物
		$("result").style.visibility = "hidden";
		snake.push("tb_" + game.x + "_" + (game.y-1));
		snake.push("tb_" + game.x + "_" + game.y);// 蛇头
	}
	function $(id){
    
		return document.getElementById(id);
	}
	// 表格
	function bord(){
    
		var panel = [];// 游戏面板
		var proPanel = [];// 提示面板
		panel.push("<table>");
		for(var i=0; i<game.sizeX; i++){
    
			panel.push("<tr>");
			for(var j=0; j<game.sizeY; j++){
    
				panel.push('<td id="tb_' + i + "_" + j + '" > </td>');
			}
			panel.push("</tr>");
		}
		panel.push("</table>");
		$("gamePanel").innerHTML = panel.join("");
		proPanel.push("<table>");
		proPanel.push('<tr>'+'<td width="20px" height="20px" bgcolor="#ff3300"></td>' + '<td>&nbsp得分+10</td>'+'</tr>');
		proPanel.push('<tr>'+'<td width="20px" height="20px" bgcolor="#33cc33"></td>' + '<td>&nbsp得分+

最低0.47元/天解锁文章

你的负卿是我

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web html css js贪吃蛇

贪吃蛇<!DOCTYPE html><html><head> <title>贪吃蛇</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .backDiv { text-align: center; position:absolute; to
复制链接

扫一扫