贪吃蛇是我们都玩过的游戏,也是一代人的回忆。今天就带大家用原生js实现贪吃蛇游戏功能。
基本思路:随机创建地图;利用top和left值,利用坐标的传递使蛇动起来;随机在地图上显示食物;利用蛇头的坐标进行判断;
优化细节;
开发模式:单例模式;(开发模式有时间一并分享给大家)
实现效果如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="./图标.png" type="image/x-icon">
<title>贪吃蛇</title>
<style>
body {
margin: 0%;
padding: 0%;
}
.map {
width: 900px;
height: 600px;
background-color: rgb(0, 0, 0);
margin: 0% auto;
position: relative;
cursor: none;
}
.snake {
width: 30px;
height: 30px;
position: absolute;
border: 2px solid rgba(0, 0, 0, 0.226);
box-sizing: border-box;
}
.food {
position: absolute;
width: 30px;
height: 30px;
background-color: aquamarine;
border-radius: 50%;
}
.score {
color: white;
}
</style>
</head>
<body>
<script>
var Map; //地图
var Snake; //蛇
var Food; //食物
var score = 0; //分数
var speed = 600; //蛇前进的速度
var game = (function () { //单例模式开发
function map() { //地图方法,用于创建地图和分数显示