过程
- 搭建环境
- 绘制游戏背景
- 创建Snake函数
- 创建Food函数
- 绘制Snake和Food
- 最终代码
搭建环境
- 创建文件
- index.html
- main.js
- 在index.html中写一些简单的html代码
<html>
<head>
<meta charset="utf8">
<title>Snake Game</title>
</head>
<body>
<canvas id="game" width="600" height="600"></canvas>
<script src="./main.js"></script>
</body>
</html>
设置使用utf8编码，title根据自己的情况设置，添加一个canvas元素，设置id为game，width为600，height为600， 最后引入main.js，我们一会要把我们的游戏逻辑写在main.js里面。
- 在main.js中写一些简单的代码
window.onload = function () {
start();
}
function start() {
console.log('游戏开始!!!');
}
完成上面几步之后，在浏览器中打开index.html，控制台中会显示"游戏开始!!!"
01.png
绘制游戏背景
function draw(snake, food)
{
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
// 背景
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, areaWidth, areaHeight);
}
这一步我们用来绘制游戏背景。
Snake函数
function Snake()
{
this.xspeed = 1;
this.yspeed = 0;
this.tail = [{x: 0, y: 0}];
this.update = function () {
var previousX = this.tail[this.tail.length - 1].x;
var previousY = this.tail[this.tail.length - 1].y;
var x = previousX + this.xspeed * scal;
var y = previousY + this.yspeed * scal;
// is game over
if (this.isGameOver(x, y)) {
finish = true;
console.log('游戏结束！');
return;
}
if (x === food.x && y == food.y) {
this.eat();
this.tail.push({ x: x, y: y });
} else if (!(x === previousX && y === previousY)) {
this.tail.shift();
this.tail.push({ x: x, y: y });
}
}
this.eat = function () {
food = new Food();
}
this.dir = function(xspeed, yspeed) {
this.xspeed = xspeed;
this.yspeed = yspeed;
}
this.isGameOver = function (nextX, nextY) {
if (nextX > areaWidth || nextX < 0 || nextY > areaHeight || nextY < 0) {
return true;
}
var found = this.tail.find(function (element) {
return element.x == nextX && element.y == nextY;
});
if (found !== undefined) {
return true;
}
return false;
}
}
Food函数
function Food()
{
// 设置随机位置
this.x = getRandom(0, Math.floor(areaWidth / scal)) * scal;
this.y = getRandom(0, Math.floor(areaWidth / scal)) * scal;
}
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
绘制snake和food
更新draw函数
function draw(snake, food)
{
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
// 背景
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, areaWidth, areaHeight);
// snake
ctx.fillStyle = 'green';
for (var i = 0; i < snake.tail.length; i++) {
ctx.fillRect(snake.tail[i].x, snake.tail[i].y, scal, scal);
}
// food
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, scal, scal);
}
最终代码
- index.html
<html>
<head>
<meta charset="utf8">
<title>Snake Game</title>
</head>
<body>
<canvas id="game" width="600" height="600"></canvas>
<script src="./main.js"></script>
</body>
</html>
- main.js
window.onload = function() {
start();
}
var areaWidth = 600;
var areaHeight = 600;
var scal = 20;
var snake = null;
var food = null;
var speed = 200;
var finish = false;
var updateInterval;
function start()
{
// 初始化游戏
init();
}
function init()
{
console.log('Game start!!!');
snake = new Snake();
food = new Food();
// set up
window.addEventListener('keyup', go);
update();
updateInterval = window.setInterval(update, speed);
}
function update()
{
if (finish) {
window.clearInterval(updateInterval);
return;
}
draw(snake, food);
snake.update();
}
function go(e)
{
switch (e.key) {
case 'ArrowLeft':
snake.dir(-1, 0);
break;
case 'ArrowRight':
snake.dir(1, 0);
break;
case 'ArrowUp':
snake.dir(0, -1);
break;
case 'ArrowDown':
snake.dir(0, 1);
break;
}
}
function draw(snake, food)
{
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
// 背景
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, areaWidth, areaHeight);
// snake
ctx.fillStyle = 'green';
for (var i = 0; i < snake.tail.length; i++) {
ctx.fillRect(snake.tail[i].x, snake.tail[i].y, scal, scal);
}
// food
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, scal, scal);
}
function Snake()
{
this.xspeed = 1;
this.yspeed = 0;
this.tail = [{x: 0, y: 0}];
this.update = function () {
var previousX = this.tail[this.tail.length - 1].x;
var previousY = this.tail[this.tail.length - 1].y;
var x = previousX + this.xspeed * scal;
var y = previousY + this.yspeed * scal;
// is game over
if (this.isGameOver(x, y)) {
finish = true;
console.log('游戏结束！');
return;
}
if (x === food.x && y == food.y) {
this.eat();
this.tail.push({ x: x, y: y });
} else if (!(x === previousX && y === previousY)) {
this.tail.shift();
this.tail.push({ x: x, y: y });
}
}
this.eat = function () {
food = new Food();
}
this.dir = function(xspeed, yspeed) {
this.xspeed = xspeed;
this.yspeed = yspeed;
}
this.isGameOver = function (nextX, nextY) {
if (nextX > areaWidth || nextX < 0 || nextY > areaHeight || nextY < 0) {
return true;
}
var found = this.tail.find(function (element) {
return element.x == nextX && element.y == nextY;
});
if (found !== undefined) {
return true;
}
return false;
}
}
function Food()
{
this.x = getRandom(0, Math.floor(areaWidth / scal)) * scal;
this.y = getRandom(0, Math.floor(areaWidth / scal)) * scal;
}
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
